[Feature] Provide a way to be able to specify a nonce for styles used by next-dev-overlay

[lucasbasquerotto]

Goals

Be able to use a strict style CSP in development mode (style-src with a nonce instead of unsafe-inline).

Non-Goals

No response

Background

I was able to use CSP with nonce in production, but on development almost everything is fine, except NextJS styles that are used for some development stuff, that stays at the bottom left of the page, showing errors, if uses turbopack, etc., and, unless I define unsafe-inline for style-src in dev mode, this part is rendered incorrectly, and the console shows lots of style errors due to CSP.

Keeping unsafe-inline in dev mode may make some styles that should have nonce not show errors in this mode, instead, I could end up detecting them only in a production environment, which would be undesirable.

You can see that the official example of CSP by NextJS show just a gray rectangle at the top left part of the page instead of the stylized button at the bottom left, and give style-src errors:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-NWM3ZTI5NDItMmNhMC00YjdiLWFiMzgtNDhjNjQ3NzJhODU2'". Either the 'unsafe-inline' keyword, a hash ('sha256-7+X7DQA/TxfF0oj5dpUqKm7t6h5sO5GCAwaOSEJGsEE='), or a nonce ('nonce-...') is required to enable inline execution.

To simulate the error:

npx create-next-app --example with-strict-csp with-strict-csp-app
cd with-strict-csp-app/
npm run dev

Proposal

Either make next-dev-overlay retrieve the value of the header x-nonce as the nonce value for the styles that are included in dev mode by next-dev-overlay (this would be the best approach), or make a way to specify a static nonce (in dev mode, a static nonce is fine, as there should be no security implication in dev mode regarding CSP, and removing unsafe-inline would already help a lot in detecting issues in styles not using nonce, instead of detecting them only in a production environment).