CSP内容安全策略

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

CSP使用方式有两种

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

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

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

2. 在服务端配置csp

Apache :

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

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

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

CSP浏览器支持

目前CSP LEVER1 已经被大部分浏览器所支持

csp lever1 涉及到的规则有：

default-src、script-src、style-src、img-src、connect-src、font-src、object-src、media-src、

sandbox、report-uri

CSP LEVER2 加了一些新的规则：

child-src、form-action、frame-ancestors、plugin-types 。对于现在的移动端开发来说，lever2已经完全可以使用了。

详细规则内容：（参考：https://content-security-policy.com/）

default-src

'self' cdn.example.com

default-src

script-src

'self' js.example.com

style-src

'self' css.example.com

img-src

'self' img.example.com

connect-src

'self'

XMLHttpRequest

WebSocket

EventSource

400

font-src

font.example.com

object-src

'self'

<object>

<embed>

<applet>

media-src

media.example.com

<audio>

<video>

frame-src

'self'

child-src

sandbox

allow-forms allow-scripts

iframe

sandbox

allow-forms

allow-same-origin

allow-scripts

allow-popups

allow-modals

allow-orientation-lock

allow-pointer-lock

allow-presentation

allow-popups-to-escape-sandbox

allow-top-navigation

report-uri

/some-report-uri

-Report-Only

child-src

'self'

<frame>

<iframe>

form-action

'self'

<form>

frame-ancestors

'none'

<frame>

<iframe>

<object>

<embed>

<applet>

'none'

X-Frame-Options: DENY

plugin-types

application/pdf

<object>

<embed>

<applet>

application/x-java-applet

参考文档：

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

http://baike.baidu.com/link?url=d0CILP0CXyvCuc_pRv7-3gRNXjEPKwiDWEReXi4uzEr8IPkktX3VLfnUnRyc70cLn9zSyviOfmpS8aAWUd3xrK