Conflict with NextJS and HelmetJS CSP (New to NextJS)
Unanswered
Blue whiting posted this in #help-forum
Blue whitingOP
Hi guys. New to NextJS a bit so bear with me. Essentially, I created my NextJS project with 'create-next-app' and also added my own expressjs server. I then added HelmetJS here as I've seen it is good security practice to have these CSP headers. Now it is giving me
"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash (), or a nonce is required to enable inline execution". The error in console prints out 4 times which I believe is the 4 bundled scripts that NextJS tries to dynamically load or something like that.
The only answers I've seen online seem to be just allow 'unsafe inline' in the CSP, which doesnt seem safe? Then the other answers seem to be use nonce, which ChatGPT is claiming to me wouldn't work for dynamically loaded scripts like NextJS does (but I can't confirm this is true...so i may just have to try it out). Any ideas or tips or clear misunderstandings I am showing? I can provide more info, but my project right now is pretty barebones. I am using defaults for helemt CSP except forcing it to allow manifest-src self to load a manifest script in, which I believe should be safe. Feel free to ask any questions or things I should add to make this post more useful. Thank you!
"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash (), or a nonce is required to enable inline execution". The error in console prints out 4 times which I believe is the 4 bundled scripts that NextJS tries to dynamically load or something like that.
The only answers I've seen online seem to be just allow 'unsafe inline' in the CSP, which doesnt seem safe? Then the other answers seem to be use nonce, which ChatGPT is claiming to me wouldn't work for dynamically loaded scripts like NextJS does (but I can't confirm this is true...so i may just have to try it out). Any ideas or tips or clear misunderstandings I am showing? I can provide more info, but my project right now is pretty barebones. I am using defaults for helemt CSP except forcing it to allow manifest-src self to load a manifest script in, which I believe should be safe. Feel free to ask any questions or things I should add to make this post more useful. Thank you!
1 Reply
Blue whitingOP
for reference if anyone looks this up later. i ended up creating nextjs middleware to add CSP stuff and just kept helmet for non CSP stuff and its working and picking up my CSP. had to use nonces route in the middleware