webpack can add a nonce to every script it loads. To enable this, assign a value to the __webpack_nonce__ variable inside your entry script. webpack then generates and applies a unique hash-based nonce for each page view. This is why __webpack_nonce__ belongs in the entry file rather than in your configuration. Note that __webpack_nonce__ must always be a base64-encoded string.
In the entry file:
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...Content Security Policies are not enabled by default. To turn one on, the document must be served with a Content-Security-Policy header or a <meta http-equiv="Content-Security-Policy" ...> tag that instructs the browser to enforce the policy. Here is an example of a CSP header that also allow-lists a CDN URL:
Content-Security-Policy: default-src 'self'; script-src 'self'
https://trusted.cdn.com;For more details on CSP and the nonce attribute, see the Further reading section at the bottom of this page.
webpack can also use Trusted Types to load dynamically constructed scripts, allowing it to comply with the require-trusted-types-for CSP directive. See the output.trustedTypes configuration option.