thymleaf post 요청시 csrf 자동 생성

• 문제 : HTML에서 스프링부트로 POST 요청을 form으로 보내서 별도의 CSRF 설정을 하지 않고 보내고자 함
• 예전에 수업때 배울때는 form 태그를 사용하면 csrf 내용을 안써도 분명 갔는데, 계속 못가는 문제를 확인

  <form method="POST">
                <input type="hidden" name="membershipId" th:value="${membership.id}">
                <div class="flex gap-2 justify-center">
                    <i class="fa-solid fa-circle-pause text-[3rem]" style="color: #7aabff;"></i>
                    <h2 class="card-title">일시정지 안내</h2>
                </div>
                <div class="flex items-center gap-2 mt-8">
                    <i class="fa-solid fa-user" style="color: #91c0fd;"></i>
                    <div class="flex items-center">
                        <p class="font-bold" th:text="${user.account.fullName}"></p>
                        <p>님</p>
                    </div>
                </div>
                <div class="mt-5">이용권 일시정지시 금일부터 이용이 제한됩니다.</div>
                <div class="flex mt-5">
                    <div>회원님의 남은 일수는</div>
                    <div class="font-bold" th:text="${afterDays}"></div>
                    <div>일입니다.</div>
                </div>
                <button class="btn btn-primary w-full mt-5" onclick="return confirm('일시정지 하시겠습니까?')">
                    <i class="fa-regular fa-circle-pause" style="color: #73a1f7;"></i>
                    일시정지하기
                </button>
            </form>

Post로 보내려 했으나, csrf 토큰이 없는 탓에 계속 403 에러

• 해결 : URL이 동일하더라도, th:action 태그를 적어주어 csrf 토큰 생성되도록 수정

  <form method="POST" th:action>

• 성공 ! 처리하고 redirect 하기로 해서 302코드!

• CSRF 토큰 활용
  • 스프링 시큐리티에서는 csrf 공격을 막기 위해 별도로 csrf옵션을 필터에서 끄지 않는 한 발행
  • 매 요청마다 csrf 토큰을 새롭게 발행 -> 클라이언트에서 서버로 요청을 보낼 시 csrf 토큰도 같이 보내서 검증 필요 -> 맞으면 요청 처리, 틀리면 요청 거부
  • 매 새로고침(요청) 마다 csrf token의 값은 달라짐.
  • Ajax로 보낼 시에는 헤더에 메타 데이터로 csrf 토큰값을 넣어두고, ajax 요청 보낼 때 포함시켜 보내야 함

• 참고 : 인프런 게시판