Nuxt3嵌入Qualtrics脚本无内容：CORS与安全策略问题求助

问题场景 #

在Nuxt3应用中嵌入Qualtrics外部脚本后，仅能显示调查弹窗框架但无内容，鼠标悬停提示[our company].qualtrics.com refused to connect。现有nuxt.config安全配置已添加frame-src、form-action相关规则，但问题仍存在。

解决方案 #

1. 调整Cross-Origin-Embedder-Policy（COEP）配置

当前设置的credentialless会强制要求跨源资源携带特定CORP头，而Qualtrics的资源可能未适配该规则。修改为unsafe-none可解除此限制：

security: {
  headers: {
    crossOriginEmbedderPolicy: 'unsafe-none', // 替换原有的credentialless
    // ... 其他原有配置
  }
}

2. 完善CSP规则，覆盖Qualtrics全域名范围

除已有规则外，补充Qualtrics主域名及子域名到多个CSP指令中，同时添加child-src兼容旧版浏览器：

security: {
  headers: {
    contentSecurityPolicy: {
      'connect-src': [
        '*',
        'https://[our company].qualtrics.com',
        'https://*.qualtrics.com' // 覆盖Qualtrics子域名资源
      ],
      'base-uri': 'self',
      'default-src': 'self',
      'font-src': [
        "'self'",
        'data:',
      ],
      'form-action': [
        "'self'",
        'https://[our company].qualtrics.com',
        'https://*.qualtrics.com'
      ],
      'img-src': [
        "'self'",
        'https:',
        'data:',
      ],
      'object-src': 'none',
      'script-src-attr': 'none',
      'style-src': [
        "'self'",
        'https:',
        "'unsafe-inline'",
      ],
      'script-src': [
        "'self'",
        'https://[our company].qualtrics.com',
        'https://*.qualtrics.com', // 明确允许Qualtrics脚本源
        "'unsafe-inline'",
        "'strict-dynamic'",
        "'nonce-{{nonce}}'"
      ],
      'frame-src': [
        "'self'",
        'https://[our company].qualtrics.com',
        'https://*.qualtrics.com'
      ],
      'child-src': [ // 添加child-src兼容部分浏览器框架加载规则
        "'self'",
        'https://[our company].qualtrics.com',
        'https://*.qualtrics.com'
      ],
      'frame-ancestors': 'self',
      'upgrade-insecure-requests': true,
    },
    // ... 其他原有配置
  },
}

3. 确保Qualtrics脚本加载符合CSP要求

如果使用了nonce机制，需在Qualtrics的脚本标签上添加对应nonce属性：

<script nonce="{{nonce}}" src="https://[our company].qualtrics.com/jfe/form/SV_XXXXXX"></script>

验证步骤 #

1. 先修改COEP为unsafe-none并重启Nuxt服务，测试弹窗是否正常加载内容；
2. 若问题解决，可逐步尝试恢复COEP为credentialless，同时检查Qualtrics资源是否支持CORP头（若无法从Qualtrics后台配置则需保留unsafe-none）；
3. 确认CSP规则中所有涉及Qualtrics的域名都已正确添加。

内容的提问来源于stack exchange，提问作者Suki