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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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 zip文件解压类代码
2009/12/02 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python中的自定义函数学习笔记
2014/09/23 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
机械电子工程专业自荐书
2014/06/10 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
升学宴学生致辞
2015/09/29 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
python 单机五子棋对战游戏
2022/04/28 Python