Helmet: How to allow images to load from different domain (Err: NotSameOriginAfterDefaultedToSameOriginByCoep)

Question

I am using helmet to set CSP headers. I am using React on the frontend.

I store my images on a subdomain (assets.mydomain.com). For some reason I get the following error message: ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep when loading the images.

I also use a script tag for Google Analytics. This one also gives me an error message: Refused to connect to https://www.google-analytics.com/ because it violates... "default-src 'self'"

This is how I have configured my CSP currently:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: [
          "'self'",
          "https://www.googletagmanager.com",
          "'self'",
          "https://www.google-analytics.com",
          "'unsafe-inline'",
          "mydomain.com",
        ],
        imgSrc: ["'self'", "assets.mydomain.com"],
      },
    },
    crossOriginEmbedderPolicy: false,
    crossOriginResourcePolicy: false,
  })
);

What is wrong with my CSP configuration?

Answer 1

I did it!!!

After literally hundreds of test-error I found that this little piece of code at least, it fixed my problem of having 2 different services (2 domains) and now my little app is working fine again, time 1:11am !! :)

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        scriptSrc: ["'self'",  'www.google.com www.gstatic.com',"https://*.statcounter.com", "'unsafe-inline'"], 
        frameSrc: ["'self'", "www.google.com", "https://*.statcounter.com"], 
        connectSrc: ["'self'", 'https://*.statcounter.com'],
      },
      

    },
      
    crossOriginResourcePolicy: { policy: "cross-origin" },
    crossOriginEmbedderPolicy: false,
  })
);

Answer 2

So if anyone comes across this question for some reason, I figured it out. As it turns out, the cross-origin-embedder-policy header was giving me troubles. This had to be disabled. Helmet has a built in option to do so crossOriginEmbedderPolicy: false,. More info here.

For most people I guess that'll work. However it did not work for me. The header was still being set. Disabling it with express also did not work (app.disable('cross-origin-embedder-policy');).

I have no idea why the header was still being set, but I had to disable it manually in my nginx configuration: proxy_hide_header cross-origin-embedder-policy;

My config:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: [
          "'self'",
          "'unsafe-inline'",
          "https://*.google.com",
          "https://*.google-analytics.com",
          "https://*.googletagmanager.com",
          "https://*.hotjar.com",
          "https://*.mollie.com",
        ],
        connectSrc: [
          "'self'",
          "'unsafe-inline'",
          "https://*.google.com",
          "https://*.google-analytics.com",
          "https://*.googletagmanager.com",
          "https://*.hotjar.com",
          "https://*.mollie.com",
        ],
        imgSrc: [
          `'self'`,
          `data:`,
          `*.domain.nl`,
          `*.amazonaws.com`,
        ],
      },
    },
    //Will work for most, but did not work for me:
    // crossOriginEmbedderPolicy: false,
  })
);
//# in nginx I manually disabled the COEP header: roxy_hide_header cross-origin-embedder-policy;