前端内容安全策略（csp）

什么是CSP

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

有什么用?

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

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

须要说明的一点是,目前主流的浏览器都已支持csp.因此咱们能够放心大胆的用了.

指令说明

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

如下是经常使用的指令说明:

指令名	demo	说明
default-src	'self' cdn.example.com	默认策略,能够应用于js文件/图片/css/ajax请求等全部访问
script-src	'self' js.example.com	定义js文件的过滤策略
style-src	'self' css.example.com	定义css文件的过滤策略
img-src	'self' img.example.com	定义图片文件的过滤策略
connect-src	'self'	定义请求链接文件的过滤策略
font-src	font.example.com	定义字体文件的过滤策略
object-src	'self'	定义页面插件的过滤策略,如 <object>, <embed> 或者<applet>等元素
media-src	media.example.com	定义媒体的过滤策略,如 HTML6的 <audio>, <video>等元素
frame-src	'self'	定义加载子frmae的策略
sandbox	allow-forms allow-scripts	沙盒模式,会阻止页面弹窗/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 策略来放开相应的操做
report-uri	/some-report-uri

 

指令值

全部以-src结尾的指令均可以用一下的值来定义过滤规则,多个规则之间能够用空格来隔开

值	demo	说明
*	img-src *	容许任意地址的url,可是不包括 blob: filesystem: schemes.
'none'	object-src 'none'	全部地址的咨询都不容许加载
'self'	script-src 'self'	同源策略,即容许同域名同端口下,同协议下的请求
data:	img-src 'self' data:	容许经过data来请求咨询 (好比用Base64 编码过的图片).
domain.example.com	img-src domain.example.com	容许特性的域名请求资源
*.example.com	img-src *.example.com	容许从 example.com下的任意子域名加载资源
https://cdn.com	img-src https://cdn.com	仅仅容许经过https协议来从指定域名下加载资源
https:	img-src https:	只容许经过https协议加载资源
'unsafe-inline'	script-src 'unsafe-inline'	容许行内代码执行
'unsafe-eval'	script-src 'unsafe-eval'	容许不安全的动态代码执行,好比 JavaScript的 eval()方法

 

示例

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>

  <httpProtocol>

    <customHeaders>

      <add name="Content-Security-Policy" value="default-src 'self';" />

    </customHeaders>

  </httpProtocol>

</system.webServer>