js innerHTML 的一些问题的解决方法_javascript技巧

然而,你需要知道 innerHTML 有一些自身的问题: 

1、当 HTML 字符串包含一个标记为 defer 的 script 标签(<script 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 浏览器上规格化 <script> 标签的执行行为。如果你准备注入不能信任的 HTML 代码,务必首先在服务器端过滤,已有许多库可以做到这点。

时间: 2016-06-22
Tags: innerhtml

js innerHTML 的一些问题的解决方法_javascript技巧的相关文章

基于bootstrap-datetimepicker.js不支持IE8的快速解决方法_javascript技巧

实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

Js,alert出现乱码问题的解决方法_javascript技巧

前些天还可以正常使用的js文件,在添加了一些东西后,其中的alert()弹出提示框总是中文乱码,在网上看了很多,给出的答案基本上是加一个<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 或者是将gb2312换成utf-8,我用多种方法测了很久还是没能解决这问题. 解决方法:最后终于在某个论坛的一个角落里发现了点东西,原来在html里面引用js文件时要指定字符集的编码

动态创建script在IE中缓存js文件时导致编码的解决方法_javascript技巧

先看下重现代码 1, gb2312.html 该文件编码为gb2312 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="gb2312"/> <style> p { color: red; } </style> </head> <body> <button onclic

js鼠标单击和双击事件冲突问题的快速解决方法_javascript技巧

情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

Web表单提交之disabled问题js解决方法_javascript技巧

本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

js实现运行代码需要刷新的解决方法_javascript技巧

现在大多网站都有"运行代码"的功能,搜索吧也很早就实现了这个功能,但最近在做一个项目时,发现有些需要刷新才能看到结果,自己摸索了下,其实解决方法很简单,看如下代码: function runCode(cod1) {      cod=document.getElementById(cod1)      var code=cod.innerText;      var newwin=window.open('','','');      newwin.opener = null;    

Javascript iframe交互并兼容各种浏览器的解决方法_javascript技巧

在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

FireFox下XML对象转化成字符串的解决方法_javascript技巧

解决方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xml转化成字符串</title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language=&qu

js实现仿百度瀑布流的方法_javascript技巧

本文实例讲述了js实现仿百度瀑布流的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>仿百度图片瀑布流</title> <link rel="stylesheet" type="text/css" href="style.css"&g