Helmet: How to allow images to load from different domain (Err: NotSameOriginAfterDefaultedToSameOriginByCoep) - node.js

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

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;

Answer 2

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,
})
);