详情参考：https://www.electronjs.org/zh/docs/latest/tutorial/security
Content Security Policy 简称 CSP 是一种网页安全政策
CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一
台列入了白名单的可信主机。
通俗的讲开启 CSP 后可以让浏览器自动禁止外部注入恶意脚本，增加网站的安全性能。从 2.0 版本开始，如果使用 electron 的开发人员没有定义 Content-Security-Policy，Electron就会在 DevTool console 发出警告提示，如下图：
配置 Content-Security-Policy：
两种方式的规则都是一样的，default-src 代表默认规则，'self'表示限制所有的外部资源，只允许当前域名加载资源。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"> 这样所有的外部资源均无法访问，包括外部图片
一般情况下，默认规则可以包揽大多数的需求，但凡事都有例外，资源繁多的时候通常需要
特殊配置，最值得关心的是 script 的安全，这至关重要，一旦被注入恶意 script，很多安全
控制就会荡然无存，可以使用 script-src 这一指令设置：
<meta http-equiv="Content-Security-Policy" content="script-src 'self'"> 这种除了script不能引用外部之外，其他可以，比如外部图片
例如我们要引入 google-analytics 分析流量，可以这样设置：
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com">
使用如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <script src="renderer/index.js"></script> </head> <body> <h2>这是渲染进程主窗口</h2> <ul> <li>主窗口里面的内容</li> <li>主窗口里面的内容</li> <li>主窗口里面的内容</li> <li>主窗口里面的内容</li> <li>主窗口里面的内容</li> </ul> <img src="https://www.itying.com/themes/itying/images/serverless.png" alt="" srcset=""> <button id="btn">打开一个新窗口</button> </body> </html>
川公网安备 51010702003150号
留下您的脚步
最近评论