Next.js nonce with CSP Foundry
This opens on the Next.js nonce preset, taken from the Next.js documentation. The notes explain the rendering trade-off that decides whether nonces are right for your app.
- Copy the policy and generate a fresh nonce for every request in your proxy or middleware.
- Pass the nonce to Next.js through the request headers as the documentation describes.
- Make sure every page renders dynamically; nonces cannot work on statically generated pages.
- Deploy as Report-Only, fix what is reported, then enforce.
What to know
The Next.js documentation recommends a policy with script-src 'self' plus a per-request nonce and 'strict-dynamic'. A nonce is only meaningful if it is different on every response, so it has to be generated at request time. Next.js reads the nonce from the Content-Security-Policy header of the request and attaches it to its own scripts.
The cost is rendering mode. The documentation states that when you use nonces, all pages must be dynamically rendered: static optimisation and incremental static regeneration are disabled, pages cannot be cached by a CDN without extra configuration, and Partial Prerendering is incompatible. For a mostly static marketing site that can be a real performance and hosting-cost change.
The documentation also notes that development needs 'unsafe-eval' because React uses eval for debugging information, while production does not. If you want a strict policy without dynamic rendering, there is an experimental Subresource Integrity option that adds hashes at build time, with its own limitations: it is experimental and App Router only.
Updated · Cosmovex
Questions
How do I add a nonce-based CSP in Next.js?
Generate a random nonce per request in middleware or proxy, put it in the Content-Security-Policy header and in an x-nonce request header, and render pages dynamically so Next.js can attach the nonce to its scripts.
Why does CSP with nonces make my Next.js site slower?
Nonces force dynamic rendering, so pages are generated on each request instead of being served from a cache. That means slower first loads, more server work and no CDN caching by default.
Does Next.js need unsafe-eval in production?
Not by default. The documentation says it is required in development for React debugging features but not in production.
Can I use CSP with static export or ISR?
Not with nonces. Use a hash-based approach such as the experimental SRI support, or a header policy that allows inline scripts, accepting weaker protection.
The free plan covers everything on this page. CSP Foundry Pro ($9/mo, billed monthly) is described on the CSP Foundry page.
