1. 程式人生 > >常見前端安全

常見前端安全

1.跨站指令碼攻擊,俗稱XSS(cross )

  什麼是XSS?

    xss是惡意使用者將指令碼植入到頁面中執行而獲取相應敏感資訊。也就是會在web頁面某個節點(文字節點、屬性節點)執行。

  XSS攻擊的危害包括:

    1.盜用賬號等敏感資訊

    2.非法轉賬等

  XSS攻擊型別:

    1.反射型。通過一個偽裝的url連結進行攻擊,利用url的search引數將指令碼偽裝,當頁面獲取連結引數進行攻擊

    2.儲存型。通過表單輸入,儲存資料庫,再在頁面讀取資料,回顯執行指令碼進行攻擊。

    3.富文字。

  注入點:

    1.html節點內容
      評價輸入框輸入儲存DB後讀取

      <div> {content} </div>
      <div> <script></script></div>

    2.html屬性
      URL傳入src,scr提前關閉引號

      <img src='#{img}' />
      <img src="1" onerror="alert(1)" />
    3.指令碼
      提前關閉引號

        <script>
          var data = '#{data}'
          var data = 'hello';alert(0)''
        </script>
    4.富文字編輯
      本質是一段複雜的html,提交

  XSS防禦

    1.針對反射型

    2.針對html的指令碼注入

//html節點 防禦

//對於尖括號“<” ">" 進行轉義

//轉義時機: 在存入資料庫前 或  在讀取DB展示前轉義

function escapeHtml(str){
    str = str.replace(/&/g, '&'); //這句在先,不然會把&lt的&符號也轉了
    str = str.replace(/</g, '<');
    str = str.replace(/>/g, '>');
    return str
}

//html屬性 防禦
//對於引號 “"” 進行轉義

function escapeHtmlProp(str){
    if(!str) return ''
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, ''');
    str = str.replace(/ /g, ' ');
    return str
}


//以上兩種防禦方法可以合併為同一個函式方法

  

    3.針對JS的指令碼注入

      直接用JSON.stringify(str)

    4.針對富文字的指令碼注入

      1)白名單

        

var xssfilter = function (html){
    if(!html) return;
    var cheerio = require('cheerio');
    var $ = cheerio.load(html);
    //設定白名單
    var whiteList = {
        'img': ['src','title']
    }
    $('*').each(function(index,el){
        if(!whiteList[el.name]){
            $(el).remove();
            return;
        }
        for( var attr in el.attribs) {
            if(whiteList[el.name].indexOf(attr) === -1){
                $(el).attr(attr,null)
            }
        }
    })
    return html
}

  

      2)黑名單