javascript解除绑定dom事件

Question

我正在开发一个web框架，并试图在其中内置XSS预防功能。我已经对它进行了设置，这样它就可以避开传入的数据存储在数据库中，但有时你想要保存用户生成的html。我正在尝试制作一个自定义标记，它将阻止任何javascript执行，这是我的第一个技巧：

<html>
  <head>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
  </head>
  <body>

    <preventjs>
      <div id="user-content-area">
        <!-- evil user content -->
          <p onclick="alert('evil stuff');">I'm not evil, promise.</p>
          <p onmouseover="alert('evil stuff');">Neither am I.</p> 
        <!-- end user content -->
      </div>
    </preventjs>

    <script type="text/javascript">
      // <preventjs> tags are supposed to prevent any javascript events
      // but this does not unbined DOM events
      $("preventjs").find("*").unbind();
    </script>

  </body>
</html>

我尝试使用jQuery解除所有绑定，但它不能解除DOM中的事件绑定，这正是我要做的。是否可以解除DOM元素的所有事件的绑定？

Answer 1

您的问题是这样做是错误的--当您收到时，您应该过滤所有潜在恶意内容的用户输入。

这样做的第一个经验法则是“永远是白名单，永远不是黑名单”。不允许用户生成的HTML中的任何和所有属性，只需保留一个允许的属性列表，并在收到HTML时删除所有其他属性(可能在客户端--肯定在服务器端)。

哦，而且HTML不是一种常规的语言。对于此任务，您需要使用HTML解析器，而不是正则表达式。

Answer 2

.unbind将仅解除使用jQuery附加的事件的绑定。您可以通过将内联事件处理程序代码设置为null来摆脱它们，例如：

$("preventjs *").removeAttr("onclick").removeAttr("onmouseover");

编辑:这是一个邪恶的解决方案，你可以删除所有以“on”开头的属性：

$("preventjs *").each(function() {
    var attribs = this.attributes;
    var that = this;
    $.each(attribs, function(i, attrib) {
        if(attrib.name.indexOf("on") === 0) {
            $(that).removeAttr(attrib.name);
        }
    });
});

Answer 3

问题是你有内联的处理程序。unbind无法删除内联处理程序。

<p onclick="alert('evil stuff'...
   ^^^^

要删除内联处理程序，请使用removeAttr

$("preventjs").find("*").removeAttr('onclick');
$("preventjs").find("*").removeAttr('onmouseover');