使用 CSP 运行 nextjs 开发模式，使用 nonce 运行“style-src”

Question

I'm not able to get nextjs development mode running with "style-src" CSP active. Currently i have only 2 errors left, but these impact my development flow:

I think this 2 errors would be the styling for error display in development mode and the refresh spinner.

is there a way to fix this (adding nonce or something). I want to have the same CSP for development as for production to not produce CSP errors after build. (ie. using inline style somewhere). If i have to use "unsafe-inline" for development i will not be notified until changes are build and deployed.

Using __webpack_nonce__ also doesn't help.

Seams like the scripts try to inject a <script> element to the dom, but don't respect __webpack_nonce__ . is there a way to force inject it to each element?

Answer 1

With just the error messages to work with I assume that the code is either inserting a style tag or a style attribute. Attributes are not nonceable and also will not work with hashes in many (or all) browser implementations. If it is a style tag it is likely that the module setting it doesn't support nonces. Try inserting the hash provided in the error message. If there are variations to the style you may have add multiple hashes. If you need to keep adding hashes for a long time, the hash route is not for you. If these hashes aren't needed in production they still do no harm, except require a tiny bit of bandwidth.

If you need to resort to 'unsafe-inline' in general, this isn't very bad for style-src if you restrict other parts of your CSP, according to https://scotthelme.co.uk/can-you-get-pwned-with-css/ .