I'm seeing the following error in my browser console when using Helmet.js:
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
What should I do?
tl;dr: disable the Cross-Origin-Embedder-Policy header, enabled by default in Helmet v5.
app.use(
helmet({
crossOriginEmbedderPolicy: false,
// ...
})
);
Helmet v5 sets the the Cross-Origin-Embedder-Policy HTTP response header to require-corp. (This was possible in Helmet v4, but it was off by default, so most people didn't use it.)
Setting this header means that loading cross-origin resources (like an image from another resource) is trickier. For example, loading a cross-origin like this...
<img alt="My picture" src="https://example.com/image.png">
...won't work unless example.com explicitly allows it, by setting some response headers of its own. Your browser will try to load example.com/image.png, and if it's not explicitly allowed, your browser will drop the response.
To fix this, you can prevent Helmet from setting the Cross-Origin-Embedder-Policy header, like this:
app.use(
helmet({
crossOriginEmbedderPolicy: false,
// ...
})
);
I made a small sample app you can use to play around with this. In my testing, it doesn't seem to work in HTTP but it does over HTTPS, which might explain why things only break in production.