please I need help, I checked on all google and not get really answer for to open my issue. I want to use helmet to secure my express server. But when I am using it I get this error : ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 for loaded my images from my database. this is my server express :
// Initialize server
const app = express()
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(cors())
app.use(helmet())
// CORS configuration
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
I am getting my images from my database so the url in localhost is : http://localhost:3000/image/<name_image>
When i am not using helmet all works fine.
Please any help
After a long look on google I get the solution from here : https://github.com/helmetjs/helmet/issues/176 I add this line :
res.setHeader('Cross-Origin-Resource-Policy', 'same-site');
and just do refresh and clear cache (cmd + R on MAC and ctrl+R on others) and it's worked like a charm. Thanks Evan Hahn
tl;dr: disable the Cross-Origin-Embedder-Policy header, enabled by default in Helmet v5.
app.use(
helmet({
crossOriginEmbedderPolicy: false,
// ...
})
);
Helmet maintainer here.
Helmet sets the the Cross-Origin-Embedder-Policy HTTP response header to require-corp.
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.
In my case, I used that way
helmet({
crossOriginResourcePolicy: false,
})
The issue is with the cross-origin resource policy which should be same-site as the browser treats as another origin.
If versioning is a better option for you, I had this same issue on helmet >=5.0.0. Dropping to 4.6.0 solved this error.