技术思绪摘录旅行
Content Security Policy 简称 CSP 是一种网页安全政策 CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。 CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一 台列入了白名单的可信主机。 通俗的讲开启 CSP 后可以让浏览器自动禁止外部注入恶意脚本,增加网站的安全性能。从 2.0 版本开始,如果使用 electron 的开发人员没有定义 Content-Security-Policy,Electron就会在 DevTool console 发出警告提示

详情参考: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 发出警告提示,如下图:

image.png

配置 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>


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫