關於InnerHTML存在的問題

2022-03-24 08:52:36 字數 1455 閱讀 8232

當 html 字串包含乙個標記為 defer 的 script 標籤()時,如 innerhtml 屬性處理不當,在 internet explorer 上會引起指令碼注入攻擊。

設定 innerhtml 將會破壞現有的已註冊了事件處理函式的 html 元素,會在某些瀏覽器上引起記憶體洩露的潛在危險。

還有幾個其他次要的缺點,也值得一提的:

你不能得到剛剛建立的元素的引用,需要你手動新增**才能取得那些引用(使用 dom apis)。

你不能在所有瀏覽器的所有 html 元素上設定 innerhtml 屬性(比如,internet explorer 不允許你在**的行元素上設定innerhtml 屬性)。

我更關注與使用 innerhtml 屬性相關的安全和記憶體問題。很顯然,這不是新問題,已經有能人圍繞這些中的某些問題想出了方法。

douglas crockford

寫了乙個清除函式

,該函式負責中止由於 html 元素註冊事件處理函式引起的一些迴圈引用,並允許垃圾**器(garbage collector)釋放與這些 html 元素關聯的記憶體。

從 html 字串中移除 script 標籤並不像看上去那麼容易。乙個正規表示式可以達到預期效果,雖然很難知道是否覆蓋了所有的可能性。這裡是我的解決方案:

/

]*>[\s\s]*?<\

/script[

^>

]*>/ig

現在,讓我們將這兩種技術結合在到乙個單獨的 setinnerhtml 函式中,並將 setinnerhtml 函式繫結到 yui

的 yahoo.util.dom 上:

yahoo.util.dom.setinnerhtml 

=function

(el, html) 

//中止迴圈引用

(function

(o) }}

a =o.childnodes;

if(a) 

}})(el);

//從html字串中移除script,並設定innerhtml屬性

el.innerhtml 

=html.replace(

/]*>[\s\s]*?<\

/script[

^>

]*>

/ig, "");

//返回第乙個子節點的引用

return

el.firstchild;

};如果此函式還應有其他任何內容或者在正規表示式中遺漏了什麼,請讓我知道

。很明顯,在網頁上還有很多其他注入惡意**的方法。setinnerhtml 函式僅能在所有 a-grade 瀏覽器上規格化 標籤的執行行為。如果你準備注入不能信任的 html **,務必首先在伺服器端過濾,已有許多庫可以做到這點。

原文:julien lecomte

的 《the problem with innerhtml》

**:

紅寶書筆記 關於innerHTML的一點坑

之前寫 幻燈片 外掛程式的時候,在滾動要改變幻燈片位置的時候,發現怎麼對元素設定style都無效。六臉懵逼0 0。之前做頭像外掛程式的時候也出現過這種問題。不過那個是偶發的。現在還不知道為什麼。於是一直以為是style的設定有誤。後來不可置信的發現是innerhtml的問題。在建立每個的導航的時候,...

innerText和innerHtml的區別

innertext 跟innerhtml 是兩個非 dom標準的方法 其區別如圖所示 在ie中 innertext 跟 innerhtml 兩個方法都能正常執行 但是ff裡面的innertext不可用,但是有乙個替代方法 textcontent ie odiv.innertext astring o...

innerHTML與outerHTML的區別

1.innerhtml與outerhtml的區別 innerhtml 得出呼叫該方法的節點下的html 但不包括該節點本身的html outerhtml 得出呼叫該方法的節點及該節點下的html 一般的容器裡都有,可以參考msdn,比如這樣。有這樣的 some information 則window...