淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
有的時(shí)候頁(yè)面中會(huì)有一個(gè)輸入框,用戶輸入內(nèi)容后會(huì)顯示在頁(yè)面中,類似于網(wǎng)頁(yè)聊天應(yīng)用。如果用戶輸入了一段js腳本,比例:<script>alert('test');</script>,頁(yè)面會(huì)彈出一個(gè)對(duì)話框,或者輸入的腳本中有改變頁(yè)面js變量的代碼則會(huì)時(shí)程序異?;蛘哌_(dá)到跳過(guò)某種驗(yàn)證的目的。那如何防止這種惡意的js腳本攻擊呢?通過(guò)html轉(zhuǎn)義能解決這個(gè)問題。
一:什么是html轉(zhuǎn)義?
html轉(zhuǎn)義是將特殊字符或html標(biāo)簽轉(zhuǎn)換為與之對(duì)應(yīng)的字符。如:< 會(huì)轉(zhuǎn)義為 <> 或轉(zhuǎn)義為 >像“<script>alert('test');</script>”這段字符會(huì)轉(zhuǎn)義為:“<script>alert('test');</script>”再顯示時(shí)頁(yè)面會(huì)將<解析為<,>解析為>,從而還原了用戶的真實(shí)輸入,最終顯示在頁(yè)面上 的還是“<script>alert('test');</script>”,即避免了js注入攻擊又真實(shí)的顯示了用戶輸入。
二:如何轉(zhuǎn)義?
1、通過(guò)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、通過(guò)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注入攻擊的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 什么是JavaScript注入攻擊?
- linux抵御DDOS攻擊 通過(guò)iptables限制TCP連接和頻率
- 淺談利用JavaScript進(jìn)行的DDoS攻擊原理與防御
- Linux系統(tǒng)防CC攻擊自動(dòng)拉黑IP增強(qiáng)版(Shell腳本)
- linux封鎖IP簡(jiǎn)單防御UDP攻擊
- IP攻擊升級(jí),程序改進(jìn)以對(duì)付新的攻擊
- php下網(wǎng)站防IP攻擊代碼,超級(jí)實(shí)用
- 跨站式腳本(Cross-SiteScripting)XSS攻擊原理分析
- 分析攻擊IP來(lái)源地與防御IP攻擊的應(yīng)對(duì)策略
相關(guān)文章
JavaScript欄目列表隱藏/顯示簡(jiǎn)單實(shí)現(xiàn)
隱藏側(cè)邊欄,并將圖片換成右箭頭圖片;顯示側(cè)邊欄,并將圖片換成左箭頭,這樣的效果想必大家都很熟悉吧,接下來(lái)實(shí)現(xiàn)下,感興趣的朋友可以參考下哈2013-04-04詳解ES6 中的Object.assign()的用法實(shí)例代碼
這篇文章主要介紹了ES6 Object.assign()的用法及用途,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01html5+javascript實(shí)現(xiàn)簡(jiǎn)單上傳的注意細(xì)節(jié)
這篇文章主要為大家詳細(xì)介紹了html5+javascript實(shí)現(xiàn)上傳操作的注意細(xì)節(jié),form表單樣式不美觀等細(xì)節(jié)問題,感興趣的小伙伴們可以參考一下2016-04-04'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運(yùn)行的程序?或批處理文件的最
這篇文章主要介紹了'webpack-dev-server'?不是內(nèi)部或外部命令也不是可運(yùn)行的程序?或批處理文件的最新解決方法,文中給大家補(bǔ)充介紹了webpack-dev-server的介紹與用法,需要的朋友可以參考下2023-02-02javascript 小數(shù)取整簡(jiǎn)單實(shí)現(xiàn)方式
這篇文章主要介紹了javascript 小數(shù)取整d的簡(jiǎn)單實(shí)現(xiàn)方式,需要的朋友可以參考下2014-05-05JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹,本文給大家分享多種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖
這篇文章主要介紹了Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實(shí)例形式分析了Map的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03