内容安全策略(CSP)

webpack 能够为其加载的所有脚本添加 nonce,即一次性随机数。在入口文件中设置一个 __webpack_nonce__ 变量以激活此功能。然后为每个唯一的页面视图生成和提供一个唯一的基于哈希的 nonce。这就是为什么应该在入口文件中指定 __webpack_nonce__ 而非在配置中指定的原因。请注意,__webpack_nonce__ 应该是一个 base64 编码的字符串。

示例

在入口文件中:

// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...

启用 CSP

注意,默认情况下不启用 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 配置项了解更多。

4 位贡献者

EugeneHlushkoprobablyupwizardofhogwartskoto