轉自：https://juejin.im/post/5c8b34325188257e9044efb7
我們多少應該聽說過一些關於
web安全的問題吧，比如http劫持、xss跨站腳本攻擊、csrf跨站請求偽造。當下好多的網站都沒有實現https，web安全也是一個非常重要的話題。一、Http劫持
在用戶的客戶端與其要訪問的服務器經過網絡協議協調後，二者之間建立了一條專用的數據通道，用戶端程序在系統中開放指定網絡端口用於接收數據報文，服務器端將全部數據按指定網絡協議規則進行分解打包，形成連續數據報文。
用戶端接收到全部報文後，按照協議標準來解包組合獲得完整的網絡數據。其中傳輸過程中的每一個數據包都有特定的標籤，表示其來源、攜帶的數據屬性以及要到何處，所有的數據包經過網絡路徑中ISP的路由器傳輸接力後，最終到達目的地，也就是客戶端。
HTTP劫持 是在使用者與其目的網絡服務所建立的專用數據通道中，監視特定數據信息，提示當滿足設定的條件時，就會在正常的數據流中插入精心設計的網絡數據報文，目的是讓用戶端程序解釋“錯誤”的數據，並以彈出新窗口的形式在使用者界面展示宣傳性廣告或者直接顯示某網站的內容。
二、DNS劫持
DNS 劫持就是通過劫持了 DNS 服務器，通過某些手段取得某域名的解析記錄控制權，進而修改此域名的解析結果，導致對該域名的訪問由原IP地址轉入到修改後的指定IP，其結果就是對特定的網址不能訪問或訪問的是假網址，從而實現竊取資料或者破壞原有正常服務的目的。
DNS 劫持比之 HTTP 劫持 更加過分，簡單說就是我們請求的是 http://www.a.com/index.html ，直接被重定向了 http://www.b.com/index.html 。
三、XSS攻擊
xss就是攻擊者利用漏洞，向我們的頁面注入一些攻擊性腳本，當用戶瀏覽頁面的時候自動觸發執行，從而達到攻擊的目的。
HTTP 劫持 和 XSS 最終都是惡意代碼在客戶端，通常也就是用戶瀏覽器端執行，我們應該學會即使我們被攻擊了，我們應該如何利用 Javascript 進行行之有效的前端防護。
頁面被嵌入 iframe 中，重定向 iframe
先來說說我們的頁面被嵌入了 iframe 的情況。也就是，網絡運營商為了儘可能地減少植入廣告對原有網站頁面的影響，通常會通過把原有網站頁面放置到一個和原頁面相同大小的 iframe 裡面去，那麼就可以通過這個 iframe 來隔離廣告代碼對原有頁面的影響。
這種情況還比較好處理，我們只需要知道我們的頁面是否被嵌套在 iframe 中，如果是，則重定向外層頁面到我們的正常頁面即可。
那麼有沒有方法知道我們的頁面當前存在於 iframe 中呢？有的，就是 window.self 與 window.top 。
window.self
返回一個指向當前 window 對象的引用。
window.top
返回窗口體系中的最頂層窗口的引用。
// 我們可以通過如下判斷來區分是否外部被嵌套iframe
if (self != top) {
// 我們的正常頁面
var url = location.href;
// 父級頁面重定向
top.location = url;
}
內聯事件及內聯腳本攔截
列出一些比較常見的注入方式：
<iframe>
<video>除去一些未列出來的非常少見生僻的注入方式，大部分都是 javascript:...及內聯事件 on*。
我們假設注入已經發生，那麼有沒有辦法攔截這些內聯事件與內聯腳本的執行呢？
對於上面列出的 (1) (5) ，這種需要用戶點擊或者執行某種事件之後才執行的腳本，我們是有辦法進行防禦的。
以攔截 javascript:為例子。
// 建立關鍵詞黑名單
var keywordBlackList = [
'xss',
'BAIDU_SSP__wrapper',
'BAIDU_DSPUI_FLOWBAR'
];
document.addEventListener('click', function(e) {
var code = "";
// 掃描靜態腳本攔截
XSS 跨站腳本的精髓不在於“跨站”，在於“腳本”。
通常而言，攻擊者或者運營商會向頁面中注入一個
頁面中如果有這麼一段，那麼頁面會執行alert函數。
如果是：
頁面則不會執行。
所以最普遍的做法是轉義輸入輸出的內容，對於引號，尖括號，斜槓進行轉義
function escape(str) {
str = str.replace(/&/g, '&')
str = str.replace(/ str = str.replace(/>/g, '>')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, ''')
str = str.replace(/`/g, '`')
str = str.replace(/\//g, '/')
return str
}我們一般使用一個現成的工具。
XSS是一個用於對用戶輸入的內容進行過濾，以避免遭受XSS攻擊的模塊 （什麼是XSS攻擊？）。主要用於論壇、博客、網上商店等等一些可允許用戶錄入頁面排版、 格式控制相關的HTML的場景，xss模塊通過白名單來控制允許的標籤及相關的標籤屬性， 另外還提供了一系列的接口以便用戶擴展，比其他同類模塊更為靈活。
閱讀更多 小小前端一枚 的文章
