nextjs - 💡(How to fix) Fix Docs: CSP guide causes DevTools inline style violations in development when using proxy-based nonce setup [1 comments, 2 participants]

What is the documentation issue?

Hi team,

I’m following the Content Security Policy (CSP) guide for the App Router:

https://nextjs.org/docs/app/guides/content-security-policy

I’ve configured CSP in proxy.ts exactly as described in the docs (using a nonce and setting the Content-Security-Policy header from the proxy). I also tested a few variations of the policy (with and without strict-dynamic, different style-src and script-src settings, etc.).

However, in development mode I’m consistently seeing CSP violations coming from the Next.js DevTools / overlay and related dev scripts – not from my own application code.

For example, I get repeated errors like:

Applying inline style violates the following Content Security Policy directive 
'style-src 'self' 'nonce-Yjc1MDhiY2UtYzg4Ny00OTc0LWI5ZWEtZWJmMTA5NjNmMDBj''. 
Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') 
is required to enable inline execution. The action has been blocked.

at devtool-style-inject.js
at dev-overlay.browser.tsx
...

And similar messages for inline styles/scripts originating from:

• devtool-style-inject.js
• dev-overlay.browser.tsx
• app-next-turbopack.ts
• React dev/runtime files
• Sometimes even from browser extensions (e.g. inpage.js)

From what I can tell, this is happening because the recommended strict CSP:

script-src 'self' 'nonce-{nonce}' 'strict-dynamic';
style-src 'self' 'nonce-{nonce}';

is not compatible with the way the DevTools and dev overlay inject inline styles/scripts in development — they don’t receive the nonce, so they are correctly blocked by CSP.

Is there any context that might help us understand?

What I think would help

Right now, the guide doesn’t clearly talk about how this interacts with development mode. As a developer, it’s a bit surprising to:

• Follow the official CSP guide,
• Set it up via proxy.ts with nonces,
• And then immediately get flooded with CSP errors from the Next.js dev overlay / tooling.

I think the documentation could be clearer in one of these ways:

1. Explicitly recommend enabling strict CSP only in production, e.g.:

   • Show examples that wrap the CSP logic in an if (process.env.NODE_ENV === 'production') check in proxy.ts,
   • And recommend testing CSP in production mode (next build && next start) rather than next dev.

2. Or, alternatively, provide a dev-friendly CSP example, where:

   • Production uses the strict nonce-based policy from the guide,
   • Development relaxes style-src / script-src with unsafe-inline / unsafe-eval specifically to allow Next.js DevTools and overlay to function without constant CSP violations.

Something along those lines in the docs would prevent developers from being surprised by these warnings and make the intended usage pattern (prod vs dev) much clearer.

If it helps, I can share my current proxy.ts setup and a minimal reproduction, but the core issue seems to be the mismatch between strict CSP + nonces and how the DevTools inject inline styles/scripts in development.

Thanks!

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/guides/content-security-policy