[jwt 안전하게 저장하기] 어떻게 저장해야 할까? 고민 상태 정리

현재 상태 :

 

바로 전에는 아래 글 그대로 구현하지 못했다.

이유는 백엔드 개발자님의 코드가 완성되지 않았기 때문이었다. 

일단 redux에 저장하고 상태를 유지하기 위해 redux-persist를 사용하였지만,

그것은 아래 글대로 구현한 방식이 아니었다. 

 

구현하려고 했던 방식 :

 

redux-persist를 사용하지 않고, refresh token은 cookie에 저장하여 

redux에 저장되어있는 access token이 날아가더라도 

refresh token이 유효한 한, refresh token으로 access token을 계속 재발급 받는 방식으로 

구현하려고 했던 것이다. 

 

문제점 : 

https://wha-haha.tistory.com/132

해당 방식의 문제 제기를 받았다. 

 

실무에 계신 백엔드 개발자님의 문제제기를 들어보면,

그렇게 구현한다면 계속 access token을 재발급 받아야 하는 일이 발생하므로,

서버와 통신을 많이 해야 하고, 결국 비용이 증가하게 될 것이라는 말이다. 

 

그래서 다시한번 안전하게 저장하며 비용이 그렇게 많이 들지 않는? 방식을 찾아보았다. 

 

 

 

벨로퍼트님에 의하면 

https://backend-intro.vlpt.us/4/

4장. JWT 이해 및 적용 · GitBook

 

쿠키는 httpOnly속성이 활성화된 쿠키에 담아서 구현을 한다면 CSRF공격은 차단할 수 있다고 한다. 

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

HTTP 쿠키 - HTTP | MDN

mdn에서는 쿠키를 안전하게 저장하는 방법에 대해 Secure과 HttpOnly 속성을 설정하는 방법을 제시한다. 

아직 구현해보지 않았지만, HttpOnly속성을 설정하는 것은 된다고 치더라도 Secure 속성은

그러나 지금은 개발단계이므로 http 도메인으로 사용할 수 밖에 없는데 

http 도메인은 안전하지 않은 사이트로 간주되어 Secure 속성을 설정할 수는 없다고 한다. 

실제 배포단계에서 사용해 보는 것으로 한다. 

 

 

 

그런데 또 다른 곳에서는

https://okky.kr/articles/1373965

OKKY - access token 메모리(변수)에 저장하여 사용하는 방법 여쭤봐요!

다시 refresh token을 cookie에 저장한다면 request 할 때마다 refresh token이 서버를 타고 다니는 것인데, 

이 방식은 재고려해볼 여지가 있다고 되어있다. 

그만큼 보안에 취약해질 수 있다는 말이겠다. 

 

현재까지의 결론 :

최선의 방법은 없을 것이다. 

그러나 지금까지 통용되어왔던 방식들이 있을 것이고, 

그것을 두루 사용을 많이 한다는 것은 아무래도 검증된 방식이라고 할 수 있겠다. 

일단은 두 가지 방식을 다 알아놓고, 계속 장단점을 지켜보며 조율해야 겠다. 

 

지금 채택한 방식은 일단은 다시 맨 위에 구현하려 했던 방식인,

memory에 access token을 저장하고 

cookie에 refresh token을 저장하기로 하자.

 

다만, 벨로퍼트 님 블로그를 참고하여

cookie는 HttpOnly값을 저장하여 네트워크 통신상에서만 해당 쿠키가 붙게 만들고, 

브라우저 상에서 자바스크립트로 토큰값에 접근하는 것을 불가능하게 하여 

CSRF의 공격을 차단하는 방식으로 진행하기로 한다.