隨着互聯網高速的發展，信息安全已經成為企業重點關注焦點之一，而前端又是引發安全問題的高危據點，所以，作為一個前端開發人員，需要了解前端的安全問題，以及如何去預防、修復安全漏洞。
一、XSSS攻擊
1.漏洞描述
XSS是跨站腳本攻擊(Cross Site Scripting)的簡稱，之所以叫XSS而不是CSS那就是為了跟層疊樣式表(Cascading Style Sheets，CSS)區別
惡意攻擊者往web頁面中插入惡意HTML代碼，當用戶瀏覽該web頁面時，嵌入到該web頁面的惡意HTML代碼就會被執行，從而達到惡意攻擊用戶的特殊目的。其危害主要優竊取cookie、放蠕蟲、網站釣魚 ...
根據攻擊的來源，XSS 攻擊可分為存儲型、反射型和 DOM 型三種。對於前端比較常見的為存儲型的，下面我們重點介紹一下存儲型的XSS。
如果頁面展示的數據為不可信的數據源（也就是從后台獲取或者用戶輸入的）的話，如果我們對這數據沒有進行處理的話，那么就會存在存儲型的XSS漏洞。
例如：可以將js語句（<script>alert(“1”)</script>或者<img src=”dd” onerror="alert(12)">）寫入提交后，會觸發彈窗。
例子：燈名輸入：(<img src=”dd” onerror="alert(12)">)
XSS現象:出現彈出框，圖片等情況
進行鏈接跳轉獲取用戶信息或者誘導釣魚網站等：（<script>window.location.href="http://www.baidu.com";</script>）
2.防御策略
a)對不可信的數據源,進行特殊字符的轉義
封裝成的公共方法：
//轉義 function HTMLEncode(str) { var str = str.replace(/&/g,"&") .replace(/</g,"<") .replace(/>/g,">") .replace(/"/g,""") .replace(/'/g,"'") .replace(/\//g,"/") .replace(/ /g," "); return str; } //反轉義 function HTMLDecode(str) { var str = str.replace(/&/g,"&") .replace(/</g,"<") .replace(/>/g,">") .replace(/"/g,"\"") .replace(/'/g,"\'") .replace(///g,"/") .replace(/ /g," "); return str; } //注：空格的轉義不是安全方面，是為了解決多個空格，頁面只會顯示一個空格的間距問題。
轉義---打印結果：
反轉義--打印結果：
所以，前端對於用戶輸入的數據(不可信的數據源),下發到服務器后台之前，是需要進行轉義，即需要調用HTMLEncode(str)方法將數據進行轉義；而對於從服務器后台獲取的數據(不可信的數據源)在前端頁面進行展示之前，前端需要將獲取的數據進行反轉義后才能進行展示。
b)將重要的cookie標記為http only；
c)直接過濾掉JavaScript事件標簽和一些特殊的html標簽；
二、CSRF
1.漏洞描述
CSRF跨站點請求偽造(Cross—Site Request Forgery)，跟XSS攻擊一樣，存在巨大的危害性，你可以這樣來理解：
攻擊者盜用了你的身份，以你的名義發送惡意請求，對服務器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發送郵件、發消息，盜取你的賬號，添加系統管理員，甚至於購買商品、虛擬貨幣轉賬等。 如下：其中Web A為存在CSRF漏洞的網站，Web B為攻擊者構建的惡意網站，User C為Web A網站的合法用戶。
2.防御策略
a)在請求地址中添加 token 並驗證
三、弱口令
1.漏洞描述
弱口令(weak password) 沒有嚴格和准確的定義，通常認為容易被別人（他們有可能對你很了解）猜測到或被破解工具破解的口令均為弱口令。弱口令指的是僅包含簡單數字和字母的口令，例如“123”、“abc”等，因為這樣的口令很容易被別人破解，從而使用戶的計算機面臨風險，因此不推薦用戶使用。
2.密碼要求和策略
a) 長度不小於8位，必須包含數字、大寫字母、小寫字母、特殊字符中至少3種類型；
b) 密碼校驗成功時，發現用戶是弱口令的強制要求用戶修改登錄口令后再登錄。
c) 密碼校驗成功時，發現密碼使用時間超過90 天后必須強制用戶修改密碼才能登錄系統。
四、暴力破解
1.漏洞描述
通過利用大量猜測和窮舉的方式來嘗試獲取用戶口令的攻擊方式。就是猜口令咯，攻擊者一直枚舉進行請求，通過對比數據包的長度可以很好的判斷是否爆破成功，因為爆破成功和失敗的長度是不一樣的，所以可以很好的判 斷是否爆破成功。
2.防御策略
a) 避免使用弱口令，弱口令當然不止使用admin，root這類的，還有姓名拼音，鍵盤連續字符等;
b) 對多次登陸失敗的賬戶可以鎖ip或者鎖定賬號等機制;
c) 設置驗證碼
五、越權訪問
1.漏洞描述
越權訪問，指攻擊者在獲得低權限用戶賬號后，可以利用一些方式如果權限檢查，訪問或者操作到原本無權訪問的高權限功能。目前存在着兩種越權操作類型：橫向越權操作和縱向越權操作。
垂直越權漏洞，也稱為權限提升，是一種“基於URL的訪問控制”設計缺陷引起的漏洞。由於Web應用程序沒有做權限控制或者僅在菜單上做了權限控制，導致惡意用戶只要猜測其他管理頁面的URL，就可以訪問或控制其他角色擁有的數據或頁面，達到權限提升的目的。
水平越權漏洞，是一種“基於數據的訪問控制”設計缺陷引起的漏洞。由於服務器端在接收到請求數據進行操作時沒有判斷數據的所屬人而導致的越權數據訪問漏洞。如服務器端從客戶端提交的request參數(用戶能夠控制的 數據)中獲取用戶id，惡意攻擊者通過變換請求ID的值，查看或修改不屬於本人的數據。
2.防御策略
垂直越權漏洞防護方案：通過全局過濾器來檢測用戶是否登錄，是否對資源具有訪問權限。只需要在每個頁面的加載之前進行權限驗證即可。也就是對頁面和訪問的請求進行分權白名單等限制即可。
水平越權漏洞：在用戶進行操作時，從session中獲取用戶id，將傳入的參數與用戶的身份做綁定校驗。從用戶的加密認證cookie中獲取當前用戶id，並且在執行的sql語句中加入當前用戶id作為條件語句。由於cookie是加密 的，所以攻擊者無法修改加密信息。