侦听所有表单提交事件并在任何其他附加事件处理程序之前执行函数

Question

我正在尝试防止现有大型网络应用程序中的 CSRF 攻击。我选择使用 JS 将令牌注入到任何表单中，并选择一个 Java Servlet 过滤器，该过滤器将在允许请求继续之前检查其存在。首先我们很高兴要求用户拥有 JS。

其次 - 我该怎么做？

最简单的想法：$(document).live("submit", myTokenAddFn); 不起作用。

令牌注入部分被证明非常棘手，因为正如我所说，Web 应用程序非常大，并且需要跨越许多桥梁：

• 页面加载后（使用 JS）创建一些表单
• 我们使用 JSF （它在锚标记上有 onclick 属性来提交表单）
• 有使用 AJAX 的 jQuery 表单提交实例
• 有很多 onclick 处理程序附加到表单提交元素已经

我觉得我非常接近，但我不敢相信我没有影响性能较慢浏览器。我开始认为可能有更好的方法。

我所做的：

• 要克服 jQuery AJAX 表单提交： 使用 ajaxSend 方法在发送 AJAX 请求之前将我的令牌附加到实际数据值
• 将令牌添加到页面加载时存在的页面上的简单表单元素： 在页面上有效地循环加载表单并添加令牌，然后添加 jQuery data 表示此表单具有令牌（以提高下一步的性能）
• 要克服动态创建的表单： $("input[type='submit'],input[type='image'],button,a[onclick]").live("mousedown", myTokenAddFn);< /代码> 上面的行处理了很多问题，“myTokenAddFn”实际上只是再次循环浏览页面，查找所有没有我在页面加载时添加的 jQuery 数据项的表单。 它处理使用锚标记的 onclick 属性提交的 JSF 表单、不驻留在表单中但提交表单的按钮，并确保始终在任何其他 onclick 处理程序提交表单（可能存在）之前添加令牌。

最新一期：

JS 表单动态添加到页面，用户在光标位于输入文本字段时使用 Enter 键提交它。用户（感谢我的 Java Servlet）已注销。

最简单的解决方法是将按键监听器包含到所有输入元素中，但这里的性能影响让我担心。

有什么建议吗？有重新开始的想法吗？

提前致谢。

Answer 1

在您的简单想法中，您将事件绑定到 document，但我将实时侦听器绑定到 "form" - 选择所有表单标签。另外，在事件监听器中，只需添加e.preventDefault()。就像这样：

$("form").live("submit", submitListener);

function submitListener(e) {
   // your handling stuff goes here
   e.preventDefault();
}

我之前在我的表单上完成了上述方法，它似乎工作得很好。希望这能起到作用！

编辑：我只是想确保这确实有效，所以这是一个简单的示例 。正如您所看到的，它会阻止向 google.com 的提交，并闪烁显示“不！”显示提交被阻止。

Answer 2

我没有过多地搞乱 HTML 结构，而是创建了另一种方法。在页面卸载之前设置cookie，并在服务器端检查cookie的存在性和有效性。

$(window).unload(function(){
    //30 seconds SHOULD be enough to connect to the server
    document.cookie = "crf=" + myTokenAddFn() + "; max-age=30";
});

Answer 3

使用较新版本的 jQuery：

$(document).on("submit", "form", function(e){ 
    e.preventDefault(); 
});  

使用较新版本的 jQuery，但允许在具有数据旁路的表单上提交表单：

$(document).on("submit", "form:not([data-bypass])", function(e){ 
    e.preventDefault(); 
}); 

参考：

http://addyosmani.github.io/backbone-fundamentals/

看看 Addy Osmani 如何处理劫持锚标记。