webpack 能够为其加载的所有脚本添加 nonce
,即一次性随机数。在入口文件中设置一个 __webpack_nonce__
变量以激活此功能。然后为每个唯一的页面视图生成和提供一个唯一的基于哈希的 nonce
。这就是为什么应该在入口文件中指定 __webpack_nonce__
而非在配置中指定的原因。请注意,__webpack_nonce__
应该是一个 base64 编码的字符串。
在入口文件中:
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
注意,默认情况下不启用 CSP。需要与文档一同发送相应的 CSP
响应头 Content-Security-Policy
或元标签 <meta http-equiv="Content-Security-Policy" ...>
以告知浏览器需要启用 CSP。以下是一个包含 CDN 白名单 URL 的 CSP 头部示例:
Content-Security-Policy: default-src 'self'; script-src 'self'
https://trusted.cdn.com;
参阅页面底部的 延伸阅读 以了解更多关于 CSP 与 nonce
属性的信息。
只需遵守 CSP require-trusted-types-for
指令的限制,webpack 便能够使用信任类型加载动态构建的脚本。参阅 output.trustedTypes
配置项了解更多。