innerHTML應用

blank的blog：http://www.planabc.net/

innerHTML 屬性的使用非常流行，因為他提供了簡單的方法完全替代一個HTML 元素的內容。另外一個方法是使用DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用innerHTML 修改DOM tree 是非常容易且有效的方法。然而，你需要知道innerHTML 有一些自身的問題：

當HTML 字符串包含一個標記為defer 的script 標籤（<script defer>…</script>）時，如innerHTML 屬性處理不當，在Internet Explorer 上會引起腳本注入攻擊。 設置innerHTML 將會破壞現有的已註冊了事件處理函數的HTML 元素，會在某些瀏覽器上引起內存洩露的潛在危險。

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

你不能得到剛剛創建的元素的引用，需要你手動添加代碼才能取得那些引用（使用DOM APIs）。 你不能在所有瀏覽器的所有HTML 元素上設置innerHTML 屬性（比如，Internet Explorer 不允許你在表格的行元素上設置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》