在所有其他附加事件處理程序之前，監聽所有表單提交事件並執行功能

Question

我正在嘗試在現有的大型Web應用程序中阻止CSRF攻擊。 我選擇了使用JS注入任何形式的令牌和Java Servlet過濾器，該過濾器將在允許請求繼續之前檢查其是否存在。 首先，我們很高興要求用戶擁有JS。

其次 - 我該怎么辦？

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

事實證明，令牌注入部分非常棘手，因為正如我所說的，Web應用程序非常大，並且存在許多橋梁：

• 頁面加載后會創建（使用JS）表單
• 我們使用JSF（在錨標簽上有onclick屬性來提交表單）
• 有一些使用AJAX提交jQuery表單的實例
• 已經有很多onclick處理程序附加到表單提交元素

我覺得我已經很接近了，但是我不敢相信我不會影響較慢瀏覽器的性能。 我開始認為可能有更好的方法。

我做了什么：

• 克服jQuery AJAX表單提交的問題：在發送AJAX請求之前，使用ajaxSend方法將我的令牌附加到真實數據值上
• 要將令牌添加到頁面加載頁面上的簡單表單元素：在頁面加載時有效地循環表單並添加令牌，然后添加jQuery 數據 ，表明此表單具有令牌（以提高下一步的性能）
• 要克服動態創建的表單： $("input[type='submit'],input[type='image'],button,a[onclick]").live("mousedown", myTokenAddFn); 上面的代碼處理了很多事情，“ myTokenAddFn”實際上只是循環遍歷頁面，查找所有沒有頁面加載時添加的jQuery數據項的表單。 它處理使用錨標記的onclick屬性提交的JSF表單，不包含在表單中但提交表單的按鈕，並確保在任何其他onclick處理程序提交表單（可能存在）之前始終添加令牌。

最新一期：

將JS表單動態添加到頁面，並且當光標位於輸入文本字段中時，用戶使用Enter鍵提交表單。 用戶（感謝我的Java Servlet）已注銷。

最簡單的解決方法是在所有輸入元素中包含按鍵偵聽器，但是這里的性能令人擔憂。

有什么建議么？ 重新開始的想法？

提前致謝。

Answer 1

使用更新版本的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如何處理劫持錨標簽。

Answer 2

在你的簡單想法中，你將事件綁定到document ，但我將實時監聽器綁定到"form" - 選擇所有表單標簽。 此外，在事件偵聽器中，只需添加e.preventDefault() 。 像這樣：

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

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

我以前在我的表單上完成了上面的方法，它似乎工作正常。 希望這可以解決問題！

編輯：我只是想確定這實際上是有效的， 所以這是一個簡單的例子 。 正如您所看到的，它阻止了向google.com的提交，並閃現了“不！” 顯示提交被阻止。

Answer 3

我沒有過多地使用HTML結構，而是創建了另一種方法。 在頁面卸載之前設置cookie，並檢查服務器端cookie的存在性和有效性。

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