innerHTML 的一些问题
作者:blank 来源:怿飞博客 发布时间:2008-06-17 17:39:00
innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题:
当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>…</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。
设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。
还有几个其他次要的缺点,也值得一提的:
你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。
你不能在所有浏览器的所有 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 代码,务必首先在服务器端过滤,已有许多库可以做到这点。
猜你喜欢
- 一,啥是Block Formatting Context当涉及到可视化布局的时候,Block Formatting Context提供了一个
- 有时候我不需要网络立即执行更改的数据。请问如何做到? 用下列办法即可延时执行:<%@import&
- 此文主要讲述的是SQL Server连接中经常出现的3个常见错误,以及对这三个错误的详细分析,如果你其心存好奇的话,以下的文章将会揭开它的神
- 有一台windows服务器上跑着mysql的一些应用,现在需要将mysql的数据每天备份,并通过ftp上传到指定的存储服务器上要是在linu
- 我们先看一下JavaScript中关系运算符的类型转换规则:关系运算符(<、>、<=、>=) 试图将 express
- 过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式,涌现了很多与之相关的技术与理论资料,其中相当重要的一个领域就是关于印刷中字号和行高的
- J2ME是利用HttpConnection建立HTTP连接,然后获取数据,ASP也是利用HTTP协议,因而可以利用J2ME与ASP建立连接,
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 本文详细介绍了asp中如何使用sql语句删除数据库中的记录,初学asp者来看看!1,首先要明确删除哪条记录无非还就是SQL语句了,比如对应到
- 前两天有一位网友问我一个关于Javascript中++操作符的问题,他的代码大致是这样的ADS.addEvent(window,'c
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.TweenMooToo
- 1.建立Recordset对象Dim objMyRstSet objMyRst=Server.CreateObject(&ldquo
- 翻译:ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特
- 数据库系统的安全性包括很多方面。由于很多情况下,数据库服务器容许客户机从网络上连接,因此客户机连接的安全对MySQL数据库安全有很重要的影响
- 最近Google Code推出了一个面向网站开发者的 * Google DocType。它来自于网站开发者同时又面
- 这只是个asp小技巧类的东西,它虽然适合在每个不同文件名里调用这个函数,但是也是有前提的,下面让我们来仔细看看其中的原委。 &n
- 其实不光是上面描述的情况会锁住表,还有很多种场景会使表放生死锁,解锁其实很简单,下面用一个示例来讲解: 1 首先创建一个测试用的表: 代码如
- 代码如下:<% myDSN="DSN=xur;uid=xur;pwd=xur"mySQL="s
- 写好脚本,注册好服务之后,经测试,ORACLE可以随RHEL启动而启动,但不能随系统关闭而关闭。在网上找答案,发现几乎所有的设置过程帖子都是
- 在数据库开发方面,通过单表所表现的实现,有时候需要组合查询来找到我们需要的记录集,这时候我们就会用到连接查询。连接查询主要包括以下几个方面: