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.
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.