security 를 사용한 프로젝트 작업 중 회원가입 시 아이디 중복 체크를 위해 ajax로 아이디값을 넘겨주는데 403에러 발생.
정확한 에러에 대한 내용도 나오지 않고 해서 검색해봤더니 403에러는 csrf문제라는것을 발견.
몇몇분들이 작성해두신 방법으로 해결하려 해봤으나 해결되지 않았고 혹시 기본 셋팅이 잘못된건가 해서
확인해봤지만 기본셋팅은 문제가 없었다.
그리고 한가지 이상한점이 인텔리제이로 ajax를 작성하다보면 success와 error가 다른 코드들이랑 다르게 노란색으로 변했었는데 안변하길래 봤더니 unused property라는 메세지가 나왔다.
이게 문제구나! 해서 찾아봤더니 stackOverflow에만 문의가 있고 작성을 잘못했을 때 발생하는 문제였다.
그리고 기능에는 영향을 주지 않는다는...ㅠㅠ
그래서 다시 돌아와서 403에러는 권한에 대한 문제가 대부분이라고 배웠기 때문에 컨트롤러에서
@PreAuthorize로 권한을 전체로 설정해봤지만 똑같은 에러가 발생했다.
안되겠다 싶어서 일단 csrf를 아예 사용하지 않는 쪽으로 먼저 설정하기로 했다.
<security:csrf disabled="true"/>security-context.xml에 이걸 추가해주면 csrf가 적용되지 않는다.
그리고나서 다시 테스트해보니 이번엔 400에러...
$(function(){
$("#IdCheck").click(function(){
var UserId ={
UserId : $("#userId").val(),
};
$.ajax({
url: "/member/checkUserId",
type: "post",
data: UserId,
success : function(data){
alert("data : " + data);
},
error : function(request, status, error){
alert("code:" + request.status + "\n"
+ "message : " + request.responseText
+ "\n" + "error : " +error);
}
});
}
})ajax에서는 이렇게 보내줘 놓고 컨트롤러에서 userId로 받음...... UserId로 다시 수정해서 받으니 에러 없이 잘 동작했다.
그럼 이제 csrf문제라는게 확실해진것이나 마찬가지라고 생각했고 미쳐 보지 않았던 다른 분들 해결방법을 찾아봤다.
<html>
<head>
<title>Title</title>
<meta name="_csrf" content="${_csrf.token}">
<meta name="_csrf_header" content="${_csrf.headerName}">
</head>var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(function(){
$("#IdCheck").click(function(){
var UserId ={
UserId : $("#userId").val(),
};
$.ajax({
url: "/member/checkUserId",
type: "post",
data: UserId,
beforeSend : function(xhr){
xhr.setRequestHeader(header, token);
},
success : function(data){
alert("data : " + data);
},
error : function(request, status, error){
alert("code:" + request.status + "\n"
+ "message : " + request.responseText
+ "\n" + "error : " +error);
}
});
})
});이렇게 해결.
JSP head부분에 token과 headerName을 작성해주고 JS파일에도 추가해줘야 한다고 한다.
그리고 ajax에서는 데이터를 전송하기 전에 HTTP Header를 SET 해줘야 한다.
이렇게 csrf값을 설정한 뒤에 데이터를 보내야 403에러가 발생하지 않고 정상적으로 동작할 수 있다.
특정 URL을 CSRF 토큰 없이 접근할 수 있도록 설정할 수 있다고 하는데 이방법은 다 해결되지 않았다.
몇몇 예제들 보고 따라하긴 했는데 생략된 부분들이 많은 예제들이어서 그런지 해결할 수 없었다.
부분 해제하는건 더 공부해야 할듯 ㅠ
레퍼런스
'Project&문제해결' 카테고리의 다른 글
| Naver SmartEditor2 X-frame 문제(Spring security) (0) | 2021.09.21 |
|---|---|
| ajax 415 에러 해결 (0) | 2021.06.10 |
| Lombok 대소문자 문제해결 (0) | 2021.05.28 |
| pagination중 type, keyword 값 오류 (0) | 2021.04.16 |
| Invalid bound statement (not found) 에러 (0) | 2020.12.23 |