常見前端安全問題及解決方案

1.XSS

XSS全稱(Cross Site Scripting)跨站腳本攻擊，是前端最多見的安全問題。XSS是一種在web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中，攻擊者經過注入非法的html標籤或者javascript代碼，從而當用戶瀏覽該網頁時，控制用戶瀏覽器。

類別

1. DOM型xss

利用DOM自己存在的缺陷進行攻擊。
以下代碼，頁面中某個圖片獲取路徑。其中，返回的{{img.src}}='/xxx' onerror='/xxx'，img標籤就變成了<img src="/xxx" onerror=xxx">。src確定會加載失敗，而後會執行onerror中注入的惡意代碼，達到攻擊效果。

<img src="{{img.src}}">
複製代碼

2. 反射型xss

反射型XSS也被稱爲非持久性XSS，是如今最容易出現的一種XSS漏洞。XSS代碼出如今URL中，經過引誘用戶點擊一個連接到目標網站的惡意連接來實施攻擊。
以下惡意連接，其中，xxx是惡意代碼。傳到服務器的參數data，被服務器接收以後，響應的頁面包含data這個變量的，會將惡意代碼注入到頁面上面，進行攻擊。

http://www.abc.com?data=xxx
複製代碼

3. 存儲型xss

存儲型XSS又被稱爲持久性XSS，它是最危險的一種跨站腳本，相比反射型XSS和DOM型XSS具備更高的隱蔽性，因此危害更大，它不須要用戶手動觸發。
當攻擊者提交一段XSS代碼後，被服務器端接收並存儲，當全部瀏覽者訪問某個頁面時都會被XSS，其中最典型的例子就是留言板。

解決方案

1.過濾。

對用戶的輸入進行過濾，經過將<> '' ""等字符進行轉義，移除用戶輸入的Style節點、Script節點、Iframe節點。

function filterXss(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&/g,"&");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;"); s = s.replace(/\"/g,"&quot;"); return s; } 複製代碼

2.編碼

根據輸出數據所在的上下文來進行相應的編碼。數據放置於HTML元素中，需進行HTML編碼，放置於URL中，須要進行URL編碼。此外，還有JavaScript編碼、CSS編碼、HTML屬性編碼、JSON編碼等等。

3.httpOnly

在cookie中設置HttpOnly屬性，使js腳本沒法讀取到cookie信息。

2.CSRF

CSRF全稱(Cross-Site Request Forgeries)跨站請求僞造。指攻擊者冒充用戶發起請求（在用戶不知情的狀況下），完成一些違背用戶意願的事情。攻擊過程以下圖所示：

解決方案

1.使用token

服務器產生一個token存到session中，同時將token發送給客戶端，客戶端提交表單時帶上該token，服務器驗證token與session是否一致，一致就容許訪問，不然拒絕訪問。

2.Referer 驗證

Referer 指的是頁面請求來源，意思是，只接受本站的請求，服務器才作響應；若是不是，就攔截。

3.使用驗證碼

對於重要請求，要求用戶輸入驗證碼，強制用戶必須與應用進行交互，才能完成最終請求。

3.點擊劫持

點擊劫持就是將一個危險網站設置透明，而後在其上方設置一個按鈕，當你點擊這個按鈕的時候，就會觸發底部惡意網站的某些事件。

解決方案

1.設置http響應頭 X-Frame-Options

X-Frame-Options HTTP 響應頭是用來給瀏覽器指示容許一個頁面能否在<frame>, <iframe>或者 <object> 中展示的標記。網站可使用此功能，來確保本身網站的內容沒有被嵌到別人的網站中去。

2.使用CSP(Content Security Policy)內容安全策略

4.不安全的第三方依賴

現現在進行應用開發，不管是後端服務器應用仍是前端應用開發，絕大多數時候咱們都是在藉助開發框架和各類類庫進行快速開發。然而，一些第三方的依賴或者插件存在不少安全性問題，也會存在這樣那樣的漏洞，因此使用起來得謹慎。

解決方案

1.儘可能減小第三方依賴，選用相對成熟的依賴包。

2.使用自動化工具檢查這些第三方代碼有沒有安全問題，好比NSP(Node Security Platform)，Snyk等等。

5.本地存儲數據泄露

不少開發者爲了方便，把一些我的信息不經加密直接存到本地或者cookie，這樣是很是不安全的，黑客們能夠很容易就拿到用戶的信息。

解決方案

1.不在本地存儲重要數據

敏感、機密信息不要存儲在本地。

2.加密

全部在放到cookie中的信息或者localStorage裏的信息要進行加密，加密能夠本身定義一些加密方法或者網上尋找一些加密的插件，或者用base64進行屢次加密而後再屢次解碼。