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


Posted in Javascript onJune 22, 2008

然而,你需要知道 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 代码,务必首先在服务器端过滤,已有许多库可以做到这点。

Javascript 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
很酷的javascript loading效果代码
Jun 18 #Javascript
豆瓣网的jquery代码实例
Jun 15 #Javascript
JQuery实现自定义对话框的代码
Jun 15 #Javascript
javascript基本语法分析说明
Jun 15 #Javascript
javascript新手语法小结
Jun 15 #Javascript
JavaScript入门学习书籍推荐
Jun 12 #Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 #Javascript
You might like
php学习 字符串课件
2008/06/15 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python内建模块struct实例详解
2018/02/02 Python
详解Python中的动态属性和特性
2018/04/07 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
用python做游戏的细节详解
2019/06/25 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python实现的发邮件功能示例
2019/09/11 Python
python实现批量文件重命名
2019/10/31 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
浅析NumPy 切片和索引
2020/09/02 Python
python3实现飞机大战
2020/11/29 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
迟到检讨书范文
2015/01/27 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
python manim实现排序算法动画示例
2022/08/14 Python