epic-stack
epic-stack copied to clipboard
epicweb-dev
React18 Suspense violate CSP script-src
I use React18 Suspense for my application. When I refreshed the whole page I got an error message below.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'self' 'nonce-3d8ea51c7c94e7d047c71b5f52a6be5d'". Either the 'unsafe-inline' keyword, a hash ('sha256-t+32sreM3IZd/ngtsiPnbI+mF2Uv+Bcnx/8eVsE5w7s='), or a nonce ('nonce-...') is required to enable inline execution.
This is the problem: https://github.com/remix-run/remix/issues/5156
I'm going to see if I can help the Remix team get this prioritized.
There's a PR open for fixing this (https://github.com/remix-run/remix/pull/6389), until that's merged I'm adding a patch-package to the template so people can start doing this today.
I have applied for the patch. But I got this error and the whole page cannot load normally.
Uncaught ReferenceError: nonce is not defined at Scripts (components.js:702:9) at renderWithHooks (react-dom.development.js:16305:18) at mountIndeterminateComponent (react-dom.development.js:20074:13) at beginWork (react-dom.development.js:21587:16) at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27451:7) at performUnitOfWork (react-dom.development.js:26557:12) at workLoopConcurrent (react-dom.development.js:26543:5)
Where should I put the nonce in?