摘要：一隨著前端的快速發(fā)展，各種技術(shù)不斷更新，但是前端的安全問題也值得我們重視，不要等到項(xiàng)目上線之后才去重視安全問題，到時(shí)候被黑客攻擊的時(shí)候一切都太晚了。解決辦法增加驗(yàn)證因?yàn)榘l(fā)送請求的時(shí)候會(huì)自動(dòng)增加上，但是卻不會(huì)，這樣就避免了攻擊驗(yàn)證。

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

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

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

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

3、iframe安全隱患問題；

4、本地存儲(chǔ)數(shù)據(jù)問題；

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

6.HTTPS加密傳輸數(shù)據(jù)；

下面將對(duì)這些問題進(jìn)行分享說明。

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

XSS是前端談?wù)撟疃嗟陌踩珕栴}，是通過在你的輸入文本當(dāng)中或者這HTML標(biāo)簽當(dāng)中插入js腳本進(jìn)行攻擊，比如會(huì)在你的a標(biāo)簽或者img標(biāo)簽之前插入一些腳本文件就能攻擊到你的網(wǎng)站，所有在用HTML去切入到div的時(shí)候一定要注意，或者長串的字符串嵌入到a標(biāo)簽的時(shí)候。

解決辦法：

1：如果要使用HTML進(jìn)行轉(zhuǎn)換內(nèi)容的時(shí)候，寫代碼時(shí)改為innerText而不用innerHTML，或者把<script><iframe>等標(biāo)簽替換掉；

 var HtmlUtil = {
     /*1.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html轉(zhuǎn)碼*/
     htmlEncode:function (html){
         //1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV
         var temp = document.createElement ("div");
         //2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerText(ie支持)或者textContent(火狐，google支持)
         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
         //3.最后返回這個(gè)元素的innerHTML，即得到經(jīng)過HTML編碼轉(zhuǎn)換的字符串了
         var output = temp.innerHTML;
         temp = null;
         return output;
     },
     /*2.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html解碼*/
     htmlDecode:function (text){
         //1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV
         var temp = document.createElement("div");
         //2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerHTML(ie，火狐，google都支持)
         temp.innerHTML = text;
        //3.最后返回這個(gè)元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到經(jīng)過HTML解碼的字符串了。
        var output = temp.innerText || temp.textContent;
         temp = null;
        return output;
     }
 };

2.對(duì)一些切入標(biāo)簽的字符串進(jìn)行轉(zhuǎn)義：

var HtmlUtil = {
      /*1.用正則表達(dá)式實(shí)現(xiàn)html轉(zhuǎn)碼*/
      htmlEncodeByRegExp:function (str){  
           var s = "";
           if(str.length == 0) return "";
           s = str.replace(/&/g,"&");
           s = s.replace(//g,">");
          s = s.replace(/ /g," ");
          s = s.replace(/"/g,"'");
          s = s.replace(/"/g,""");
          return s;  
    },
    /*2.用正則表達(dá)式實(shí)現(xiàn)html解碼*/
    htmlDecodeByRegExp:function (str){  
          var s = "";
          if(str.length == 0) return "";
          s = str.replace(/&/g,"&");
          s = s.replace(//g,">");
          s = s.replace(/ /g," ");
          s = s.replace(/'/g,""");
          s = s.replace(/"/g,""");
          return s;  
        }
    };

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

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

解決辦法：

1.增加token驗(yàn)證.因?yàn)閏ookie發(fā)送請求的時(shí)候會(huì)自動(dòng)增加上，但是token卻不會(huì)，這樣就避免了攻擊

2.Referer驗(yàn)證。頁面來源的判斷

五、iframe安全隱患問題

有時(shí)候前端頁面為了顯示別人的網(wǎng)站或者一些組件的時(shí)候，就用iframe來引入進(jìn)來，比如嵌入一些廣告等等。但是有些iframe安全性我們無法去評(píng)估測試，有時(shí)候會(huì)攜帶一些第三方的插件啊，或者嵌入了一下不安全的腳本啊，這些都是值得我們?nèi)タ紤]的。

解決辦法：

1.使用安全的網(wǎng)站進(jìn)行嵌入；

2.在iframe添加一個(gè)叫sandbox的屬性，瀏覽器會(huì)對(duì)iframe內(nèi)容進(jìn)行嚴(yán)格的控制，詳細(xì)了解可以看看相關(guān)的API接口文檔。

六、本地存儲(chǔ)數(shù)據(jù)問題

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

七、第三方依賴安全隱患

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

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

八、HTTPS加密傳輸數(shù)據(jù)

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

前端安全問題先分享到這里，后續(xù)再慢慢補(bǔ)充，喜歡的可以點(diǎn)關(guān)注，謝謝！