前端頁面劫持和反劫持

頁面劫持

使用HTTP請求請求一個網站頁面的時候，網絡運營商會在正常的數據流中插入精心設計的網絡數據報文，讓客戶端（通常是瀏覽器）展示“錯誤”的數據，通常是一些彈窗，宣傳性廣告或者直接顯示某網站的內容。

常見劫持手段

跳轉型劫持：

用戶輸入地址A，但是跳轉到地址B

為了獲取流量，一些電商或者類似百度這樣需要流量合作的網站都會有自己的聯盟系統，通過給予一些獎勵來獲取導流，比如：百度或者電商會有渠道分成。

為了區分哪些是第三方給予導流過來的，通常會在url地址增加類似source、from之類的參數，或者進入頁面之前通過「中間頁」種cookie。

這樣，當用戶輸入一個正常網址的時候，劫持方會在網絡層讓其跳轉到帶分成或者渠道號的「中間頁」或者帶渠道號的頁面。這樣用戶進行下單或者搜索等行為，劫持方會得到「傭金」。

DNS劫持：在DNS服務器中，將www.xxx.com的域名對應的IP地址進行了變化。你解析出來的域名對應的IP，在劫持前后不一樣；

• 地址欄輸入freebuf.com
• 訪問本機的hosts文件，查找 freebuf.com 所對應的 IP，若找到，則訪問該IP
• 若未找到，則進行這一步，去（遠程的）DNS服務器上面找freebuf.com 的IP，訪問該IP

中間人劫持就發生在第三步：由于惡意攻擊者控制了你的網關，當你發送了一個查找freebuf.com的IP的請求的時候，中間人攔截住，并返回給你一個惡意網址的IP,你的瀏覽器就會把這個IP當做你想要訪問的域名的IP!!這個IP是攻擊者搭建的一個模仿了目標網站前端界面的界面，當你在該界面輸入用戶名密碼或者付款操作的時候，就會中招。

注入型劫持：

有別于跳轉型型劫持，指通過在正常的網頁中注入廣告代碼(js、iframe等)，實現頁面彈窗提醒或者底部廣告等，又分為下面三個小類：

1.注入js類劫持：
在正常頁面注入劫持的js代碼實現的劫持；注入js的方式可以通過 document.write或者直接改html代碼片段等方式，給頁面增加外鏈js，為了做到更難檢測，有些運營商會捏造一個不存在的url地址，從而不被過濾或者檢測。

案例1：運營商會用自己識別的ip或者域名做js網址，wap.zjtoolbar.10086.cn這類只有在浙江移動網絡下才會被解析出來，同理ip也是

案例2：運營商很聰明，知道頁面可以檢測所有外鏈js的域名，比如：m.baidu.com我只允許m.baidu.com/static的外鏈js，其他js都會被記錄反饋;為了不被檢測出來，我遇見個case電信會訪問一個不存在的地址，比如：m.baidu.com/static/abc.js，這個地址在運營商直接返回劫持的js代碼，請求不會發到百度的服務器。

2.iframe類劫持：
將正常頁面嵌入iframe或者頁面增加iframe頁面;一般是通過熱門關鍵詞之類做SEO，打開網站實際去了廣告之類沒有任何實際內容，而頁面卻是內嵌了一個其他網站，我們要是識別出來不被內嵌就需要檢測。

3.篡改頁面類劫持：
正常頁面出現多余的劫持網頁標簽，導致頁面整體大小發生變化;

HTTP劫持:標識HTTP連接。在天上飛的很多連接中，有許多種協議，第一步做的就是在TCP連接中，找出應用層采用了HTTP協議的連接，進行標識；篡改HTTP響應體，可以通過網關來獲取數據包進行內容的篡改；搶先回包，將篡改后的數據包搶先正常站點返回的數據包先到達用戶側，這樣后面正常的數據包在到達之后會被直接丟棄。

劫持檢測方法

1、跳轉型劫持

跳轉型劫持如果用單純靠Web頁面進行檢測比較困難，當時我們做檢測是在手機百度(手百)內做檢測，所以比較簡單，用戶輸入搜索詞(query)，打開百度的頁面URL，然后當頁面加載結束，APP對比訪問的URL是否是之前要訪問的URL，如果URL不一致，則記錄上報。

2、注入js類頁面

• 改寫 document.write方法
• 遍歷頁面 script標簽，給外鏈js增加白名單，不在白名單內js外鏈都上報
• 重寫 Element.prototype.setAttribute，我們發現這里用到了 setAttribute 方法，如果我們能夠改寫這個原生方法，監聽設置 src 屬性時的值，通過黑名單或者白名單判斷它，就可以判斷該標簽的合法性了。

MutationObserver 是 HTML5 新增的 API，功能很強大，給開發者們提供了一種能在某個范圍內的 DOM 樹發生變化時作出適當反應的能力。就是 MutationObserver 在觀測時并非發現一個新元素就立即回調，而是將一個時間片段里出現的所有元素，一起傳過來。所以在回調中我們需要進行批量處理。而且，其中的 callback 會在指定的 DOM 節點(目標節點)發生變化時被調用。在調用時,觀察者對象會傳給該函數兩個參數，第一個參數是個包含了若干個 MutationRecord 對象的數組，第二個參數則是這個觀察者對象本身。

var observer = new MutationObserver(function (mutations, observer) {mutations.forEach(function(mutation) {console.log(mutation);}); });var article = document.querySelector('article');var options = {'childList': true,'attributes':true } ;observer.observe(article, options); // 保存原有接口 var old_setAttribute = Element.prototype.setAttribute;// 重寫 setAttribute 接口 Element.prototype.setAttribute = function(name, value) {// 匹配到 <script src='xxx' > 類型if (this.tagName == 'SCRIPT' && /^src$/i.test(name)) {// 白名單匹配if (!whileListMatch(whiteList, value)) {console.log('攔截可疑模塊:', value);return;}}// 調用原始接口old_setAttribute.apply(this, arguments); };// 建立白名單 var whiteList = [ 'www.yy.com', 'res.cont.yy.com' ];/*** [白名單匹配]* @param {[Array]} whileList [白名單]* @param {[String]} value [需要驗證的字符串]* @return {[Boolean]} [false -- 驗證不通過，true -- 驗證通過]*/ function whileListMatch(whileList, value) {var length = whileList.length,for (i = 0; i < length; i++) {// 建立白名單正則var reg = new RegExp(whiteList[i], 'i');// 存在白名單中，放行if (reg.test(value)) {return true;}}return false; }

3、檢測是否被iframe嵌套

window.self:返回一個指向當前 window 對象的引用。
window.top:返回窗口體系中的最頂層窗口的引用。

if (self != top) {// 我們的正常頁面var url = location.href;// 父級頁面重定向top.location = url; }

4、特殊方法

前面提到類似電信捏造在白名單內的js URL和篡改頁面內容的，我們用上面提到的方法檢測不到這些信息，如果是在APP內，可以做的事情就比較多了，除了上面之外，還可以比較頁面的 content-length。當時手百的做法是：

在用戶開始輸入query的時候，APP訪問一個空白頁面，頁面內只有html、title、head、body、script，而script標簽內主要代碼就是嗅探是否被劫持。

因為一般劫持不會針對某個頁面，而是針對整個網站域名，所以我們的空白頁面也會被劫持。

劫持防御

最簡單粗暴的就是直接上 HTTPS，一勞永逸。再就是取證，去打官司或者警告渠道作弊者。除此之外，我們還可以繼續利用空白頁面做劫持檢測。

手百在沒有全量https時期(畢竟全站https牽扯的工作量不小)，利用空白頁面嗅探出當前網絡環境存在劫持風險的時候，那么就通過調用客戶端的接口，告訴客戶端本次啟動期間使用 https，這樣既可以降低劫持風險，又可以通過這個頁面小流量測試https數據，將來https全量后，還可以通過空白頁面將老版本的APP全量打開https

總結

以上是生活随笔為你收集整理的前端页面劫持和反劫持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。