XSS和CSRF詳解與防護

開年遇到的第一個問題就是解決XSS攻擊>_<,可見要時刻保證網站的安全性相當重要。作好網站安全，不只維護網站的穩定性，更保證用戶數據的一致性。對此，總結一下筆者在工做中遇到的安全問題以及防護方法。

前端中常見的兩種網站應用安全漏洞攻擊的方式是 XSS 與 CSRF,本文詳細介紹兩種攻擊方式的概念、原理以及防護方式。

XSS

XSS(Cross-site scripting)跨站腳本攻擊是惡意用戶在網站中注入的腳本，當正經常使用戶打開網站時受到影響並可能獲取用戶cookie等信息一種安全攻擊行爲。常見的例子是用戶進入某個網站的時候一直彈出alert框等。
常見的 XSS 方式分爲兩類：持久性和非持久性，也有機構將其分爲傳統型(由服務器端代碼缺陷引發)和基於 DOM 型（有客戶端引發）。下面介紹三種類型：

• 反射型 反射型跨站腳本攻擊最多見的方式是客戶端輸入查詢信息，服務器端將其返回而且顯示在頁面上形成攻擊。如直出頁面，後面根據參數查詢返回對應的查詢信息和結果。或者用戶在input輸入框中進行查詢等,值得注意的是，使用 innerHTML 插入 <script>alert(document.cooke)</script 並不會執行 script 中的代碼，須要構造對應事件觸發。如： <img src="xxx.jpg" width="0" height="0" border="0" onload="javascript:alert(document.cookie);">
• 存儲型存儲型與反射型 XSS 攻擊的區別在因而否存儲在數據庫中，如用戶寫博客和評論等，這種方式的影響是持久的。
• 基於 DOM惡意用戶構造的腳本並不會通過服務器端，徹底發生在客服端，如經過連接（?userName=<img onload="javascript:alert(document.cookie)"/>）的查詢參數來顯示用戶名等。

針對 XSS 攻擊，常常有如下兩個方式來進行防護：

• 設置重要的cookie信息爲 httpOnly 對於重要的 cookie字段，如：能夠經過 cookie 某個字段和某個接口獲取好友關係的，須要將其設置爲 httpOnly,使得惡意用戶沒法獲取。
• 對輸入進行檢測和轉義 對用戶輸入的或者從連接獲取參數須要展現到頁面中須要校驗合法性和使用轉義函數進行轉義，如常見的函數以下：

function escHTML(str) {
    if (!str) return '';
    return str.replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/x27/g, '&#039;')
              .replace(/x22/g,'&quto;');
}

CSRF

CSRF(Cross-site request forgery)是一種攻擊，迫使用戶在受信任網站上執行不須要的一些操做。具體過程以下：

1. 用戶向信任站點如example.com發送請求
2. 用戶驗證經過、得到信任站點的身份信息，並放入cookie中，用戶此時能夠在站內進行其餘請求;
3. 用戶未退出登陸example.com,而後訪問hack.com網站，該網站返回攻擊性代碼而且在頁面中存在訪問example.com的請求;
4. 瀏覽器在用戶可能不知情的狀況下向example.com發送請求;
5. 因爲同域名能夠帶上cookie信息，所以信息認證經過，請求僞形成。

針對 CSRF 攻擊，經常使用的防護方式以下：

• 檢測請求來源 在請求頭中有一個refree字段，refree記錄了發送請求的域名，好比：hack.com向example.com中發送請求，那麼refree就爲hack.com，只要在處理請求中作相應的校驗就能夠中斷請求。
• 加入token校驗 crsf之因此可以僞造請求成功，其緣由之一在於全部的用戶信息放於cookie中；所以能夠在每次請求中加入token，而後後臺進行校驗，若是校驗經過則進行處理。生成token方式之一以下：

function getToken (token) {
    var str = token || '';
    var hash = 5381;
    for (var i = 0, len = str.length; i < len; ++i) {
        hash += (hash << 5) + str.charCodeAt(i);
    }
    return hash & 0x7fffffff;
}

具體攻擊示例點擊查看