LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

innerHTML 的一些问题

admin
2010年8月13日 18:51 本文热度 4603

innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题:



  1. 当 HTML 字符串包含一个标记为 defer 的 script 标签(

    )时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。

  2. 设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。

还有几个其他次要的缺点,也值得一提的:



  1. 你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。

  2. 你不能在所有浏览器的所有 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 浏览器上规格化


该文章在 2010/8/13 18:51:58 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved