LocalizedStringProvider: missing nonce parameter when CSP is enabled

[Julienng]

Provide a general summary of the feature here

When I activate CSP on Next.js with nonce (doc and example).

I have a problem with LocalizedStringProvider because it ends up as an inline script but I can't manual set the nonce parameter into it

🤔 Expected Behavior?

I would expect to do something like that:

<LocalizedStringProvider locale={lang} nonce={nonce} />
// or
<LocalizedStringProvider locale={lang} extraScriptProps={{nonce}} />

I have a PR ready for the first option

😯 Current Behavior

The current behavior ends up with this kind of error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-NTM4MTg1ZDUtZDhkMS00MGE1LTgwMTgtOWU2MDUyMmMzNjkz' 'strict-dynamic'"

because the html returned for that page contains:

<!-- missing nonce -->
 <script>
            window[Symbol.for('react-aria.i18n.locale')] = "en";
            {
                let A = (e)=>`Selected Date: ${e.date}`
                  , B = "Previous"
                  , C = "Next"
                  , D = "Select";
                window[Symbol.for('react-aria.i18n.strings')] = {

💁 Possible Solution

• accept nonce in LocalizedStringProvider
• accept an extraScriptProps for any of the script props: this is what Apollo is doing
• automatically detect nonce? I guess this is framework dependent

Apollo wrapper:

<ApolloNextAppProvider makeClient={makeClient} extraScriptProps={{ nonce }}>

🔦 Context

This is a blocker for me because I need to active the CSP header in my Next.js app and I'm unable to deploy without having the nonce in all inlined scripts.

💻 Examples

deployed example https://csp-next-and-react-aria-components-provider.vercel.app/

associated code: https://github.com/Julienng/csp-next-and-react-aria-components-provider

🧢 Your Company/Team

Semarchy

🕷 Tracking Issue

No response