作為前端，一直以來(lái)都知道HTTP 劫持與XSS 跨站腳本（Cross-site scripting）、CSRF 跨站請(qǐng)求偽造（Cross-site request forgery）。但是一直都沒(méi)有深入

作為前端，一直以來(lái)都知道HTTP 劫持與XSS 跨站腳本（Cross-site scripting）、CSRF 跨站請(qǐng)求偽造（Cross-site request forgery）。但是一直都沒(méi)有深入研究過(guò)，前些日子同事的分享會(huì)偶然提及，我也對(duì)這一塊很感興趣，便深入研究了一番。 最近用 JavaScript 寫(xiě)了一個(gè)組件，可以在前端層面防御部分 HTTP 劫持與 XSS 。 當(dāng)然，防御這些劫持最好的方法還是從后端入手，前端能做的實(shí)在太少。而且由于源碼的暴露，攻擊者很容易繞過(guò)我們的防御手段。但是這不代表我們?nèi)チ私膺@塊的相關(guān)知識(shí)是沒(méi)意義的，本文的許多方法，用在其他方面也是大有作用。

已上傳到 Github – httphijack.js ，歡迎感興趣看看順手點(diǎn)個(gè) star ，本文示例代碼，防范方法在組件源碼中皆可找到。

接下來(lái)進(jìn)入正文。

HTTP 劫持、DNS 劫持與XSS

先簡(jiǎn)單講講什么是 HTTP 劫持與 DNS 劫持。

HTTP 劫持

什么是HTTP 劫持呢，大多數(shù)情況是運(yùn)營(yíng)商HTTP 劫持，當(dāng)我們使用HTTP 請(qǐng)求請(qǐng)求一個(gè)網(wǎng)站頁(yè)面的時(shí)候，網(wǎng)絡(luò)運(yùn)營(yíng)商會(huì)在正常的數(shù)據(jù)流中插入精心設(shè)計(jì)的網(wǎng)絡(luò)數(shù)據(jù)報(bào)文，讓客戶端（通常是瀏覽器）展示“錯(cuò)誤”的數(shù)據(jù)，通常是一些彈窗，宣傳性廣告或者直接顯示某網(wǎng)站的內(nèi)容，大家應(yīng)該都有遇到過(guò)。

DNS 劫持

,

DNS 劫持就是通過(guò)劫持了DNS 服務(wù)器，通過(guò)某些手段取得某域名的解析記錄控制權(quán)，進(jìn)而修改此域名的解析結(jié)果，導(dǎo)致對(duì)該域名的訪問(wèn)由原IP 地址轉(zhuǎn)入到修改后的指定IP ，其結(jié)果就是對(duì)特定的網(wǎng)址不能訪問(wèn)或訪問(wèn)的是假網(wǎng)址，從而實(shí)現(xiàn)竊取資料或者破壞原有正常服務(wù)的目的。

DNS 劫持就更過(guò)分了，簡(jiǎn)單說(shuō)就是我們請(qǐng)求的是 直接被重定向了 ，本文不會(huì)過(guò)多討論這種情況。

XSS 跨站腳本

XSS 指的是攻擊者漏洞，向 Web 頁(yè)面中注入惡意代碼，當(dāng)用戶瀏覽該頁(yè)之時(shí)，注入的代碼會(huì)被執(zhí)行，從而達(dá)到攻擊的特殊目的。

關(guān)于這些攻擊如何生成，攻擊者如何注入惡意代碼到頁(yè)面中本文不做討論，只要知道如 HTTP 劫持 和 XSS 最終都是惡意代碼在客戶端，通常也就是用戶瀏覽器端執(zhí)行，本文將討論的就是假設(shè)注入已經(jīng)存在，如何利用 Javascript 進(jìn)行行之有效的前端防護(hù)。

頁(yè)面被嵌入 iframe 中，重定向 iframe

先來(lái)說(shuō)說(shuō)我們的頁(yè)面被嵌入了 iframe 的情況。也就是，網(wǎng)絡(luò)運(yùn)營(yíng)商為了盡可能地減少植入廣告對(duì)原有網(wǎng)站頁(yè)面的影響，通常會(huì)通過(guò)把原有網(wǎng)站頁(yè)面放置到一個(gè)和原頁(yè)面相同大小的 iframe 里面去，那么就可以通過(guò)這個(gè) iframe 來(lái)隔離廣告代碼對(duì)

,

原有頁(yè)面的影響。

這種情況還比較好處理，我們只需要知道我們的頁(yè)面是否被嵌套在 iframe 中，如果是，則重定向外層頁(yè)面到我們的正常頁(yè)面即可。

那么有沒(méi)有方法知道我們的頁(yè)面當(dāng)前存在于 iframe 中呢？有的，就

是 window.self 與 window.top 。

window.self

返回一個(gè)指向當(dāng)前 window 對(duì)象的引用。

window.top

返回窗口體系中的最頂層窗口的引用。

對(duì)于非同源的域名，iframe 子頁(yè)面無(wú)法通過(guò) parent.location 或者 top.location 拿到具體的頁(yè)面地址，但是可以寫(xiě)入 top.location ，也就是可以控制父頁(yè)面的跳轉(zhuǎn)。

,

兩個(gè)屬性分別可以又簡(jiǎn)寫(xiě)為 self 與 top ，所以當(dāng)發(fā)現(xiàn)我們的頁(yè)面被嵌套在 iframe 時(shí)，可以重定向父級(jí)頁(yè)面：

JavaScript

1 if (self != top) {

2 // 我們的正常頁(yè)面

3 var url = location.href;

4 // 父級(jí)頁(yè)面重定向

5 top.location = url;

6 }

使用白名單放行正常 iframe 嵌套

當(dāng)然很多時(shí)候，也許運(yùn)營(yíng)需要，我們的頁(yè)面會(huì)被以各種方式推廣，也有可能是正常業(yè)務(wù)需要被嵌套在 iframe 中，這個(gè)時(shí)候我們需要一個(gè)白名單或者黑名單，當(dāng)我們的頁(yè)面被嵌套在 iframe 中且父級(jí)頁(yè)面域名存在白名單中，則不做重定向操作。 上面也說(shuō)了，使用 top.location.href 是沒(méi)辦法拿到父級(jí)頁(yè)面的 URL 的，這時(shí)候，需要使用document.referrer 。

通過(guò) document.referrer 可以拿到跨域 iframe 父頁(yè)面的URL 。

JavaScript

1 // 建立白名單

2 var whiteList = [

3

4 ];

5

6 if (self != top) {

7 var

8 // 使用 document.referrer 可以拿到跨域 iframe 父頁(yè)面的 URL

9 parentUrl = document.referrer,

10 length = whiteList.length,

,

11 i = 0;

12

13 for(; i

14 // 建立白名單正則

,

3 // 此處需要建立一個(gè)白名單匹配規(guī)則，白名單默認(rèn)放行

4 if (self != top) {

5 var

6 // 使用 document.referrer 可以拿到跨域 iframe 父頁(yè)面的 URL

7 parentUrl = document.referrer,

8 length = whiteList.length,

9 i = 0;

10

11 for(; i

12 // 建立白名單正則

,

在 XSS 中，其實(shí)可以注入腳本的方式非常的多，尤其是 HTML5 出來(lái)之后，一不留神，許多的新標(biāo)簽都可以用于注入可執(zhí)行腳本。

列出一些比較常見(jiàn)的注入方式： 1.

2.