hotjar is unable to collect data due to csp issue

Question

I am trying to use hotjar in my nextjs project but it keeps giving me below error in the console:

Refused to connect to 'wss://ws.hotjar.com/api/v2/client/ws?v=5' because it violates the following Content Security Policy directive: "default-src 'self' http: https: data: blob: 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.1

I tried changing csp configs in my next.config.js but it till give the same error. This is my next.config.js file:

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

The CSP in the error message and the CSP config you have shown don't match. If both the error message and the config is recent, this likely means that there are more than one CSP being set. Check your response headers and meta tags. Content needs to pass all policies present. You'll likely need to remove/modify some other policies.