codecamp

Webpack 内容安全策略

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​ 配置项。

Further Reading


Webpack 构建性能
Webpack 开发 - Vagrant
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }