開年遇到的第一個問題就是解決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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/x27/g, '&#039;').replace(/x22/g,'&quto;'); }

CSRF

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

用戶向信任站點如example.com發送請求

用戶驗證通過、獲得信任站點的身份信息，并放入cookie中，用戶此時可以在站內進行其他請求;

用戶未退出登錄example.com,然后訪問hack.com網站，該網站返回攻擊性代碼并且在頁面中存在訪問example.com的請求;

瀏覽器在用戶可能不知情的情況下向example.com發送請求;

由于同域名可以帶上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; }

具體攻擊示例點擊查看

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的XSS和CSRF详解与防御的全部內容，希望文章能夠幫你解決所遇到的問題。

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