Spring & React.js Cookie 전달 오류

오성민·2022년 11월 17일
0

포트폴리오

목록 보기
4/4
post-thumbnail

개인 프로젝트를 진행하면서 권한에 따라 할 수 있는 부분을 나누기 위해서, JWT를 사용하여 인증, 인가를 구현하려고 하였다.

JWT를 저장하는 방법에는 보통 2가지가 존재한다고 한다.

  • localstorage : client browser에 저장
  • cookie : server와 client 간 정보를 교환하기 위한 매개체

이렇게 2가지 방법을 사용하는데, 2가지 다 보안적인 관점에서 봤을 때에는 굉장히 위험한 방법이라고 한다.
하지만 찾아봤을 때 2가지 방법 중에서 cookie를 이용한 방법을 많이 사용한다고 한다.
cookie를 이용해서 사용하는 테스트를 진행해봐야겠다.

PostMan을 이용한 test

가장 처음으로는 postman을 이용해서 테스트를 진행했다.

service 단에서 login 로직을 구성하고, 해당 로직을 거쳤을 때 반환하는 HttpStatusCode가 200번이라면 로그인이 성공한 것이다.
로그인을 성공하면 controller 단에서 cookie를 생성해서 "X-AUTH_TOKEN"이라는 key값으로 생성해서 보내준다.

결과는


이렇게 정상적으로 값도 반환이 되었고, cookie도 확인이 된다.

Spring & React Cross-Domain

spring과 react를 local 환경에서 진행하다보니 포트번호가 달라서 다른 주소로 통신을 하는게 되었다.

나는 당연히 postman에서 확인이 되었으니 그냥 될 줄 알았다.
하지만..

아무리 확인을 해도 값이 넘어오지 않는다.
console창으로 확인했을 때 로그인도 성공하였고, message도 정상적으로 넘어오지만 cookie 값이 정상적으로 저장되지 않았다.


이렇게 테스트를 위한 쿠키 값도 request header에 잘 들어있지만, 저장은 안 됐다.

엄청 삽질을 하면서 구글링을 해보니 보안 정책에 의해서 다른 주소에서 오는 쿠키를 그냥 저장하지 않는다.
credential기반으로 통신을 해야지 정상적으로 cookie 값을 저장할 수 있다고 한다.

spring security는 credential 기반의 인증을 한다고 한다. 그렇기 때문에 server에서 취해줄 조치는 없었다.

하지만 client에서는 조치를 취해주지 않아서 저장이 안 된 것 같다.

사용한 것은 React, jquery이다.

나는 jquery를 이용해서 ajax를 사용해서 이렇게 했는데, axios를 사용하면 요청마다 계속해서 저렇게 설정을 해주는 것이 아닌 한 번에 하는 방법이 있다고 한다.
하지만 jquery를 이용한 ajax는 방법을 찾지 못해서 이렇게 해주었다.

위처럼 설정을 하고 로그인을 요청하니

값이 정상적으로 저장되었다.

값을 저장했고, 로그인을 계속해서 하지 않으려면 저장된 cookie 값을 가져와서 인증, 인가를 시행해야한다.
그렇게 하기 위해서는 server에서 client cookie 값을 가져와야한다.

@CookieValue 라는 annotation을 사용해서 가져올 수 있다.
사용법으로는 2가지가 있는데

  • @CookieValue Type CookieKey값
  • @CookieValue("CookieKey값") Type 변수명

이렇게 2가지가 있다.
나는 1번째가 좀 더 직관적이여서 사용하였다.

앞으로는 꼭 까먹지말고 삽질하지 말아야겠다..ㅠ

profile
풀스택을 지향하는 개발자

0개의 댓글