hotjar 由于 csp 问题无法收集数据

Question

我正在尝试在我的 nextjs 项目中使用 hotjar，但它一直在控制台中给出以下错误：

拒绝连接到“wss://ws.hotjar.com/api/v2/client/ws?v=5”，因为它违反了以下内容安全策略指令：“default-src 'self' http: https: data : blob: '不安全内联'"。请注意，“connect-src”未明确设置，因此“default-src”用作后备。1

我尝试更改 next.config.js 中的 csp 配置，但它仍然给出相同的错误。这是我的 next.config.js 文件：

const nextConfig = {
  output: "standalone",
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              "default-src 'self' http: https: data: blob: 'unsafe-inline' ws://ws.hotjar.com wss://ws.hotjar.com; " +
              "img-src 'self' https://*.hotjar.com; " +
              "script-src 'self' https://*.hotjar.com 'unsafe-inline' 'unsafe-eval'; " +
              "connect-src 'self' https://*.hotjar.com wss://ws.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;",
          }
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Answer 1

错误消息中的 CSP 与您显示的 CSP 配置不匹配。如果错误消息和配置都是最近的，这可能意味着设置了多个 CSP。检查您的响应标头和元标记。内容需要通过现有的所有政策。您可能需要删除/修改一些其他策略。