home > webfront > SGML > web >

前端安全配置xss预防针Content-Security-Policy(csp)配置详解

Author：zhoulujun Date：2017-05-03 Hits：

CSP是2008年由 Mozilla 的 Sterne 提出的浏览器安全框架被设计为一个完整的框架来防御 XSS和CSRF攻击，我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取

什么是Content Secruity Policy(CSP)

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

CSP是2008年由 Mozilla 的 Sterne 提出的浏览器安全框架

被设计为一个完整的框架来防御 XSS 和 CSRF 攻击

通常也可以用来控制 app 和扩展的权限

CSP 允许开发者覆写(SOP)每个 document 的权限

CSP有什么用?

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

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

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

csp应用配置

Server 在 header 中定义规则

Server 在HTML 中定义规则

通过网页的标签

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

CSP 让开发者提高了对 XSS 攻击的防御能力, 但也存在一些问题.

难部署(如要改动左右inline scripts)

对 Origin 的定义不够细致

Binary 安全

DEMO

数据库里存了一个用户输入的信息, 简单的弹窗JS.(外链JS也是同理)

alert('I was stored by an attacker.');

无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'	定义页面插件的过滤策略,如
media-src	media.example.com	定义媒体的过滤策略,如 HTML6的
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	错误报告地址
navigate-to	navigate-to <source> <source>	限制调整链接的地址方位

更多，看：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

头部值

block-all-mixed-content：禁止混合内容

具体参看《混合内容页面：全域https下里面的http请求浏览器的安全处理》

指令值

所有以-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';";

web.config:中添加

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="default-src 'self';" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

报告发送

report-uri

The HTTP Content-Security-Policy-Report-Only response header allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI.

Content-Security-Policy-Report-Only: <policy-directive>; <policy-directive>

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/