Next.js项目中HotJar因CSP问题无法采集数据的求助

问题分析 #

控制台报错显示当前生效的CSP指令是"default-src 'self' http: https: data: blob: 'unsafe-inline'"，但你明明在next.config.js里配置了包含HotJar地址的connect-src，说明实际生效的CSP并非你配置的版本。常见原因包括配置未生效、重复设置CSP、语法错误导致CSP被忽略。

解决方案 #

1. 先确认实际生效的CSP #

打开浏览器开发者工具 → 「网络」标签页 → 刷新页面 → 查看主文档的响应头，找到Content-Security-Policy字段，确认其内容是否和你在next.config.js中配置的一致。

2. 修正next.config.js的CSP配置 #

优化配置，避免冗余和语法问题：

const nextConfig = {
  output: "standalone",
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self' http: https: data: blob: 'unsafe-inline';",
              "img-src 'self' https://*.hotjar.com;",
              "script-src 'self' https://*.hotjar.com 'unsafe-inline' 'unsafe-eval';",
              "connect-src 'self' https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com;",
              "font-src 'self' https://*.hotjar.com;",
              "style-src 'self' https://*.hotjar.com 'unsafe-inline';",
              "object-src 'none';",
              "base-uri 'self';",
              "form-action * 'self';",
              "frame-ancestors 'none';",
              "block-all-mixed-content;"
            ].join(' '),
          }
        ],
      },
    ];
  },
};

module.exports = nextConfig;

• 移除default-src中的ws/wss地址，避免和connect-src冲突
• 合并connect-src里的重复地址，简化规则
• 用数组拼接的方式避免手动拼接的语法错误

3. 排查其他CSP来源 #

• 检查_app.js或_document.js中是否通过<meta>标签设置了CSP，这会覆盖响应头的配置
• 若使用托管平台（如Vercel、Netlify），检查平台项目设置里是否配置了CSP，平台级配置优先级更高
• 排查第三方安全类插件，是否自动添加了CSP规则

4. 强制刷新缓存 #

• 开发环境：重启Next.js服务，清除浏览器缓存
• 生产环境：重新部署项目，清除CDN缓存（如果有）

5. 验证修复效果 #

配置生效后刷新页面，查看控制台是否仍有错误，同时可在HotJar后台验证站点连接状态

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