内容安全策略(CSP)
webpackjsorg-main指南-教程
内容安全策略(CSP)
Webpack 能够为它加载的所有脚本添加 nonce。要激活此功能,请在入口脚本中设置 __webpack_nonce__ 变量。随后,Webpack 会为每个唯一的页面视图生成并提供一个基于哈希的唯一 nonce(这就是为什么 __webpack_nonce__ 是在入口文件中而非配置中指定的原因)。请注意,__webpack_nonce__ 应始终是 base64 编码的字符串。
示例
在入口文件中:
js
// ...
__webpack_nonce__ = "c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=";
// ...
启用 CSP
请注意,CSP 默认不启用。需要随文档发送相应的 Content-Security-Policy 标头或 <meta http-equiv="Content-Security-Policy" ...> 元标签,以指示浏览器启用 CSP。以下是一个包含 CDN 白名单 URL 的 CSP 标头示例:
html
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 配置选项。
延伸阅读
帮助我们改进文档
发现翻译问题或内容错误?请告诉我们。
