LocalizedStringProvider: nonce parameter for Content Security Policy

[Julienng]

Closes #6218

✅ Pull Request Checklist:

• Included link to corresponding LocalizedStringProvider: missing nonce parameter when CSP is enabled.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component). Would like help on where to document there
• Looked at the Accessibility Practices for this feature - Aria Practices no concern

📝 Test Instructions:

#6218
Reproduction repo and deployed test on vercel to check

🧢 Your Project:

[snowystinger]

Seems reasonable, we should see about adding it to our example project for verification.
https://github.com/adobe/react-spectrum/tree/main/examples/next-app

[Julienng]

Oh i missed that one, I can work on that based on this reproduction bug repository:

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

[Julienng]

@snowystinger I've added the example project. It matches with the next-app but with CSP

By testing it, I noticed hydration error with CSP because the browser remove nonce parameter from the DOM before React hydration.

To circumvent that problem, I followed the same pattern as next-themes in this PR: pacocoursey/next-themes#262

new code:

<script nonce={typeof window === 'undefined' ? nonce : ''} suppressHydrationWarning dangerouslySetInnerHTML={{__html: getPackageLocalizationScript(locale, strings)}} />;

[snowystinger]

Linking relevant React issue facebook/react#26028

[snowystinger]

Ok, might be a silly question, but how do I run this to verify what it's doing?
I tried

cd examples/next-app-csp
yarn
yarn dev

and it just renders a blank page with an error, which is about the nonce, element in question. So is this what it's supposed to do?

[Julienng]

Oh yeah, I had to yarn build before for the example to work. I don't know if this is expected (from the monorepo perspective)?

[snowystinger]

Oh yeah, I had to yarn build before for the example to work. I don't know if this is expected (from the monorepo perspective)?

totally fine, I think we should include instructions though. With all the different systems, I sometimes forget the commands I need to run and in what order.

[snowystinger]

I was able to successfully run it, verified the suppress warning and checked sent-through nonce via the attribute

[LFDanLu]

Verified the behavior before and after the nonce addition. Might be good to add a small blurb to the docs SSR docs highlighting that this prop exists?