CSP Header

[wuifdesign]

Is there a way to use CSP headers with NextJs on the edge? I use the solution here: vercel/next.js#42330 (comment)

it works fine when building/running with next on my local machine.

For NextJs the nonce get parsed out of the headers (https://stackoverflow.com/a/76567353/13946940) but this doesn't seam to work by default wenn deployed to cloudflare workers.

[dario-piotrowicz]

Hi @wuifdesign 🙂👋

I tried to also apply your solution, I cloned the repository present in the comment you linked, this is my fork:
https://github.com/dario-piotrowicz/nextjs-csp-report-only

I've only added a single commit to change the routes to use the edge runtime

I've deployed the application here: https://nextjs-csp-report-only.pages.dev/

And it looks to me like the nonces are getting generated as expected at https://nextjs-csp-report-only.pages.dev/csp :

(PS: I also deployed the app on vercel: https://nextjs-csp-report-only-pi.vercel.app/csp and the result seems identical to me)

Am I missing something?

[wuifdesign]

hi @dario-piotrowicz

thx for your help. Very strange, for me it isn't working. but as yours is working it seams something else may be off with my app. i will take a closer look at my app and try to find the error.

[dario-piotrowicz]

Thanks 🙂

Please let me know when/if you find something, I'm here to help if I can 🙂

[wuifdesign]

hi, i finally had time to test it, and i just redid everything from scratch, now it is working, i don't know were my error was.

thx for your help. i just thought it isn't working, but it seams like there was an error in my code somewhere.

[dario-piotrowicz]

No worries, I'm glad that you manage to get it working 😄