Ajax POST에서 데이터를 보내려고 할 때 작동하지 않을 때

큰 도움이되었습니다.
ajax의 POST 전송으로 403이 반환되는 경우 해결 방법

환경



spring boot
spring security
thymeleaf

SpringSecurity를 ​​사용할 때 CSRF 토큰 필요



SpringSecurity를 ​​사용하여 로그인 기능을 만들면 전체 애플리케이션에서 CSRF 대책이 활성화됩니다.

매우 간단하게 말하면,
POSTメソッドを使うときは、入力データだけじゃなくてCSRFトークンも送らないとアクセス禁止になる!

th:action에서 토큰이 자동으로 삽입됨



참고

Ajax가 아니고 보통 form로 화면 전환하는 경우,
<form th:action="@{hoge}" method="post">

</form>

같이 쓰면
<form action="/login" method="post">
    <!-- Spring MVCの機能と連携して出力されたCSRFトークン値のhidden項目 -->
    <input type="hidden"
        name="_csrf" value="63845086-6b57-4261-8440-97a3c6fa6b99" />
    <!-- omitted -->
</form>


슈퍼 편리! !

하지만 Ajax 때는 자동으로 생성되지 않고 Forbidden이 돌아온다.



chrome의 개발자 도구에서 헤더를 확인해 보면,



403 상태 코드. 액세스하면 아칸이라고 말해진다.

내가 그렇다고 말하는데!

SpringSecurity가 마음대로 "그렇다고 CSRF 토큰 없기 때문에 아키마 헷"이란 열심히 되겠습니다.

CSRF 토큰을 수동으로 Ajax 헤더에 설정



// htmlファイルの最後にCSRFをセット
// ちょっと変な場所
</body>
<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
</html>
</body> 의 직전이면 에러가 됩니다.

조금 이상한 장소이지만 여기가 아니라면 좋지 않았습니다.
<head> 안에 쓰면 읽히지 않습니다.

템플릿 엔진을 사용하고 있는 경우, layout 파일에 다음과 같이 쓰고 있는 경우는, 별도의 html 파일에 meta를 삽입해도 읽히지 않는다
<head xmlns:th="http://www.thymeleaf.org"
    th:fragment="base_header(title, scripts, links)">


base_header(title, scripts, links)이 부분에서는 별도의 파일로 <head>title
script
링크
읽을 수 있습니다.



meta 없음 → head에 meta를 추가해도 CSRF 토큰을 설정할 수 없다

post에서 403이 반환되면 CSRF 토큰이 전송되었는지 확인합시다!



이것 정말 초보이겠지만.

이것으로 하루 종일 걸렸습니다. . .

좋은 웹페이지 즐겨찾기