HTML轉義以及防止JS注入攻擊
阿新 • • 發佈:2018-11-22
目的
這周在開發即時聊天的時候,發生存在JS注入攻擊的問題。如果使用者輸入了一段js指令碼。
例如:
<script>alert('我進來了');</script>
頁面會彈出一個對話方塊,或者輸入的指令碼中有改變頁面js變數的程式碼則會時程式異常或者達到跳過某種驗證的目的。
於是我在網上搜索了相關的解決方案。
解決方案:利用html轉義
html轉義是將特殊字元或html標籤轉換為與之對應的字元。如:< 會轉義為 <>
或轉義為 >
;像<script>alert('我進來了');</script>
<script>alert('test');</script>
再顯示時頁面會將<
解析為<
,>
解析為>
,從而還原了使用者的真實輸入,最終顯示在頁面上 的還是<script>alert('test');</script>
,即避免了js注入攻擊又真實的顯示了使用者輸入。
實現方法:JS或JQ
1,JS
//轉義 元素的innerHTML內容即為轉義後的字元
function htmlEncode ( str ) {
var ele = document.createElement('span' );
ele.appendChild( document.createTextNode( str ) );
return ele.innerHTML;
}
//解析
function htmlDecode ( str ) {
var ele = document.createElement('span');
ele.innerHTML = str;
return ele.textContent;
}
2,JQ
//轉義
function htmlEncodeJQ ( str ) {
return $('<span/>').text( str ).html();
}
//解析
function htmlDecodeJQ ( str ) {
return $('<span/>').html( str ).text();
}
我是使用JQ的方法的,因為它的相容性更好一點。在我的實際應用中,只需要將這段JS指令碼程式碼進行轉義即可,不需要呼叫解析這個方法,因為瀏覽器會自動幫我們解析出來的。
本文轉載於:https://blog.csdn.net/taoerchun/article/details/50778799