Ability to add a nonce-attribute to dynamically generated script tags to comply with strict Content-Security-Policy

Hey 😃 I’m doing a bit of security-hardening and wanted to switch to to a stricter content security policy (e.g. Google’s Strict CSP3 Example).

This requires me adding nonce-attributes to all my script tags: <script nonce="random-base64-string">. I’ve managed to do this for almost all script tags.

For the js chunks exposed by webpack-flush-chunks I hacked my way there:

const myNonce = "someBase64String"
const { js: rawJs, styles, cssHash: rawCssHash } = flushChunks(
  clientStats,
  { chunkNames }
)
const js = rawJs.toString().replace('<script', `<script nonce="${myNonce}"`)
const cssHash = rawCssHash.toString().replace('<script', `<script nonce="${myNonce}"`)

However, I haven’t managed to find a way to get these nonces into the dynamically loaded chunks.

According to the webpack docs it’s simply a matter of setting __webpack_nonce__ = 'someBase64String'; at the top of my entry file (the render.js from the redux-first-router-demo repo). But no luck. No matter where I set the webpack-nonce, it doesn’t pick it up.

Wasn’t sure whether that’s more of a webpack-flush-chunks or babel-plugin-universal-import (or something else entirely?) responsibility so I open this issue here.

Any advice?