Jwt Token 저장소에 대해

프로젝트를 진행하면서, JWT 토큰을 이용하여 로그인단을 구현하는 일이 대부분이었다. 

그 때마다 공통적으로 나오는 질문이 있었는데, "토큰은 어디에 저장하는게 좋을까?"였다.

찾아보니, Local/Session Storage와 Cookie에 저장하는 2가지 방법이 존재했다.

두 가지 모두 Session저장소처럼 사용자의 인증 상태를 별도 저장소로 유지할 필요가 없는 무상태성을 띔

당시에는 모두가 Cookie를 사용했기 때문에 의식없이 이를 사용했지만, 그 이유를 알아봐야할 것 같아 포스트를 작성하게 됐다.

 

---

Web Storage

web storage 는 HTML5 부터 지원되는 기술로 클라이언트(브라우저)에 데이터를 저장할 수 있는 방법이다.

Local/Session Storage가 있는데, Session Storage는 브라우저 창이 꺼지면 데이터가 삭제 된다는 차이점이 있다.

var access_token = response.data;  
localStorage.setItem("access_token",access_token);

web storage는 자바스크립트로 값을 쉽게 저장하고 가져올 수 있기 때문에 편리하다.

하지만, 자바스크립트로 제어 가능하다는 것은 곧 XSS(cross-site scripting) 공격에 취약하다는 것이다. 

* XSS :  해커가 JS 코드를 웹에 심어 사용자의 정보를 탈취하는 공격

 

---

 

Cookies

사용자 인증을 하게 되면 서버측에서는 이를 HTTP Set-Cookie 헤더를 통해서 토큰을 보낸다.

브라우저는 이를 통해서 쿠키를 생성하고 토큰을 저장한다. 이후에 해당 API 에 요청을 하게 될때에는 브라우저는 자동으로 이 쿠키를 실어서 보낸다.

쿠키는 자바스크립트로 조작이 가능하지만 옵션 설정을 하면 이를 막을 수 있다는 점이 큰 차이점이다.

1. HttpOnly

쿠키 생성 시, 이 옵션을 주게 되면 쿠키는 JS로의 접근이 불가능하다. 오로지 HTTP 통신을 통해서만 쿠키가 전송된다. 그렇기 때문에 web storage 에서 발생할 수 있었던 XSS 공격에 대해 방어할 수 있다.

2. Secure

쿠키는 HTTPS 통신으로만 전송되기 때문에 보안 수준을 더 높일 수 있다.

But.... CSRF!!!

CSRF는 최근에 인증된 사용자가 웹 프로그램에서 원치 않는 행위를 하도록 한다.

CSURF 같은 라이브러리를 사용하면 예방할 수 있다.

 

 

---

[번외]
* 페이스북 / 구글 - 사용자가 로그인 했을 때 위치나 기기 고유 값, 아이피 등을 저장해두고 너무 다른 위치에서 로그인이 시도될 경우 자신이 맞는지 다시 확인시킵니다
* Refresh Token 같은 경우,  외부에 노출되지 않도록 관리해야 하므로 주로 DB에 저장

 

공부 후기 ...

1. 과연 나는 저 보안에 대해 대비하였는가 ? => 절대 No.. 저런 보안의 문제가 있었다는 것은 처음 안 사실...

2. 그렇다면, 저걸 해주는 것이 BackEnd의 역할인가? 보안도 공부해야하는 것인가....? => 역할인지는 찾아봐야 알겠지만, 보안에 대해서는 꾸준히 공부해주는 것이 좋다고 들었다...

3. Token의 만료시간과 Cookie의 만료시간을 함께 고려해야되는 불편함이 있었다는 글을 봤는데, 더 생각해봐야겠다.

 

 

---

swalloow.github.io/implement-jwt/

JWT를 구현하면서 마주치게 되는 고민들

lazyhoneyant.blogspot.com/2016/08/jwt.html

JWT 토큰은 어디에 저장하는게 좋을까?

lazyhoneyant.tistory.com/7

JWT 토큰은 어디에 저장하는게 좋을까?