blank的blog:http://www.planabc.net/
innerHTML 屬性的使用非常流行,因為他提供了簡單的方法完全替代一個HTML 元素的內容。另外一個方法是使用DOM Level 2 API(removeChild, createElement, appendChild)。但很顯然,使用innerHTML 修改DOM tree 是非常容易且有效的方法。然而,你需要知道innerHTML 有一些自身的問題:
還有幾個其他次要的缺點,也值得一提的:
我更關注與使用innerHTML 屬性相關的安全和內存問題。很顯然,這不是新問題,已經有能人圍繞這些中的某些問題想出了方法。
Douglas Crockford 寫了一個清除函數,該函數負責中止由於HTML 元素註冊事件處理函數引起的一些循環引用,並允許垃圾回收器(garbage collector)釋放與這些HTML 元素關聯的內存。
從HTML 字符串中移除script 標籤並不像看上去那麼容易。一個正則表達式可以達到預期效果,雖然很難知道是否覆蓋了所有的可能性。這裡是我的解決方案:
/<script[^>]*>[/S/s]*?<//script[^>]*>/ig
現在,讓我們將這兩種技術結合在到一個單獨的setInnerHTML 函數中,並將setInnerHTML 函數綁定到YUI 的YAHOO.util.Dom 上:
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string') {
return null;
}
// 中止循環引用
(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];
// 清除子節點
arguments.callee(c);
// 移除所有通過YUI的addListener註冊到元素上所有監聽程序
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// 從HTML字符串中移除script,並設置innerHTML屬性
el.innerHTML = html.replace(/<script[^>]*>[/S/s]*?<//script[^>]*>/ig, );
// 返回第一個子節點的引用
return el.firstChild;
};
如果此函數還應有其他任何內容或者在正則表達式中遺漏了什麼,請讓我知道。
很明顯,在網頁上還有很多其他注入惡意代碼的方法。 setInnerHTML 函數僅能在所有A-grade 瀏覽器上規格化<script> 標籤的執行行為。如果你準備註入不能信任的HTML 代碼,務必首先在服務器端過濾,已有許多庫可以做到這點。
原文:Julien Lecomte 的《The Problem With innerHTML》