WebPack 内容安全策略

发布时间：2023-05-08 12:31:12 所属栏目：教程来源：

导读：webpack 能够为其加载的所有脚本添加 nonce。要启用此功能，需要在引入的入口脚本中设置一个 __webpack_nonce__ 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce，这就是为什么 __webpack_no

webpack 能够为其加载的所有脚本添加 nonce。要启用此功能，需要在引入的入口脚本中设置一个 __webpack_nonce__ 变量。应该为每个唯一的页面视图生成和提供一个唯一的基于 hash 的 nonce，这就是为什么 __webpack_nonce__ 要在入口文件中指定，而不是在配置中指定的原因。请注意，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 属性的更多信息，请查看页面底部的进一步阅读部分。

进一步阅读
Nonce 设计目的解释

白名单的不安全性和内容安全政策的未来

使用 CSP, Hash, Nonces 和报告 URI 锁定你的网站脚本

MDN 的 CSP 文档

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!