跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们，要采取很多编程措施，非常麻烦。很多人提出，能不能根本上解决问题，浏览器自动禁止外部注入恶意脚本？这就是"网页安全政策"（Content Security Policy，缩写 CSP）的来历。内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。

1、简述

　　在浏览网页的过程中，尤其是移动端的网页，经常看到有很多无关的广告，其实大部分广告都是所在的网络劫持了网站响应的内容，并在其中植入了广告代码。为了防止这种情况发生，我们可以使用CSP来快速的阻止这种广告植入。而且可以比较好的防御dom xss。

　　CSP 可以由两种方式指定：HTTP Header 和 HTML。HTTP 是在 HTTP 由增加 Header 来指定，而 HTML 级别则由 Meta 标签指定。

　　CSP 有两类：Content-Security-Policy 和 Content-Security-Policy-Report-Only。（大小写无关）

　　（1）Content-Security-Policy：配置好并启用后，不符合 CSP 的外部资源就会被阻止加载。

　　（2）Content-Security-Policy-Report-Only：表示不执行限制选项，只是记录违反限制的行为。它必须与report-uri选项配合使用。

HTTP header :

"Content-Security-Policy:" 策略

"Content-Security-Policy-Report-Only:" 策略

　　HTTP Content-Security-Policy 头可以指定一个或多个资源是安全的，而Content-Security-Policy-Report-Only则是允许服务器检查（非强制）一个策略。多个头的策略定义由优先采用最先定义的。

HTML Meta :

<meta http-equiv="content-security-policy" content="策略">

<meta http-equiv="content-security-policy-report-only" content="策略">

　　CSP使用方式有两种

　　1、使用meta标签， 直接在页面添加meta标签

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.xx.com *.xx.cn 'unsafe-inline' 'unsafe-eval';">

　　这种方式最简单，但是也有些缺陷，每个页面都需要添加，而且不能对限制的域名进行上报。

　　2、在服务端配置csp

　　（1）Apache :

　　Add the following to your httpd.conf in your VirtualHost or in an .htaccess file:

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

　　（2）Nginx :

　　In your server {} block add:

　　add_header Content-Security-Policy "default-src 'self';";

　　在服务端配置所有的页面都可以不需要改了，而且还支持上报。

　　如果meta、响应头里都指定了Content-Security-Policy，则会优先使用响应头里的Content-Security-Policy

　　CSP内容匹配的规则：规则名称 规则 规则；规则名称 规则 ...

　　比如：

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

　　default-src 'self' *.xx.com *.xx.cn aa.com 'unsafe-inline' 'unsafe-eval'

　　（*.xx.com 支持多级域名， 可以不填写http协议）

　　规则解释：

　　default-src   所有资源的默认策略

　　script-src     JS的加载策略，会覆盖default-src中的策略，比如写了default-src xx.com;script-src x.com xx.com;   必须同时加上xx.com,因为script-src会当作一个整体覆盖整个默认的default-src规则。

　　'unsafe-inline'  允许执行内联的JS代码，默认为不允许，如果有内联的代码必须加上这条

　　'unsafe-eval'    允许执行eval等

　　对自定义的协议 比如 jsxxx://aaa.com   可以写成  jsxxx:

　　https协议下自动把http请求转为https可以使用  upgrade-insecure-requests

　　详情配置及浏览器兼容性可查看官方文档：https://content-security-policy.com

　　策略应该怎么写？示例

// 限制所有的外部资源，都只能从当前域名加载

Content-Security-Policy: default-src 'self'

// default-src 是 CSP 指令，多个指令之间用英文分号分割；多个指令值用英文空格分割

Content-Security-Policy: default-src https://host1.com https://host2.com; frame-src 'none'; object-src 'none'  

// 错误写法，第二个指令将会被忽略

Content-Security-Policy: script-src https://host1.com; script-src https://host2.com

// 正确写法如下

Content-Security-Policy: script-src https://host1.com https://host2.com

　　有时，我们不仅希望防止 XSS，还希望记录此类行为。report-uri就用来告诉浏览器，应该把注入行为报告给哪个网址。

// 通过report-uri指令指示浏览器发送JSON格式的拦截报告到某个url地址

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser; 

// 报告看起来会像下面这样

{

  "csp-report": {

    "document-uri": "http://example.org/page.html",

    "referrer": "http://evil.example.com/",

    "blocked-uri": "http://evil.example.com/evil.js",

    "violated-directive": "script-src 'self' https://apis.google.com",

    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"

  }

}