Open mgreystone opened 4 years ago
Sorry for delay, i will look on this in near future
A workaround to this that seems to work for me is to set the value via a DefinePlugin
, e.g.
new webpack.DefinePlugin({
__webpack_nonce__: 'window.__CSP_NONCE',
})
This results in all usages in all files being replaced with the reference to the window field, even when hot reloading. This plugin is before HotModuleReplacementPlugin
for me, unsure if that makes a difference or not.
A workaround to this that seems to work for me is to set the value via a
DefinePlugin
, e.g.new webpack.DefinePlugin({ __webpack_nonce__: 'window.__CSP_NONCE', })
This results in all usages in all files being replaced with the reference to the window field, even when hot reloading. This plugin is before
HotModuleReplacementPlugin
for me, unsure if that makes a difference or not.
I had the same problem - first fixed with this solution.
Is there any updates to this issue bedsides the work around?
This is not just an issue with hot reloading.
I have debugged this and the reason that it doesn't work is that injectStylesIntoStyleTag.js should set the nonce via __webpack_require__.nc
like the javascript loader does. __webpack_nonce__
is not defined at the point that the code is run unless the workaround is used.
Expected Behavior
When hot-reloading is enabled,
style-loader
should add<style>
elements with anonce
attribute. The value of thenonce
attribute should be the value of__webpack_nonce__
.Actual Behavior
<style>
elements do not contain thenonce
attribute. Styles are not applied. There is a content-security-policy error in the console, such as the following example.Code
I made a repository to demonstrate this issue at https://github.com/mgreystone/test-style-loader-nonce/tree/45e3402c342036be2a412e4622802497b7c5dfa8
How Do We Reproduce?
Using hot-reload on webpack-dev-server, load a module that both
__webpack_nonce__ = 'secret'
style-loader
Use this on a server that responds a CSP header of `Content-Security-Policy: style-src 'nonce-secret'.