ajax+post+csrf+spring+security

spring security에 csrf 설정을 한경우 ajax요청을 post로 하면 404가 발생한다. 

이를 해결하려면 spring security에서 발행한 csrf token을 ajax요청 header에 담아

보내면 된다.

 

1. 설정: 공통으로 모든 화면에 인클루드 되는 파일에 아래와 같이 설정.

예를 들면 head_css.jsp라는 파일을 만들고 모든 화면에 공통으로 로딩되도록 설정 후 아래 소스를 삽입한다.

<!-- ajax 요청시 사용할 csrf meta데이터 설정 -->
<meta id="_csrf" name="_csrf" content="${_csrf.token}"/>
<meta id="_csrf_header" name="_csrf_header" content="${_csrf.headerName}"/>

<script type="text/javascript">
// ajax 요청시 사용할 csrf 글로벌 변수설정
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
</script>

2. 사용:  js파일 또는 script에서 아래와 같이 사용.

function ajaxCsrfTest(){
    var params ={
        a : 'a'
        ,b : 'b'
    };

    $.ajax({
        type : "POST",
        url : ctx + "/front/saveTest",
        data : params,
        async: false,
        beforeSend : function(xhr){
            //ajax호출 중 처리
            //글로벌 변수로 설정한 csrf token 셋팅
            xhr.setRequestHeader(header,token);
        },
        success : function(data) {
            //ajax호출 성공시 후처리
        },
        error : function(request, status, error) {
            //ajax호출 실패시 후처리
        }
    });
}