Webpack has a feature of adding nonce to all scripts it loads.
To activate the feature set a __webpack_nonce__ variable needs to be included in your entry script.
Entry file in react app geneated by create react app by defaulty is index.js. So all I need to do is add in entry file:
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
And last thing is to enable webpack CSP.
Please note that CSPs are not enabled by default. A corresponding header Content-Security-Policy or meta tag needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN white-listed URL might look like:
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
However, I got error
'__webpack_nonce__' is not defined
I've tried to declare nonce. Still doesn't work.
webpack_nonce is specified in the entry file and not in the configuration.
So, what I am doing wrong? Maybe docs are missing some key info about that topic? How to enable CSP feature in webpack for React app?