阅读(4566)
赞(0)
Webpack 内容安全策略
2023-05-17 17:38:11 更新
Webpack 能够为其加载的所有脚本添加 nonce。要启用此功能，需要在引入的入口脚本中设置一个 __webpack_nonce__ 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce，这就是为什么 __webpack_nonce__ 要在入口文件中指定，而不是在配置中指定的原因。注意，__webpack_nonce__ 应该是一个 base64 编码的字符串。
示例
在 entry 文件中：
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...启用 CSP
注意，默认情况下不启用 CSP。需要与文档(document)一起发送相应的 CSP header 或 meta 标签 <meta http-equiv="Content-Security-Policy" ...>，以告知浏览器启用 CSP。以下是一个包含 CDN 白名单 URL 的 CSP header 的示例：
Content-Security-Policy: default-src 'self'; script-src 'self'
https://trusted.cdn.com;有关 CSP 和 nonce 属性的更多信息，请查看页面底部的 延伸阅读 部分。
Trusted Types
webpack 还能够使用 Trusted Types 来加载动态构建的脚本，遵守 CSP require-trusted-types-for 指令的限制。可查看 output.trustedTypes 配置项。