前言

這是我觀看了《前端漏洞分析及處理-蔡慧芨》公開課之後的一個總結及簡單實踐體會。在可能的情況下我會把他們都實際操作一遍，更加深刻地體會前端安全的重要性。

web安全問題有哪些

• XSS-跨站指令碼攻擊（全稱Cross SiteScript）
• CSRF-跨站偽造請求（Cross Site Request Forgery）
• SSRF-伺服器偽造請求（Server-Side Request Forgery）
• hijack-劫持

XSS-跨站指令碼攻擊

概念

全稱是跨站指令碼攻擊(Cross SiteScript)，使用者填寫的資訊是可執行的js程式碼，並且操作了使用者的介面（叫這個簡稱據說是為了和CSS做區分）

型別

• 反射型--從URL中讀取內容展示（示例）
• 儲存型--從後臺讀取內容展示（示例）

危害

如果惡意的js程式碼能夠在我們的頁面中執行的話，他們就可以操縱我們使用者的介面，甚至是盜取使用者私密資訊，例如記錄登入態的cookie等。

防範手段

• 富文字--白名單過濾，可以理解為使用者提交的資訊只有符合白名單的標準才能通過，否則就會過濾掉，像一些敏感的標籤和屬性都會被過濾掉（示例）
• 純文字--html encode, js encode，即把標籤轉化為語義標籤（示例）
• 關於轉義的時機，如果是多端共用提交的值的話一般展示時轉義，因為有的端例如安卓要用就要反轉義，工作量就比較大。如果都是web端的話我覺得在提交時就轉義會比較好

CSRF-跨站偽造請求

概念

全稱跨站偽造請求（Cross Site Request Forgery），利用你在網站登入的狀態，悄悄提交各種資訊（post,get請求）

場景

這種場景一般是你先正常登入了一個目標網站，並且沒有退出登入，這個時候如果你點選了頁面上的一個釣魚網站（可能是中獎資訊啊、性感美女之類的，哈哈），釣魚網站就會主動向你的網站發起請求，這個時候你的登入態還是存在的，因為瀏覽器的不同程序之間可以共享登入態，所以釣魚網站這個時候是可以順利以你的身份任意訪問你的網站的介面。

防範手段 （示例）

• 提交方式必須用POST然後用refer判斷請求來源的域名是否是白名單裡的合法域名
  ，因為post請求肯定會有refer，而get請求不一定有。refer必須要頁面內跳轉才會有，直接在位址列輸入請求是沒有的。
• Token登入態校驗，說白了釣魚網站能夠訪問你的網站是因為自動獲取了cookie資訊，但你在請求頭或者請求引數中加入token登入態欄位的話他就沒法自動獲取了。

SSRF-伺服器偽造請求

概念

伺服器偽造請求（Server-Side Request Forgery）是利用某些業務伺服器端會發起請求，請求內網地址

如何防範 （示例）

• 域名限制
• 內網IP限制
• 內網請求地址做token（特殊登入態）

hijack-劫持

概念

頁面劫持，例如利用iframe巢狀你的頁面，騙取使用者輸入資訊

如何防範

• 頁面劫持：window.parent判斷
• Json劫持：返回{},而不是返回資料

其他攻擊方式

利用回撥的URL，也就是篡改你的redirect-url，例如你登入或者授權通過後的URL被篡改了

• 校驗redirect-url

JSONP & CORS安全校驗

• 這種防禦手段是利用refer校驗或者token校驗

總結

web安全這一塊平時開發中接觸的不多，而且對於常見的一些攻擊方式已經由一些約定俗稱的規則來規避了，比如登入後加的token登入態。但安全這個東西之所以沒有框架化和自動化就在於它的多變性和多角度性，而且對於後面幾種攻擊方式我暫時還沒遇到過，等真實遇到了再寫新的感悟吧。

參考

• 前端漏洞分析及處理-蔡慧芨（騰訊高階工程師））