첨부 된 모든 이벤트 처리기 전에 모든 양식 제출 이벤트 수신 및 기능 수행

Question

기존 대형 웹 응용 프로그램에서 CSRF 공격을 막으려고합니다. JS를 사용하여 모든 양식에 주입되는 토큰과 요청을 계속 진행하기 전에 존재 여부를 확인하는 Java Servlet 필터를 선택했습니다. 첫째, 우리는 사용자가 JS를 갖도록 요구합니다.

둘째 - 어떻게해야합니까?

가장 간단한 아이디어 인 $(document).live("submit", myTokenAddFn);이 작동하지 않습니다. 말했듯

토큰 주입 부는, 사람이 매우 까다 증명, 웹 애플리케이션이 교차하는 다리의 개수가 매우 크고, (JS를 사용하여) 생성 된 형태가있다

• 페이지가로드 된 후
• 우리는 JSF의 사용
• 이 AJAX를 사용하여 제출 jQuery를 양식의 인스턴스가 있습니다
(온 클릭 앵커 태그에 속성 한 형태의 제출) 할
• 제출 양식에 첨부의 onclick 핸들러의 많음이있다 이미 요소가 있습니다

매우 가까이에 있지만 느린 브라우저에서 성능에 영향을 미치지 않는다고 생각합니다. 나는 더 나은 방법이있을 것이라고 생각하기 시작했습니다.

은 내가 무슨 짓을 :

• jQuery를 AJAX 양식 제출을 극복하기 위해 :를 실제 데이터 값에 내 토큰을 추가하기 위해 ajaxSend 방법을 사용하여 AJAX 요청에
를 보내기 전에 페이지로드시 페이지에있는 간단한 양식 요소에 토큰을 추가하십시오. 페이지에서 효과적으로 양식을 순환하여 토큰을 추가 한 다음이 양식에 토큰이있는 jQuery data을 추가하십시오 (성능 향상을 위해). f 다음 단계)
• 동적으로 생성 된 양식을 극복하기 : $("input[type='submit'],input[type='image'],button,a[onclick]").live("mousedown", myTokenAddFn); 위의 라인은 많은 부분을 다룹니다. 'myTokenAddFn'은 실제로 페이지를 반복하여 다시 추가 한 jQuery 데이터 항목이없는 모든 양식을 찾습니다 페이지로드. 앵커 태그의 onclick 속성과 함께 제출되는 JSF 양식, 양식에 존재하지 않지만 양식을 제출하고 다른 onclick 처리기가 양식을 제출하기 전에 토큰이 항상 추가되도록 단추를 처리합니다 (존재할 수 있음).).

최신 이슈 :

JS 형태 동적 페이지에 추가하고, 사용자가 커서가 텍스트 입력 필드에있을 때 키를 입력하여 제출한다. 사용자 (Java Servlet 덕분에)가 로그 아웃됩니다.

가장 쉬운 해결 방법은 모든 입력 요소에 키 누르기 리스너를 포함시키는 것이지만 여기서는 성능에 문제가 있습니다.

제안 사항? 새로운 출발을위한 아이디어?

미리 감사드립니다.

Answer 1

간단히 말해서 이벤트를 document으로 바인딩하고 있지만 라이브 수신인을 "form"으로 바인딩하면 모든 양식 태그를 선택할 수 있습니다. 또한 이벤트 리스너에서 e.preventDefault()을 추가하십시오. 좋아요 :

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

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

위 양식을 이전에 양식에서 작성 했으므로 제대로 작동하는 것 같습니다. 희망이 트릭을 않습니다!

편집 : 저는 이것이 실제로 실제로 작동하는지 확인하고 싶습니다. so here's a quick example. 보시다시피 google.com에 대한 제출을 차단하고 '아니요'로 깜박입니다. 제출이 차단되었음을 보여줍니다.

Answer 2

HTML 구조를 너무 많이 사용하는 대신 다른 접근 방식을 만들었습니다. 페이지가 언로드되기 전에 쿠키를 설정하고 서버 쪽에서 쿠키의 존재 여부 및 유효성을 검사합니다. 최신의 jQuery 버전

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

Answer 3

:

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

참조 :

jQuery를 최신 버전으로

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

하지만, 데이터 바이 패스를 형성에 양식 제출을 허용

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

Addy Osmani가 하이재킹 앵커 태그를 처리하는 방법을 살펴보십시오.