Next JS Content Security Policy (CSP)

[SamuelColeMorgan]

Hello,

I am currently making a Content Security Policy (CSP) for a production application made with Next.js. While I have found trustworthy documentation for implementing a CSP with the framework, there are a couple of concerns that I want to make sure are addressed correctly.

Issue 1: I have read that security policies set in HTTP headers are preferable. However, I cannot find a way to pass a 'nonce' attribute for inline styles in production using this approach.
https://nextjs.org/docs/advanced-features/security-headers

Issue 2: I've seen other examples where developers inject their CSP in the custom document("./pages/_document.js"). I am hesitant to use this approach because I hear meta-tag CSPs are easily bypassable. https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp

My Questions:

1. Is there a way to use a 'nonce' with header configuration in "next.config.js"? If so, how?
2. Is specifying "unsafe-inline" for styles in production a security issue at all if Next.js automatically sanitizes user input? I should also mention that I sanitize all mongo database queries in my APIs as well.
3. Is there something about the meta tag approach described in Issue 2 that makes it as secure as the HTTP header approach?
4. What approach do you recommend I take to make my CSP as strong as possible for my web app?

All the best,
-Sam

[isggwp]

yeah i have related issue. can someone or we need example for key and value

ex:

{
    key: 'Content-Security-Policy',
    value: .....

bcz i still got wrong character on console browser

[nibtime]

Hi @SamuelColeMorgan

What approach do you recommend I take to make my CSP as strong as possible for my web app?

There is a project called next-safe. The maintainers there can probably give you additional guidance on the topic, I looked into code and docs a bit and gained some insight from it. The whole CSP topic can be really confusing I think, with no definitive guidance available on what is effective and what you should do.

The most clarifying sources I found are those:
https://web.dev/strict-csp/
https://owasp.org/www-pdf-archive//2017-04-20-OWASPNZ-SpagnuoloWeichselbaum.pdf

According to this 'strict-dynamic'' with hash or nonce are recommended and effective against XSS.

There is this example: https://github.com/vercel/next.js/blob/canary/examples/with-strict-csp. However, if you add 'strict-dynamic' to script-src, it's essentially turning off JavaScript for your users when you deploy the CSP in enforce mode because it blocks all Next.js frmaework scripts, unless you provide either a nonce you attach to the scripts or add all hashes of the scripts to script-src.

Edit: I made a package @next-safe/middleware that provides strict-dynamic support for hybrid Next.js apps (Nonce-based for pages with getServerSideProps, Hash-based for pages with getStaticProps (works for ISR as well). It builds upon next-safe and is an opt-in feature that can only be realized with Next 12 middleware.

[rajat-devslane]

@SamuelColeMorgan did you find any solution to use nonce in "next.config.js"

[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.