常見前端安全

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）黑名單

 

2.跨站請求僞造，俗稱CSRF

　　1.攻擊原理

　　　　用戶登陸正常A網站進行正常操做，而且確認身份，保存認證信息。而後惡意網站B頁面向A網站發起請求（帶上A網站的認證身份），以達到在A網站執行惡意操做。

　　2.危害

　　　　利用用戶登陸態　　盜取用戶資金

　　　　用戶不知情　　　　冒充用戶發帖

　　　　完成業務請求　　　損壞網站聲譽

　　3.防護

　　　　從關鍵點切入：惡意網站向認證網站發請求，帶上認證信息。

　　　　1.禁止第三方網站帶cookie。

　　　　　　後端設置samesite值

　　　　2.不訪問認證網站

　　　　　　在前端頁面加入驗證信息

　　　　　　驗證碼

　　　　　　token