緣由
我們公司最近手機端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 運營商 廣告 小米路由器 移動廣告 廣告聯盟