JWT도대체 어디에 저장해야 할까?

졸업작품을 만드는데 로그인을 구현하면서 서버가 넘겨준 jwt토큰을 과연 어디에 저장하고 사용해야 jwt토큰의 장점을 살리면서 보안의 위협도 적어질까라는 고민으로 자료조사를 해보았다

그리 간단한 내용이 아니라는것을 깨닫고 이참에 처음부터 끝까지 정리해보자라는 마음으로 포스트를 업로드했다.

로그인 인증을 할 수 있는 방법인 쿠키/세션,jwt,jwt의 2가지토큰인 Access,refresh token을 업로드하고 보안상으로 문제가 될 수 있는 csrf,xss까지 정리해보았다.(webStorage도)

소셜미디어와 비슷한 성격을 지닌 저의 졸업작품 특성상 한번 로그인하면 로그인한 상태를 쭉 이어가야 했고 그렇다면 그 중 가장 좋은 방법인 refresh token을 과연 어디에 저장하고 사용 해야 가장 안전하면서 로그인한 상태를 유지할 수 있을까 

 

 

 

refresh token을 cookie에 저장하는 경우

 

(장점)

XSS공격으로 부터 localStorage에 비해 안전하다.

쿠키의 httpOnly 옵션을 사용하여 브라우저에서 쿠키를 접근 할 수 없게 만들어 주고 Secure 옵션을 사용하여 웹브라우저와 웹서버가 HTTPS로 통신하는 경우에만 웹브라우저가 쿠키를 서버로 전송.(httpOnly,Secure는 서버에서 설정)

즉 해커가 사용자의 쿠키를 탈취하기 위해 미리 악성 스크립트 파일을 심어 두어도(xss) 스크립트 파일에 해커가 적어둔 js코드로 쿠키에 접근 자체를 못함(그래도 공격하는 방법이 있다고 함...)

 

(단점)

CSRF 공격에 취약하다.

쿠키가 자동으로 http request에 담아서 보내기 때문에 공격자가 request url만 안다면 사용자가 관련 link를 클릭하도록 유도하여 request를 위조하기 쉽다.

-> 쿠키에 refresh token이 저장되어잇는 상태에서 서버와 통신을 하면 쿠키 특성상 계속 서버로 보내지기 때문에 해당 링크를 클릭하면 refresh toekn을 이용하여 accesstoken을 탈취해 개인 정보를 빼낼 수 잇음

 

 

refresh token을  localStorage에 저장하는경우

 

(장점)

CSRF 공격에는 안전하다.
자동으로 request에 담기는 쿠키와는 다르게 js 코드에 의해 헤더에 담기므로 공격자가 사용자인 척 request를 보내기 어려움

 

(단점)

XSS에 취약하다.

자바스크립트 접근이 너무쉬움

 

 

그렇다면 도대체 어디?

내가 조사 한 결과 가장 안전하다고 판단 되면서 jwt의 장점을 살릴 수 잇는 방법은 refresh token을 DB에 저장하는 것 이다.

로그인을 하면 서버에서는 access token을 클라이언트에 refresh token의 DB 인덱스값과 함께 보내주고

클라이언트에서는 값을 받아 access token은 클라이언트내에서(유효기간이 짧아 털려도 비교적 괜찮음... 물론털리면 안좋음..) 사용하고 인덱스값은 쿠키나 로컬스토리지에 저장하고 사용한다.

이때 인덱스값을 그냥 넣는것이 아니라 해시화를 진행해주어 보안을 조금 더 유리하게 만들어준다.

결국 refresh token을 클라이언트에서 관리하지 않고 access token만 관리하는 방법을 선택했다.

클라이언트에서 직접 토큰을 관리해 서버 부하를 줄여주자는 jwt의 원래 성격과는 조금 거리가 있으나 보안상 이점도 챙겨면서 세션 방식을 사용한것 보단 서버의 부하를 줄여주는 위의 방법이 그나마 제일 난것같다.

 

 

다른 옵션

refresh token을 쿠키에 저장하고 사용하는 방법이다 쿠키에는 Secure,HTTPOnly,Same-Site 등 여러 보안 옵션이 있어 비교적 안전하다고 생각되어 사용하는것 같다.

그럼에도 클라이언트에서 중요한 정보를 다루기에는 여전히 많은 문제가 있고 추후 똑똑한 사람들이 좋은 라이브러리를 만들어 주어 해결 할때 까지 존버하자...

 

마치며

로그인을 구현하는데 생각보다 복잡한 문제들이 껴 있었고 나는 하나씩 그 문제들을 찾아가며 정리하다 보니 생각보다 오랜시간을 잡아 먹었다.

본인 프로젝트의 특성을 고려하여 UX가 중요한 문제인지 보안이 더 중요한 문제인지를 판단하고 어떤 방법을 사용할 지 결정해야 하는것 같다. 

다음으로는 실제 프로젝트에 직접 적용해보고 포스트를 작성하겠다...

 

참고자료

https://doogle.link/jwt-%ED%98%B9%EC%9D%80-oauth2-%EC%9D%98-refresh-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%96%B4%EB%94%94%EB%8B%A4-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C/

 

JWT 혹은 OAuth2 의 refresh 토큰을 어디다 저장해야 할까? | 두글 블로그

요즘 네이버로그인, 카카오 로그인이나 구글 로그인등등 소셜 미디어(Social media) 사용자 로그인 처리를 하다보니 로그인된 상태가 끊임없이 유지되는 것을 구현해야 되더군요. 그러려면 결국 리

doogle.link

https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie#1-jwt

 

JWT는 어디에 저장해야할까? - localStorage vs cookie

이번에 지하철 미션을 만들면서 JWT를 클래스 property에 저장했었는데 리뷰어 분께 해당 부분을 피드백 받으면서 어디에 JWT를 저장하는 것이 좋을까 에 대해 고민해보게 되었다. 0. 기본 지식 JWT Js

velog.io

 

'Web' 카테고리의 다른 글

Cookie/WebStorage (Local/Session Storage)차이  (0) 2021.08.03
Refresh/Access Token  (0) 2021.08.02
JWT  (0) 2021.08.02
CSRF  (0) 2021.08.02
XSS  (0) 2021.07.30

+ Recent posts