1. 程式人生 > >前端輸入框如何防止js程式碼攻擊

前端輸入框如何防止js程式碼攻擊

這種攻擊一般叫做xss攻擊

有的時候頁面中會有一個輸入框,使用者輸入內容後會顯示在頁面中,類似於網頁聊天應用。如果使用者輸入了一段js指令碼,比如:<script>alert('test');</script>,頁面會彈出一個對話方塊,或者輸入的指令碼中有改變頁面js變數的程式碼則會時程式異常或者達到跳過某種驗證的目的。

攻擊的危害 

攻擊者把程式碼注入進了訪問的頁面,所以惡意指令碼都在網站的上下文環境中執行,這就意味著惡意程式碼被當做網站提供的正常指令碼一樣對待:他有權訪問頁面與網站的關鍵資料(比如cookie),瀏覽器會認為他是網站的合法部分,允許他做任何事情。比如拿到使用者的cookie資訊,然後傳送到攻擊者自己的伺服器,從cookie中提取敏感資訊,拿到使用者的登入資訊,或者攻擊者可以通過修改DOM在頁面上插入一個假的登陸框,也可以把表單的`action`屬性指向他自己的伺服器地址,然後欺騙使用者提交自己的敏感資訊。

怎樣預防這種攻擊 

1.可以下載前端防禦元件:js-xss         npm install xss

var xss = require('xss')
$('btnSure').on('click',function(){
    let result = xss($('.input').val())
    putout.html(result)
})

2.在客戶端使用javascript對使用者輸入進行編碼時,有一些內建的方法和屬效能夠自動感知對上下文的情況下自動對所有的資料進行編碼

下表就是一些自動編碼的方式:

 

下面是參考連結: