개요
- 개인 프로젝트를 SSR로 진행하며, Spring Security를 사용할 때 간만에 CSRF 토큰을 활성화 하고자 하였다.
- 하지만 예전에 Ajax를 활용한 프로젝트를 할 때는 아래와 같이 헤더에 별도로 설정 안해도 바로 꺼내서 사용하곤 했었다.
JQuery Ajax 사용 시
let header = $("meta[name='_csrf_header']").attr('content');
let token = $("meta[name='_csrf']").attr('content');
$.ajax({
// 요청방식: post, 요청주소: /comment/create/question
// 요청데이터: 작성내용, 게시글번호, 비밀 댓글 여부, 부모 댓글 id
type: "post",
url: "/comment/create",
beforeSend: function (xhr) {
xhr.setRequestHeader(header, token);
},
data: {
"articleId": articleId,
"secret": secretValue,
"commentContents": contents
},
... 기타 정보문제점
- 그러면 JavaScript 사용할때도 똑같은거 아니야? 했지만 못꺼내온다.
- Chat GPT는 정말 헛소리 엄청 하다가, 역시 웹검색 돌리고 또 헛소리해도 혼내니까 다시 알려준다.
꺼내서 사용하기
Head 태그 안 meta data
- thymleaf 문법 사용하여 꺼내올 수 있다.
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSRF 메타태그를 실제 값으로 렌더링 -->
<meta th:name="'_csrf'" th:content="${_csrf.token}" />
<meta th:name="'_csrf_header'" th:content="${_csrf.headerName}" />
<!-- 기타 정보 생략... -->
</head>
- 룰루~!~! 드디어..
JavaScript 사용하기
// Vanilla JS로 CSRF 메타 태그를 꺼내되, 없으면 빈 문자열('')
const header = document
.querySelector("meta[name='_csrf_header']")
?.getAttribute("content")
?? "";
const token = document
.querySelector("meta[name='_csrf']")
?.getAttribute("content")
?? "";
// 1) 기본 헤더
const requestHeaders = {
'Content-Type': 'application/json'
};
// 2) CSRF 헤더가 유효하면 추가
if (header && token) {
requestHeaders[header] = token;
}
fetch(
url,
{
method: method,
headers: requestHeaders,
body: JSON.stringify(dataObj)
}
)- JavaScript에서 CSRF 토큰 꺼내서 API 요청 보내는거 구현중인 누군가에게 도움이 되길~!~!
비슷한 어려움을 겪는 누군가에게 도움이 되길