源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-02-28 02:27 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js innerHTML 的一些问题的解决方法
然而,你需要知道 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 代码,务必首先在服务器端过滤,已有许多库可以做到这点。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部