Recommended settings for use with a cdn
marnixhoh opened this issue · comments
I have been trying to find an answer to this question, which I have found, but it requires me to completely disable CORP:
crossOriginResourcePolicy: false
Due to security concerns, I'd rather not completely disable it, if possible.
I am running an Express app with helmet. The frontend (Next.js) loads all images from a CDN in production. However, these images are blocked in development (locally) with the following error in the console: err_blocked_by_response.notsameorigin 200 (ok).
Frontend is served from localhost:3001
Backend and CDN are served from localhost:3000
Note that in order for the frontend and backend to work together, CORS is openend up in development using:
mainApp.use(
cors({
credentials: true,
origin: /.*/,
})
);
The following is my helmet config (5.1.1):
mainApp.use(
helmet({
contentSecurityPolicy: {
useDefaults: true,
directives: {
'script-src': ["'self'", 'maps.googleapis.com'],
'img-src': [
"'self'",
'data:',
'maps.gstatic.com',
'*.googleapis.com',
'*.ggpht',
process.env.CDN_HOST.split('//')[1],
],
},
},
})
);
Does anyone have an idea as to why the images are not being loaded?
PS I am aware of this SO thread and a similar Github issue:
https://stackoverflow.com/questions/70752770/helmet-express-err-blocked-by-response-notsameorigin-200
But unfortunately disable crossOriginEmbedderPolicy does not work for me.
I hope it's ok for me to post this question here. Thank you so much for any help :D
