前端安全問題及解決辦法

一、隨着前端的快速發展，各種技術不斷更新，但是前端的安全問題也值得我們重視，不要等到項目上線之后才去重視安全問題，到時候被黑客攻擊的時候一切都太晚了。

二、本文將講述前端的六大安全問題，是平常比較常見的安全問題，當然如果還有其他必要重要的安全問題大家可以幫忙補充：

1、XSS（Cross-Site Scripting）腳本攻擊漏洞；

2、CSRF（Cross-sit request forgery）漏洞；

3、iframe安全隱患問題；

4、本地存儲數據問題；

5、第三方依賴的安全性問題；

6.HTTPS加密傳輸數據；

下面將對這些問題進行分享說明。

三、XSS（Cross-Site Scripting）腳本攻擊漏洞

    XSS是前端談論最多的安全問題，是通過在你的輸入文本當中或者這HTML標簽當中插入js腳本進行攻擊，比如會在你的a標簽或者img標簽之前插入一些腳本文件就能攻擊到你的網站，所有在用HTML去切入到div的時候一定要注意，或者長串的字符串嵌入到a標簽的時候。

解決辦法：

1：如果要使用HTML進行轉換內容的時候，寫代碼時改為innerText而不用innerHTML，或者把<script><iframe>等標簽替換掉；

 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;
     }
 };

2.對一些切入標簽的字符串進行轉義：

var HtmlUtil = {
      /*1.用正則表達式實現html轉碼*/
      htmlEncodeByRegExp:function (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解碼*/
    htmlDecodeByRegExp:function (str){  
          var s = "";
          if(str.length == 0) return "";
          s = str.replace(/&amp;/g,"&");
          s = s.replace(/&lt;/g,"<");
          s = s.replace(/&gt;/g,">");
          s = s.replace(/&nbsp;/g," ");
          s = s.replace(/&#39;/g,"\'");
          s = s.replace(/&quot;/g,"\"");
          return s;  
        }
    };

四、CSRF（Cross-sit request forgery）漏洞

CSRF也稱為跨站請求偽造，其實就是對網站中的一些表單提交行為被黑客利用。比如你的網站登錄的時候存到cookie的一些個人信息，當你訪問黑客的網站有一段相同代碼隱藏div，但你點擊的時候就會導致你的網站被登出或者被登錄，就是在對別的網站就行操作的時候會對你之前訪問的網站發送請求。

解決辦法：

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

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

五、iframe安全隱患問題

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

解決辦法：

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

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

六、本地存儲數據問題

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

七、第三方依賴安全隱患

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

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

八、HTTPS加密傳輸數據

在瀏覽器對服務器訪問或者請求的過程中，會經過很多的協議或者步驟，當其中的某一步被黑客攔截的時候，如果信息沒有加密，就會很容易被盜取。所以接口請求以及網站部署等最好進行HTTPS加密，這樣防止被人盜取數據。

前端安全問題先分享到這里，后續再慢慢補充，喜歡的可以點關注，謝謝！