缘由
我们公司最近手机端H5 经常受到商户和用户的投诉，说有广告并且导致不能正常进行操作，我们商户自己当然不会加广告了，但是商户和用户可不管这些了，就认为是我们的问题
探索发现根本
目前我们用的很多浏览器，都提供插件功能，在Chrome浏览器体系下有个 广告终结者插件：可以用来屏蔽网页中的广告部分。受到这个插件的影响，我先探索下 广告劫持是怎么做的？我就想到通过获取网页html代码过来分析，如下JS代码
setTimeout(function(){
$.ajax({
url:"/error/ad_log",
type:'post',
data:{
'content': $("html").html(),
'url':window.location.href
},
success:function(){
}
});
},3000);在后端我分析html内容发现如下截图几个内容，通过截图发现页面多了一些JS文件
<script type="text/javascript" id="1qa2ws" charset="utf-8" src="http://wap.zjtoolbarc60.10086.cn:8080/www/default/base.js"></script>
内容劫持原理
通过上图我们就分析出了，一般劫持是通过在页面加入引入一个JS文件，然后这个JS文件会执行各种逻辑，根据新引入的JS域名搜索，你就会发现很多东西了，
解决方案
知道了病状不代表就一定可以解决，例如我们公司的就很奇葩，因为广告的插入导致JS全部出错用户无法进行操作（太可*，插入广告就算了，还导致别人无法正常运营）。通过搜索我发现了可以通过CSP解决这个问题
CSP
定义
CSP 全称为 Content Security Policy，即内容安全策略。主要以白名单的形式配置可信任的内容来源，在网页中，能够使白名单中的内容正常执行（包含 JS，CSS，Image 等等），而非白名单的内容无法正常执行，从而减少跨站脚本攻击（XSS），当然，也能够减少运营商劫持的内容注入攻击。
使用方式一：Meta标签
在 HTML 的 Head 中添加如下 Meta 标签，将在符合 CSP 标准的浏览器中使非同源的 script 不被加载执行。不支持 CSP 的浏览器将自动会忽略 CSP 的信息，不会有什么影响。具体兼容性可在本文末尾参考资料中找到
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
使用方式二：Http 头部
Content-Security-Policy: script-src 'unsafe-inline' 'unsafe-eval' 'self' *.54php.cn *.yunetidc.com *.baidu.com *.cnzz.com *.duoshuo.com *.jiathis.com;report-uri /error/csp
高级知识：指令集合
| 指令 | 取值示例 | 说明 |
|---|---|---|
| default-src | 'self' cdn.example.com | 定义针对所有类型（js/image/css/web font/ajax/iframe/多媒体等）资源的默认加载策略，某类型资源如果没有单独定义策略，就使用默认。 |
| script-src | 'self' js.example.com *.54php.cn *://*.54php.cn https://*.54php.cn | 定义针对JavaScript的加载策略 |
| object-src | 'self' | 针对,, 等标签的加载策略 |
| style-src | 'self' css.example.com | 定义针对样式的加载策略 |
| img-src | 'self' image.example.com | 定义针对图片的加载策略 |
| media-src | 'media.example.com' | 针对或者引入的html多媒体等标签的加载策略 |
| frame-src | 'self' | 针对iframe的加载策略 |
| connect-src | 'self' | 针对Ajax、WebSocket等请求的加载策略。不允许的情况下，浏览器会模拟一个状态为400的响应 |
| font-src | font.qq.com | 针对Web Font的加载策略 |
| sandbox | allow-forms allow-scripts | 对请求的资源启用sandbox |
| report-uri | /some-report-uri | 告诉浏览器如果请求的资源不被策略允许时，往哪个地址提交日志信息。不阻止任何内容，可以改用Content-Security-Policy-Report-Only头 |
| base-uri | 'self' | 限制当前页面的url（CSP2） |
| child-src | 'self' | 限制子窗口的源(iframe、弹窗等),取代frame-src（CSP2） |
| form-action | 'self' | 限制表单能够提交到的源（CSP2） |
| frame-ancestors | 'none' | 限制了当前页面可以被哪些页面以iframe,frame,object等方式加载（CSP2） |
| plugin-types | application/pdf | 限制插件的类型（CSP2） |
实践总结
注意点
由于采用白名单方式，所以这个名单要更具业务可能会有变化，所以的谨慎使用，如果配置不当导致页面无法加载就麻烦啦
CSP拦截数据结果
数据如下：广告蛋糕太大了，好多人都想分点
164 119.4.249.166:8080 225 www.tjqonline.cn 250 221.179.140.145:9090 364 220.196.52.141:30000 544 101.251.211.235 545 jdwx01.b0.upaiyun.com 1587 wap.zjtoolbarc60.10086.cn:8080
参考资料
原文地址：CSP -- 运营商内容劫持（广告）的终结者
标签：csp css 运营商 广告 小米路由器 移动广告 广告联盟