js innerHTML 的一些問(wèn)題的解決方法
1、當(dāng) HTML 字符串包含一個(gè)標(biāo)記為 defer 的 script 標(biāo)簽(<script defer>…</script>)時(shí),如 innerHTML 屬性處理不當(dāng),在 Internet Explorer 上會(huì)引起腳本注入攻擊。
2、設(shè)置 innerHTML 將會(huì)破壞現(xiàn)有的已注冊(cè)了事件處理函數(shù)的 HTML 元素,會(huì)在某些瀏覽器上引起內(nèi)存泄露的潛在危險(xiǎn)。
還有幾個(gè)其他次要的缺點(diǎn),也值得一提的:
1、你不能得到剛剛創(chuàng)建的元素的引用,需要你手動(dòng)添加代碼才能取得那些引用(使用 DOM APIs)。
2、你不能在所有瀏覽器的所有 HTML 元素上設(shè)置 innerHTML 屬性(比如,Internet Explorer 不允許你在表格的行元素上設(shè)置innerHTML 屬性)。
我更關(guān)注與使用 innerHTML 屬性相關(guān)的安全和內(nèi)存問(wèn)題。很顯然,這不是新問(wèn)題,已經(jīng)有能人圍繞這些中的某些問(wèn)題想出了方法。
Douglas Crockford 寫(xiě)了一個(gè) 清除函數(shù) ,該函數(shù)負(fù)責(zé)中止由于 HTML 元素注冊(cè)事件處理函數(shù)引起的一些循環(huán)引用,并允許垃圾回收器(garbage collector)釋放與這些 HTML 元素關(guān)聯(lián)的內(nèi)存。
從 HTML 字符串中移除 script 標(biāo)簽并不像看上去那么容易。一個(gè)正則表達(dá)式可以達(dá)到預(yù)期效果,雖然很難知道是否覆蓋了所有的可能性。這里是我的解決方案:
/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig
現(xiàn)在,讓我們將這兩種技術(shù)結(jié)合在到一個(gè)單獨(dú)的 setInnerHTML 函數(shù)中,并將 setInnerHTML 函數(shù)綁定到 YUI 的 YAHOO.util.Dom 上:
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string') {
return null;
}
// 中止循環(huán)引用
(function (o) {
var a = o.attributes, i, l, n, c;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
n = a[i].name;
if (typeof o[n] === 'function') {
o[n] = null;
}
}
}
a = o.childNodes;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
c = o.childNodes[i];
// 清除子節(jié)點(diǎn)
arguments.callee(c);
// 移除所有通過(guò)YUI的addListener注冊(cè)到元素上所有監(jiān)聽(tīng)程序
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// 從HTML字符串中移除script,并設(shè)置innerHTML屬性
el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
// 返回第一個(gè)子節(jié)點(diǎn)的引用
return el.firstChild;
};
如果此函數(shù)還應(yīng)有其他任何內(nèi)容或者在正則表達(dá)式中遺漏了什么,請(qǐng)讓我知道。
很明顯,在網(wǎng)頁(yè)上還有很多其他注入惡意代碼的方法。setInnerHTML 函數(shù)僅能在所有 A-grade 瀏覽器上規(guī)格化 <script> 標(biāo)簽的執(zhí)行行為。如果你準(zhǔn)備注入不能信任的 HTML 代碼,務(wù)必首先在服務(wù)器端過(guò)濾,已有許多庫(kù)可以做到這點(diǎn)。
相關(guān)文章
js getBoundingClientRect() 來(lái)獲取頁(yè)面元素的位置
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說(shuō)在獲得頁(yè)面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過(guò)循環(huán)來(lái)獲得元素在頁(yè)面中的絕對(duì)位置。2010-11-11
js實(shí)現(xiàn)可旋轉(zhuǎn)的立方體模型
這里給大家分享的是通過(guò)js腳本來(lái)控制頁(yè)面中的正方體轉(zhuǎn)動(dòng)特效,用戶(hù)可以點(diǎn)擊按鈕向右轉(zhuǎn)動(dòng),也可以向下轉(zhuǎn)動(dòng),結(jié)合自己的需求控制即可。效果非常棒,這里推薦給大家2016-10-10
js實(shí)現(xiàn)帶農(nóng)歷和八字等信息的日歷特效
本文主要介紹了js實(shí)現(xiàn)帶農(nóng)歷和八字等信息的日歷特效,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05
js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能(兼容所有瀏覽器)
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊復(fù)制當(dāng)前文本到剪貼板功能,兼容所有瀏覽器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12
SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法
這篇文章主要介紹了SWFUpload多文件上傳及文件個(gè)數(shù)限制的方法,較為詳細(xì)的分析了SWFUpload組件實(shí)現(xiàn)多文件上傳的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05
JavaScript中解析JSON數(shù)據(jù)的三種方法
這篇文章主要介紹了JavaScript中解析JSON數(shù)據(jù)的三種方法,本文講解了eval()方法、new Function方法、JSON.parse()方法等三種方法,需要的朋友可以參考下2015-07-07
js es6系列教程 - 基于new.target屬性與es5改造es6的類(lèi)語(yǔ)法
下面小編就為大家?guī)?lái)一篇js es6系列教程 - 基于new.target屬性與es5改造es6的類(lèi)語(yǔ)法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
js實(shí)現(xiàn)select組件的選擇輸入過(guò)濾代碼
如何實(shí)現(xiàn)select組件的選擇輸入過(guò)濾作用,下面有一段js代碼,很實(shí)用,需要的朋友可以看看2014-10-10
JS中new?Blob()詳解及blob轉(zhuǎn)file示例
這篇文章主要給大家介紹了關(guān)于JS中new?Blob()詳解及blob轉(zhuǎn)file的相關(guān)資料,Blob?Blob(Binary?Large?Object)表示二進(jìn)制類(lèi)型的大對(duì)象,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11

