Sending props from Document to App component (_app) in Next.js

[bmamouri]

Describe the feature you'd like to request

To implement Content Security Policy, I need to pass a random token generated in the Document component at _document.tsx file to the App component at the _app.tsx file.

I need this feature because I have component in both files that generate scripts and those scripts require the same nonce value. The nonce value should be added as a meta tag header to the page, and it should also be added to the scripts tags in the page.

At the moment, I am unable to find any idiomatic way to pass props between these two components.

Describe the solution you'd like

Since Document component wraps the App component, I would like a way to pass props from Document to App component.

Describe alternatives you've considered

1. I would be able to provide the nonce value at the component level that would be added to the headers (no meta tag) using withSecureHeaders's function of next-secure-headers package, but that requires a server.
2. Storing the nonce value in the request and stripping it later: this could potentially work, but it feels hacky!
3. Moving the scripts from the App component to the Document component, but that would break many things.
4. Having a nonce valid for a given number of minutes and re-use the same value, but that is not entirely secure. The value needs to be deterministic to ensure that a mismatch between nonce values in two components does not occur.
5. Have two separate Content-Security-Policy meta tags in both components, but App component tags will be added to the page dynamically, not allowed in CSP. The tag should be present at the very first server request.

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