Content Security Policies
Webpack is capable of adding anonce to all scripts that it loads. To activate this feature, set a__webpack_nonce__ variable and include it in your entry script. A unique hash-basednonce will then be generated and provided for each unique page view (this is why__webpack_nonce__ is specified in the entry file and not in the configuration). Please note that the__webpack_nonce__ should always be a base64-encoded string.
Examples
In the entry file:
// ...__webpack_nonce__='c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';// ...Enabling CSP
Please note that CSPs are not enabled by default. A corresponding headerContent-Security-Policy or meta tag<meta http-equiv="Content-Security-Policy" ...> 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;For more information on CSP andnonce attribute, please refer toFurther Reading section at the bottom of this page.
Trusted Types
Webpack is also capable of using Trusted Types to load dynamically constructed scripts, to adhere to CSPrequire-trusted-types-for directive restrictions. Seeoutput.trustedTypes configuration option.
Further Reading
4 Contributors
