Webpack 能够为其加载的所有脚本添加 nonce
。要激活此功能,请设置 __webpack_nonce__
变量并将其包含在你的入口脚本中。然后,将为每个唯一的页面视图生成并提供一个基于哈希的唯一 nonce
(这就是为什么 __webpack_nonce__
在入口文件中指定而不是在配置中)。请注意,__webpack_nonce__
应始终是一个 base64 编码的字符串。
在入口文件中
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
请注意,CSP 默认未启用。需要随文档发送相应的头部 Content-Security-Policy
或 meta 标签 <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
属性的更多信息,请参阅本页底部的延伸阅读部分。
Webpack 还能够使用可信类型(Trusted Types)来加载动态构建的脚本,以遵循 CSP require-trusted-types-for
指令限制。请参阅 output.trustedTypes
配置选项。