Inability to proper use "nonce" value for generated _document.tsx/js using <NextScript/> component as _document is generated only at build time.

[komw]

Goals

Proper use a suggested CSP for webapps, using a "strict-dynamic" with nonce values of nextjs scripts.

Non-Goals

No response

Background

Although the component allows for the use of the "nonce" value, it does not make sense and only creates confusion, as all implementations using this option are wrong.

Nonce as a value should be regenerated for each request. is designed to be used only in the _document.js/tsx file, which is rendered during the project build stage and not at runtime, so its not possible to regenerate a nonce value for

Therefore, most implementations incorrectly assume using getInitialProps in _document to generate a nonce value, then passing it in the head and using it as props in . This approach creates pages vulnerable to CSP attacks because only in the development environments will the nonce be regenerated for each request, and in the production envs, it will always be the same as the one associated with the build process run.

Proposal

Solution: Either fix the CSP handling in nextjx, or the 'nonce' prop should be removed from as it introduces a false sense of security.
Many libraries rely on this, introducing vulnerable pages to the market.

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