在浏览网页的过程中，尤其是移动端的网页，经常看到有很多无关的广告，其实大部分广告都是所在的网络劫持了网站响应的内容，并在其中植入了广告代码。为了防止这种情况发生，我们可以使用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/）
| Directive | Example Value | Description |
|---|---|---|
default-src |
'self' cdn.example.com |
The default-src is the default policy for loading content such as JavaScript, Images, CSS, Font's, AJAX requests, Frames, HTML5 Media. See the Source List Reference for possible values. CSP Level 1 25+ 23+ 7+ 12+ |
script-src |
'self' js.example.com |
Defines valid sources of JavaScript. CSP Level 1 25+ 23+ 7+ 12+ |
style-src |
'self' css.example.com |
Defines valid sources of stylesheets. CSP Level 1 25+ 23+ 7+ 12+ |
img-src |
'self' img.example.com |
Defines valid sources of images. CSP Level 1 25+ 23+ 7+ 12+ |
connect-src |
'self' |
Applies to XMLHttpRequest (AJAX), WebSocket or EventSource. If not allowed the browser emulates a 400 HTTP status code. CSP Level 1 25+ 23+ 7+ 12+ |
font-src |
font.example.com |
Defines valid sources of fonts. CSP Level 1 25+ 23+ 7+ 12+ |
object-src |
'self' |
Defines valid sources of plugins, eg <object>, <embed> or <applet>. CSP Level 1 25+ 23+ 7+ 12+ |
media-src |
media.example.com |
Defines valid sources of audio and video, eg HTML5 <audio>, <video> elements. CSP Level 1 25+ 23+ 7+ 12+ |
frame-src |
'self' |
Defines valid sources for loading frames. child-src is preferred over this deprecated directive. Deprecated |
sandbox |
allow-forms allow-scripts |
Enables a sandbox for the requested resource similar to the iframe sandbox attribute. The sandbox applies a same origin policy, prevents popups, plugins and script execution is blocked. You can keep the sandbox value empty to keep all restrictions in place, or add values: allow-formsallow-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 CSP Level 1 25+ 50+ 7+ 12+ |
report-uri |
/some-report-uri |
Instructs the browser to POST a reports of policy failures to this URI. You can also append -Report-Only to the HTTP header name to instruct the browser to only send reports (does not block anything). CSP Level 1 25+ 23+ 7+ 12+ |
child-src |
'self' |
Defines valid sources for web wokers and nested browsing contexts loaded using elements such as <frame> and <iframe> CSP Level 2 40+ 45+ |
form-action |
'self' |
Defines valid sources that can be used as a HTML <form> action. CSP Level 2 40+ 36+ |
frame-ancestors |
'none' |
Defines valid sources for embedding the resource using <frame> <iframe> <object> <embed><applet>. Setting this directive to 'none' should be roughly equivalent to X-Frame-Options: DENY CSP Level 2 39+ 33+ |
plugin-types |
application/pdf |
Defines valid MIME types for plugins invoked via <object> and <embed>. To load an <applet>you must specify application/x-java-applet. CSP Level 2 40+ |
参考文档：
https://content-security-policy.com/
http://baike.baidu.com/link?url=d0CILP0CXyvCuc_pRv7-3gRNXjEPKwiDWEReXi4uzEr8IPkktX3VLfnUnRyc70cLn9zSyviOfmpS8aAWUd3xrK