__webpack_nonce__ support or alternative way of solving CSP?

[madjam002]

I'm looking at using Webpack on a site which requires strict Content Security Policy headers.

I'm setting window.__webpack_nonce__ but it doesn't seem to be adding a nonce attribute to style elements created by style-loader. Looking at webpack#3210 it only seems to be adding a nonce attribute to generated script elements? Is there some additional work required in style-loader to support nonce attributes?

I don't mind doing a PR, just wanted to make sure first though that I'm not missing something!

[alexander-akait]

@madjam002 Thanks for issue, need discussion, maybe better implement csp-loader, where solve this

[madjam002]

Just to add as well, I've noticed some discussion in #155 regarding CSP, but the way that custom attributes has been implemented there isn't suitable for nonce values as nonce values need to be secure cryptographically generated random strings for each page load and not hard coded into the build

[jwbay]

The way aphrodite solves this is to look for an existing style tag before generating one. In their case something like <style data-aphrodite>. This effectively solves CSP because you can provide a style tag with a nonce already attached.

[iamdavidfrancis]

Has there been any progress on this? I'm also working on a site with a strict CSP.
It doesn't seem like it would be a huge PR to support __webpack_nonce__

[alexander-akait]

PR welcome 👍

[plondon]

I think this can be closed now since #319 has been merged and included in 0.22.0

[plondon]

Also fyi @madjam002 you'll want to just set __webpack_nonce__ and not window.__webpack_nonce__. Also do not try to do this with hot module reloading.

[alexander-akait]

@plondon can you send PR to README about this?

[alshdavid]

What's the status with this?

Can I use style_loader with a nonce?
Is there anything special I need to do?
Will it read my window.__webpack_nonce__?
Will it work with dynamic imports?

[plondon]

What's the status with this?

Resolved but confusing docs?

Can I use style_loader with a nonce?

Yes

Is there anything special I need to do?

Make sure the files where you set the nonce is one of the very first imports in the project:
See: create-nonce.js (https://github.com/blockchain/blockchain-wallet-v4-frontend/blob/development/packages/blockchain-wallet-v4-frontend/src/create-nonce.js#L4) is then imported from the first main entry point index.js (https://github.com/blockchain/blockchain-wallet-v4-frontend/blob/0477f60e62b3635ef00db3338319c939506c8756/packages/blockchain-wallet-v4-frontend/src/index.js)

Will it read my window.webpack_nonce?

No, webpack_nonce only

Will it work with dynamic imports?

Yes

[alexander-akait]

@plondon maybe you can send a PR to docs ? 😄 anyway thanks for answer

[caub]

@plondon

you'll want to just set webpack_nonce and not window.webpack_nonce

What's the difference please? when executed from a script, it should be the same

__webpack_nonce__ = '..';
window.__webpack_nonce__ = '..';
globalThis.__webpack_nonce__ = '..';

[theKashey]

As many other "magic variables" webpack will transform __webpack_nonce__ to __webpack_require__.nc. Please refer to https://github.com/webpack/webpack/blob/1ed8aaf2e291fc0b14597ef452e6224ad10ccbc9/lib/RuntimeGlobals.js#L161

So the result of complication will be

__webpack_require__.nc = '..';
window.__webpack_nonce__ = '..';
globalThis.__webpack_nonce__ = '..';

But only if complied with webpack. Without it these lines are equal.