一、什么是CSP
CSP英文全称Content Security Policy，中文意思是 内容安全策略。CSP以白名单的机制对网站加载或执行的资源起作用，在网页中，这样的策略通过 HTTP 头信息或者 meta 元素定义。用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件。
三、CSP的应用
2种方式
1. 前端配置 - Meta标签
在 HTML 的 Head 中添加 Meta 标签
复制代码
（提示：这里推荐本地启动web服务，去访问这个页面），这里是最基本的配置，完整代码如下：
CSP测试 CSP测试复制代码
这种方式除了 头部的注入型劫持未被拦截以外 ，其他 script 劫持均被拦截。需要特别注意的是这段代码中的 nonce-shendun ，这里可以理解为 script 的安全属性，nonce- 是CSP提供的参数，shendun 这个名字是自定义的（官方推荐这里填随机数）。
2. 后端配置
以 Nginx 为例，配置 Sever 文件，添加如下代码:
server { ... add_header Content-Security-Policy "default-src *; script-src 'self' 'nonce-shendun' baidu.com *.baidu.com;"; ...复制代码 源列表中也接受了四个关键字：
- 'none' 你可能会期望，什么也没有。
- 'self' 匹配当前来源，但不匹配其子域。
- 'unsafe-inline' 允许内联JavaScript和CSS （很多劫持是script直接注入，所以这里不推荐这么配置）
- 'unsafe-eval' 允许文本到JavaScript的机制eval。
CSP的API和用法指南太多了，奉上传送门：
四、数据分析
不管是前端配置还是后端配置 CSP 都非常方便，但是也存在 Head 头部协议被篡改，导致 CSP 失效的现象，这个时候 “薅羊毛” 的就有可乘之机。
以下是一个线上活动（加了CSP）的真实数据：
| 日期 | PV | UV | 劫持PV | 劫持UV | 劫持率(劫持uv/uv) |
|---|---|---|---|---|---|
| 10/16 | 485034 | 106487 | 91376 | 41069 | 38.56% |
| 10/15 | 542713 | 123202 | 104994 | 48308 | 39.2% |
这些真实数据作者未做任何处理，不过这里劫持UV数据拉的不是很科学，没有过滤掉一个页面出现多次劫持的成分，但总体劫持率还是很高。
开始怀疑人生...
五、总结
CSP不是万能的，有兴趣的同学可以看下防运营商劫持一：
- 干货！防运营商劫持
可两者结合使用，希望对你有所帮助~