淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
有的時(shí)候頁面中會有一個(gè)輸入框，用戶輸入內(nèi)容后會顯示在頁面中，類似于網(wǎng)頁聊天應(yīng)用。如果用戶輸入了一段js腳本，比例：<script>alert('test');</script>,頁面會彈出一個(gè)對話框，或者輸入的腳本中有改變頁面js變量的代碼則會時(shí)程序異?；蛘哌_(dá)到跳過某種驗(yàn)證的目的。那如何防止這種惡意的js腳本攻擊呢？通過html轉(zhuǎn)義能解決這個(gè)問題。
一：什么是html轉(zhuǎn)義？
html轉(zhuǎn)義是將特殊字符或html標(biāo)簽轉(zhuǎn)換為與之對應(yīng)的字符。如：< 會轉(zhuǎn)義為 <> 或轉(zhuǎn)義為 >像“<script>alert('test');</script>”這段字符會轉(zhuǎn)義為：“<script>alert('test');</script>”再顯示時(shí)頁面會將<解析為<,>解析為>,從而還原了用戶的真實(shí)輸入,最終顯示在頁面上 的還是“<script>alert('test');</script>”，即避免了js注入攻擊又真實(shí)的顯示了用戶輸入。
二：如何轉(zhuǎn)義？
1、通過js實(shí)現(xiàn)
//轉(zhuǎn)義 元素的innerHTML內(nèi)容即為轉(zhuǎn)義后的字符
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、通過jquery實(shí)現(xiàn)
function htmlEncodeJQ ( str ) {
return $('<span/>').text( str ).html();
}
function htmlDecodeJQ ( str ) {
return $('<span/>').html( str ).text();
}
3、使用
var msg=htmlEncodeJQ('<script>alert('test');</script>');
$('body').append(msg);
建議使用jquery實(shí)現(xiàn)，因?yàn)橛懈玫募嫒菪浴?/p>
以上這篇淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄拗浦荒茌斎霐?shù)字的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
JavaScript獲取網(wǎng)頁表單action屬性的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁表單action屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
常用Javascript函數(shù)與原型功能收藏(必看篇)
下面小編就為大家?guī)硪黄Ｓ肑avascript函數(shù)與原型功能收藏(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
下面小編就為大家?guī)硪黄趈avascript中的typeof和類型判斷(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
countup.js實(shí)現(xiàn)數(shù)字動態(tài)疊加效果
這篇文章主要為大家詳細(xì)介紹了countup.js實(shí)現(xiàn)數(shù)字動態(tài)疊加效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript使用lodash實(shí)現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝
Lodash?是一個(gè)?JavaScript?的工具庫,它提供了一系列的函數(shù)來簡化代碼編寫,本文主要為大家介紹了如何使用lodash實(shí)現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝,感興趣的小伙伴可以了解下2023-11-11
實(shí)現(xiàn)連綴調(diào)用的map方法(prototype)
實(shí)現(xiàn)連綴調(diào)用的map方法(prototype),需要學(xué)習(xí)的朋友可以參考下。2009-08-08
這篇文章主要為大家介紹了JavaScript禁止頁面回退的方法步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
淺談js中的attributes和Attribute的用法與區(qū)別
這篇文章主要介紹了淺談js中的attributes和Attribute的用法與區(qū)別，attributes可以獲取一個(gè)對象中的一個(gè)屬性，attributes 屬性返回指定節(jié)點(diǎn)屬性的集合，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07