Created by: Rendez
This is about Content Security Policy headers and the react-error-overlay inserted inline script.
When serving CSP headers with a 'nonce' source within the 'script-src' directive, any inline script in the DOM will effectively be blocked by the client, preventing the script execution. This stops the iframe from showing the actual overlay.
Several other libraries, some related to Webpack, have overcome this issue by setting the 'nonce' attribute before creating the script/style tag and inserting it into the DOM.
The solution I'm proposing here allows the user to either set __webpack_nonce__
in a Webpack entrypoint that imports react-error-overlay or, if the bundler used isn't Webpack, simply set window.__webpack_nonce__
inside the DOM manually in a dev environment where it will be picked up on runtime.
Relevant info: __webpack_nonce__
doesn't yet work with Webpack's DLL plugin.