Environment
- os: Linux
- node 14.4.0
- webpack 4.44.2
- style-loader 1.2.1
Expected Behavior
// create-nonce.js
const csp_nonce = document.querySelector('meta[property=\'csp-nonce\']').getAttribute('content');
__webpack_nonce__ = csp_nonce;// entry.js
// this DOES get executed first
import './create-nonce.js';
// before this
import './style.css';
Actual Behavior
- but then if we inline the
__webpack_nonce__ assignment in the entry, it acts weird
// entry.js
// this DOES NOT get executed first
const csp_nonce = document.querySelector('meta[property=\'csp-nonce\']').getAttribute('content');
__webpack_nonce__ = csp_nonce;
// before this
import './style.css';
// which causes an error since __webpack_nonce__ is NOT SETHow Do We Reproduce?
- can't produce a repro in a repo (lol that rhymes) because our implementation use internal stuff
- but the following are gists of our code
// webpack.config.js
{
test: /\.(css)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader' },
],
},// server response header CSP, with generated nonce from crypto.randomBytes(32).toString('base64')
// "http:" since we're testing locally
Content-Security-Policy: upgrade-insecure-requests; default-src http: 'self'; script-src http: 'nonce-lgp8w0DSKQSsv/s3//43EkM1GYyhkF0wHlzxWBUrW1s='; style-src http: 'nonce-lgp8w0DSKQSsv/s3//43EkM1GYyhkF0wHlzxWBUrW1s=';// html sent by server
<head>
// loaded by create-nonce.js
<meta property="csp-nonce" content="${nonce}">
<style nonce="${nonce}">
// inline style
</style>
</head>
<body>
// webpack chunks
<script defer src="/scripts/${webpack_chunk}" nonce="${nonce}"></script>
<script nonce="${nonce}">
// inline scripts
</script>
</body>