Hot Reloading ignores __webpack_nonce__

[mgreystone]

• Operating System: Alpine (Docker)
• Node Version: 10.16.3
• NPM Version: 6.9.0
• webpack Version: 4.37.0
• style-loader Version: 1.0.0

Expected Behavior

When hot-reloading is enabled, style-loader should add <style> elements with a nonce attribute. The value of the nonce attribute should be the value of __webpack_nonce__.

Actual Behavior

<style> elements do not contain the nonce attribute. Styles are not applied. There is a content-security-policy error in the console, such as the following example.

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

Code

I made a repository to demonstrate this issue at https://github.com/mgreystone/test-style-loader-nonce/tree/45e3402c342036be2a412e4622802497b7c5dfa8

• webpack.config
• index.js

How Do We Reproduce?

Using hot-reload on webpack-dev-server, load a module that both

1. Sets the value of __webpack_nonce__ = 'secret'
2. Imports a css module via style-loader Use this on a server that responds a CSP header of `Content-Security-Policy: style-src 'nonce-secret'.

[alexander-akait]

Sorry for delay, i will look on this in near future

[tec27]

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.

[tooltonix]

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.

[TannerS]

Is there any updates to this issue bedsides the work around?

[kglickman]

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.