前端安全問題

前端安全問題及解決辦法

xss(Cross-site Scripting)腳本注入攻擊

核心：惡意腳本注入
描述：攻擊者通過在目標網站上注入惡意腳本，使之在用戶的瀏覽器上運行。利用這些惡意腳本，攻擊者可獲取用戶的敏感信息如 Cookie、SessionID 等，進而危害數據安全。

解決方案：
1、打開npmjs.com下載xss插件，引入xss插件之後就沒有任何問題了。
2、將html進行內容轉換，或者將

var HtmlUtil = {
     /*1.用瀏覽器內部轉換器實現html轉碼*/
     htmlEncode:function (html){
         //1.首先動態創建一個容器標籤元素，如DIV
         var temp = document.createElement ("div");
         //2.然後將要轉換的字符串設置爲這個元素的innerText(ie支持)或者textContent(火狐，google支持)
         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
         //3.最後返回這個元素的innerHTML，即得到經過HTML編碼轉換的字符串了
         var output = temp.innerHTML;
         temp = null;
         return output;
     },
     /*2.用瀏覽器內部轉換器實現html解碼*/
     htmlDecode:function (text){
         //1.首先動態創建一個容器標籤元素，如DIV
         var temp = document.createElement("div");
         //2.然後將要轉換的字符串設置爲這個元素的innerHTML(ie，火狐，google都支持)
         temp.innerHTML = text;
        //3.最後返回這個元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到經過HTML解碼的字符串了。
        var output = temp.innerText || temp.textContent;
         temp = null;
        return output;
     }
 };

CSRF(Cross-sit request forgery)漏洞

核心：利用用戶身份僞造請求
描述：利用受害者在被攻擊網站已經獲取的註冊憑證，繞過後臺的用戶驗證，冒充用戶對被攻擊的網站發送執行某項操作的請求

解決方案：

1.增加token驗證.因爲cookie發送請求的時候會自動增加上，但是token卻不會，這樣就避免了攻擊

2.Referer驗證。頁面來源的判斷

iframe安全隱患問題

有時候前端頁面爲了顯示別人的網站或者一些組件的時候，就用iframe來引入進來，比如嵌入一些廣告等等。但是有些iframe安全性我們無法去評估測試，有時候會攜帶一些第三方的插件啊，或者嵌入了一下不安全的腳本啊，這些都是值得我們去考慮的。

解決辦法：

1.使用安全的網站進行嵌入；

2.在iframe添加一個叫sandbox的屬性，瀏覽器會對iframe內容進行嚴格的控制，詳細瞭解可以看看相關的API接口文檔。

HTTP劫持

核心：廣告、彈框html注入
描述：當我們訪問頁面的時候，運營商在頁面的HTML代碼中，插入彈窗、廣告等HTML代碼，來獲取相應的利益

本地存儲數據問題

很多開發者爲了方便，把一些個人信息不經加密直接存到本地或者cookie，這樣是非常不安全的，黑客們可以很容易就拿到用戶的信息，所有在放到cookie中的信息或者localStorage裏的信息要進行加密，加密可以自己定義一些加密方法或者網上尋找一些加密的插件，或者用base64進行多次加密然後再多次解碼，這樣就比較安全了。

第三方依賴安全隱患

現如今的項目開發，很多都喜歡用別人寫好的框架，爲了方便快捷，很快的就搭建起項目，自己寫的代碼不到20%，過多的用第三方依賴或者插件，一方面會影響性能問題，另一方面第三方的依賴或者插件存在很多安全性問題，也會存在這樣那樣的漏洞，所以使用起來得謹慎。

解決辦法：手動去檢查那些依賴的安全性問題基本是不可能的，最好是利用一些自動化的工具進行掃描過後再用，比如NSP(Node Security Platform)，Snyk等等。