Enable qualtrics for nuxt security crossorigin embedder policy

Question

Trying to embed an external script in our nuxt application. (Nuxt3).

We've got the following security settings:

nuxt.config excerpt:

security: {
    headers: {
      crossOriginEmbedderPolicy: 'credentialless', // added this specifically for qualtrics
      contentSecurityPolicy: {
        'connect-src': '*',
        'base-uri': 'self',
        'default-src': 'self',
        'font-src': [
          "'self'",
          'data:',
        ],
        'form-action': [
          "'self'",
          // added this specifically for qualtrics:
          'https://[our company].qualtrics.com',
        ],
        'img-src': [
          "'self'",
          'https:',
          'data:',
        ],
        'object-src': 'none',
        'script-src-attr': 'none',
        'style-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
        ],
        'script-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          "'strict-dynamic'",
          "'nonce-{{nonce}}'",
        ],
        // added this specifically for qualtrics:
        'frame-src': [
          "'self'",
          'https://[our company].qualtrics.com',
        ],
        'frame-ancestors': 'self',
        'upgrade-insecure-requests': true,
      },
      xContentTypeOptions: 'nosniff',
    },
  },

With this, I can get the survey popup to show up but it doesn't have any content, see screenshot:

On hover, I can see the warning: [our company].qualtrics.com refused to connect

Is there a way to send CORS details from the qualtrics interface? This would be my preferred way of fixing this issue, but I'm not finding anything useful at all on the qualtrics documentation.

Alternatively, how would I need to edit the security policy to see content?

After reading this question, I have tried adding the qualtrics url to script-src and also replacing none-{{nonce}} line with it, but to no avail.

Answer 1

Found some more documentation, and updated the security accordingly:

nuxt.config

security: {
  headers: {
    crossOriginEmbedderPolicy: 'unsafe-none', // also works when set to false
    contentSecurityPolicy: {
        'connect-src': '*',
        'base-uri': 'self',
        'default-src': 'self',
        'font-src': [
          "'self'",
          'data:',
        ],
        'form-action': [
          'https://*.qualtrics.com', // needed
          "'self'",
        ],
        'frame-ancestors': 'self',
        'img-src': [
          "'self'",
          'https:',
          'data:',
          'https://*.qualtrics.com', // needed
        ],
        'object-src': 'none',
        'script-src-attr': 'none',
        'style-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
        ],
        'script-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          "'strict-dynamic'",
          "'nonce-{{nonce}}'",
          'https://*.qualtrics.com', // needed
        ],
        'frame-src': 'https://*.qualtrics.com', // needed
        'upgrade-insecure-requests': true,
      },
  },
}

The documentation also states to allow for eval-unsafe but this wasn't necessary in my case.