strict-dynamic CSP support for hybrid Next.js apps

[nibtime]

Hi,

I made a package @next-safe/middleware that builds upon next-safe, a package for configuring security headers, including Content-Security-Policy (CSP). With @next-safe/middleware you can configure next-safe via Next 12 middleware.

However, the highlight of the package is strict-dynamic CSP support for hybrid Next.js apps on top, something that isn't feasible without middleware. It contains an easily reusable solution, that decides between a Nonce-based vs. a Hash-based approach for strict CSP on a per route basis.

It is still in an early PoC state and I've been developing it from a private monorepo so far, but already got in touch with the maintainer of next-safe (@trezy) and hope this can be brought into a properly tested and well-documented solution.

If you have a project going with Next 12 and have some time and room for experimentation, I'd be glad if you give it a try and give me some feedback on it!

[leerob]

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.