js innerHTML 的一些问题的解决方法

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

1、当HTML字符串包含一个标记为defer的script标签(<scriptdefer>…</script>)时,如innerHTML属性处理不当,在InternetExplorer上会引起脚本注入攻击。
2、设置innerHTML将会破坏现有的已注册了事件处理函数的HTML元素,会在某些浏览器上引起内存泄露的潜在危险。

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

1、你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用DOMAPIs)。
2、你不能在所有浏览器的所有HTML元素上设置innerHTML属性(比如,InternetExplorer不允许你在表格的行元素上设置innerHTML属性)。
我更关注与使用innerHTML属性相关的安全和内存问题。很显然,这不是新问题,已经有能人围绕这些中的某些问题想出了方法。

DouglasCrockford写了一个清除函数,该函数负责中止由于HTML元素注册事件处理函数引起的一些循环引用,并允许垃圾回收器(garbagecollector)释放与这些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||typeofhtml!=='string'){
returnnull;
}
//中止循环引用
(function(o){

vara=o.attributes,i,l,n,c;
if(a){
l=a.length;
for(i=0;i<l;i+=1){
n=a[i].name;
if(typeofo[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,"");

//返回第一个子节点的引用
returnel.firstChild;
};

如果此函数还应有其他任何内容或者在正则表达式中遗漏了什么,请让我知道。

很明显,在网页上还有很多其他注入恶意代码的方法。setInnerHTML函数仅能在所有A-grade浏览器上规格化<script>标签的执行行为。如果你准备注入不能信任的HTML代码,务必首先在服务器端过滤,已有许多库可以做到这点。