good idea
/subscribed

Subscribed! Our team is also having a massive pain with this. On doing some browsing around there seem to be some solutions to this but a lot of them seem outdated and / or quite hacky making them unideal. @danieltott from your issue I found here

You currently can use a good, non-unsafe-inline CSP in Next 13 app directory/server components. The caveat being only on dynamic pages. This is because the solution involves using a nonce value, and by definition they need to be different on every page render, which is incompatible with static pages.

When the Next.js renderer renders a page with a nonce value in the script-src directive, it will grab that and insert it in to all <script>s that it inserts, both on the server and dynamically.

This can be done via middleware - see here for source, and here for a working example.

I would love to see a better solution for this though. Currently you need to add custom code to middleware, and, as stated above, this only works for dynamic pages.

• If Next supported some way to automatically calculate hashes as @Vinnl suggests, this would allow for a strong CSP on statically-generated pages, since the hash values would be known at build time.
• Next could also provide an easier way to go about adding a CSP and/or nonce values to an existing CSP. Perhaps in nextjs.config?
• At the very least, a better example in the docs could help

Hey folks, wanted to swing back here with an update. After digging through many different issues and discussions, I've made a new page in the documentation (PR) specifically for Content Security Policy and nonces. This docs page:

• Explains how to generate a nonce with Middleware
• Shows how to consume the nonce in a route with headers()
• Shows a complete CSP without needing to use any unsafe
• Shows how to ignore the nonce Middleware from running on prefetches / static assets

Further, we've patched some bugs and made improvements to nonce handling in Next.js that will be available in the latest canary version (for those of you time traveling from the future, upgrade to Next.js 13.5). We also updated the with-strict-csp example in the examples/ folder, which is backlinked from the new documentation page.

Really hope this helps out, thank you all 🙏 I'll be closing this discussion out. To continue the discussion, please go here.