前端安全問題及解決辦法

1、隨着前端的快速發展，各類技術不斷更新，可是前端的安全問題也值得咱們重視，不要等到項目上線以後纔去重視安全問題，到時候被黑客攻擊的時候一切都太晚了。

2、本文將講述前端的六大安全問題，是日常比較常見的安全問題，固然若是還有其餘必要重要的安全問題你們能夠幫忙補充：

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

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

三、iframe安全隱患問題；

四、本地存儲數據問題；

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

6.HTTPS加密傳輸數據；

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

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

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

CSRF也稱爲跨站請求僞造，其實就是對網站中的一些表單提交行爲被黑客利用。好比你的網站登陸的時候存到cookie的一些我的信息，當你訪問黑客的網站有一段相同代碼隱藏div，但你點擊的時候就會致使你的網站被登出或者被登陸，就是在對別的網站就行操做的時候會對你以前訪問的網站發送請求。

解決辦法：

1.增長token驗證.由於cookie發送請求的時候會自動增長上，可是token卻不會，這樣就避免了攻擊

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

5、iframe安全隱患問題

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

解決辦法：

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

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

6、本地存儲數據問題

不少開發者爲了方便，把一些我的信息不經加密直接存到本地或者cookie，這樣是很是不安全的，黑客們能夠很容易就拿到用戶的信息，全部在放到cookie中的信息或者localStorage裏的信息要進行加密，加密能夠本身定義一些加密方法或者網上尋找一些加密的插件，或者用base64進行屢次加密而後再屢次解碼，這樣就比較安全了。

7、第三方依賴安全隱患

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

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

8、HTTPS加密傳輸數據

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

前端安全問題先分享到這裏，後續再慢慢補充，喜歡的能夠點關注，謝謝！