然而，你需要知道 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 寫了一個(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)。

最新評(píng)論