0


webpack的安全保障是怎么做的?

文章目录

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:webpack
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

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;

Trusted Types

webpack 还能够使用 Trusted Types 来加载动态构建的脚本,遵守 CSP ​require-trusted-types-for​ 指令的限制。可查看 ​output.trustedTypes​ 配置项。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

标签: webpack 安全 前端

本文转载自: https://blog.csdn.net/weixin_68537796/article/details/134425148
版权归原作者 鋜斗 所有, 如有侵权,请联系我们删除。

“webpack的安全保障是怎么做的?”的评论:

还没有评论