前端安全配置之Content-Security-Policy(csp)

Love The Way You Lie 2022-02-24 13:48 184阅读 0赞

From: [https://www.cnblogs.com/heyuqing/p/6215761.html][https_www.cnblogs.com_heyuqing_p_6215761.html]

什么是CSP

CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。

有什么用?

我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?

答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现

需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了.

指令说明

指令就是csp中用来定义策略的基本单位,我们可以使用单个或者多个指令来组合作用,功能防护我们的网站.

以下是常用的指令说明:

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;"> 指令名 </td> 
 <td style="vertical-align:bottom;"> demo </td> 
 <td style="vertical-align:bottom;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> default-src </td> 
 <td style="vertical-align:top;"> 'self' cdn.example.com </td> 
 <td style="vertical-align:bottom;"> 默认策略,可以应用于js文件/图片/css/ajax请求等所有访问 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> script-src </td> 
 <td style="vertical-align:top;"> 'self' js.example.com </td> 
 <td style="vertical-align:bottom;"> 定义js文件的过滤策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> style-src </td> 
 <td style="vertical-align:top;"> 'self' css.example.com </td> 
 <td style="vertical-align:bottom;"> 定义css文件的过滤策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> img-src </td> 
 <td style="vertical-align:top;"> 'self' img.example.com </td> 
 <td style="vertical-align:bottom;"> 定义图片文件的过滤策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> connect-src </td> 
 <td style="vertical-align:top;"> 'self' </td> 
 <td style="vertical-align:bottom;"> 定义请求连接文件的过滤策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> font-src </td> 
 <td style="vertical-align:top;"> font.example.com </td> 
 <td style="vertical-align:bottom;"> 定义字体文件的过滤策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> object-src </td> 
 <td style="vertical-align:top;"> 'self' </td> 
 <td style="vertical-align:bottom;"> 定义页面插件的过滤策略,如 &lt;object&gt;, &lt;embed&gt; 或者&lt;applet&gt;等元素 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> media-src </td> 
 <td style="vertical-align:top;"> media.example.com </td> 
 <td style="vertical-align:bottom;"> 定义媒体的过滤策略,如 HTML6的 &lt;audio&gt;, &lt;video&gt;等元素 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> frame-src </td> 
 <td style="vertical-align:top;"> 'self' </td> 
 <td style="vertical-align:bottom;"> 定义加载子frmae的策略 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> sandbox </td> 
 <td style="vertical-align:top;"> allow-forms allow-scripts </td> 
 <td style="vertical-align:bottom;"> 沙盒模式,会阻止页面弹窗/js执行等,你可以通过添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略来放开相应的操作 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> report-uri </td> 
 <td style="vertical-align:top;"> /some-report-uri </td> 
 <td style="vertical-align:bottom;"> 　 </td> 
 </tr> 
 </tbody> 
</table>

指令值

所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:bottom;"> 值 </td> 
 <td style="vertical-align:bottom;"> demo </td> 
 <td style="vertical-align:bottom;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> * </td> 
 <td style="vertical-align:top;"> img-src * </td> 
 <td style="vertical-align:top;"> 允许任意地址的url,但是不包括 blob: filesystem: schemes. </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 'none' </td> 
 <td style="vertical-align:top;"> object-src 'none' </td> 
 <td style="vertical-align:top;"> 所有地址的咨询都不允许加载 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 'self' </td> 
 <td style="vertical-align:top;"> script-src 'self' </td> 
 <td style="vertical-align:top;"> 同源策略,即允许同域名同端口下,同协议下的请求 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> data: </td> 
 <td style="vertical-align:top;"> img-src 'self' data: </td> 
 <td style="vertical-align:top;"> 允许通过data来请求咨询 (比如用Base64 编码过的图片). </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> domain.example.com </td> 
 <td style="vertical-align:top;"> img-src&nbsp;domain.example.com </td> 
 <td style="vertical-align:top;"> 允许特性的域名请求资源 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> *.example.com </td> 
 <td style="vertical-align:top;"> img-src *.example.com </td> 
 <td style="vertical-align:top;"> 允许从 example.com下的任意子域名加载资源 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> https://cdn.com </td> 
 <td style="vertical-align:top;"> img-src https://cdn.com </td> 
 <td style="vertical-align:top;"> 仅仅允许通过https协议来从指定域名下加载资源 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> https: </td> 
 <td style="vertical-align:top;"> img-src https: </td> 
 <td style="vertical-align:top;"> 只允许通过https协议加载资源 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 'unsafe-inline' </td> 
 <td style="vertical-align:top;"> script-src 'unsafe-inline' </td> 
 <td style="vertical-align:top;"> 允许行内代码执行 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> 'unsafe-eval' </td> 
 <td style="vertical-align:top;"> script-src 'unsafe-eval' </td> 
 <td style="vertical-align:top;"> 允许不安全的动态代码执行,比如 JavaScript的&nbsp;eval()方法 </td> 
 </tr> 
 </tbody> 
</table>

示例

default-src 'self';

只允许同源下的资源

script-src 'self';

只允许同源下的js

script-src 'self' www.google-analytics.com ajax.googleapis.com;

允许同源以及两个地址下的js加载

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

多个资源时,后面的会覆盖前面的

服务器端配置

*  Apache服务

在VirtualHost的httpd.conf文件或者.htaccess文件中加入以下代码

Header set Content-Security-Policy "default-src 'self';"

*  Nginx

在 server \{\}对象块中添加如下代码

add\_header Content-Security-Policy "default-src 'self';";

*  IIS

web.config:中添加

<system.webServer>

</customHeaders>

</httpProtocol>

</system.webServer>

参考链接:

[https://www.zhihu.com/question/21979782][https_www.zhihu.com_question_21979782]

https://content-security-policy.com/

[https_www.cnblogs.com_heyuqing_p_6215761.html]: https://www.cnblogs.com/heyuqing/p/6215761.html
[https_www.zhihu.com_question_21979782]: https://www.zhihu.com/question/21979782