로그인 토큰 저장

실전 프로젝트를 시작하면서 유저의 로그인에서 어떻게 하면 토큰을 관리할 수 있을까?라는 의문이 들었고, 내가 찾아보고 선택한 방법에 대해서 적어본다.

 

---

 

웹 클라이언트에서 무언가를 저장하기 위해 사용하는 공간은 크게 쿠키와

웹 스토리지로 나눌 수 있다. 그리고 웹 스토리지는 다시 세션 스토리지와 로컬 스토리지로 나뉜다. 이는 개발자 도구에서 쉽게 확인할 수 있다.

 

이중 로그인 성공시 토큰을 어디에 저장해야 적절한지 알아보기 위해 각각의 특성을 먼저 알아보도록 하자

 

쿠키

저장공간 (4KB)

백엔드에서 로그인이 성공되면 access token을 http header에 넣어 로그인에 대한 응답을 보내고, 브라우저에서는 이 응답 헤더에 존재하는 쿠키를 브라우저에 저장하여 사용 

 

쿠키를 사용할 때에도 보안 이슈가 있다. CSRF로 해킹이 가능한데, 이는 이용자의 쿠키값이 요청에 반영되는 것을 이용해서 특정 사이트로 가장한 유사 사이트에 접속을 유도하고, 쿠키값이 반영되어 있는 상태로 개인정보를 유출하게 하는 특정 요청을 보내게 된다.

 

Same-site정책으로 커버가 가능한데 아직 완전한 상태는 아니다. 그래도 로컬/세션 스토리지에 저장하는 것보다는 보안성이 좀 더 높다고 할 수 있다.

 

(HttpOnly 설정을 추가한다면 클라이언트의 접근을 완전히 차단해서 해커가 자바스크립트 코드를 통해 정보를 탈취하는 것을 방지할 수도 있다.)

 

만료 시점을 기준으로 크게 두 가지로 나뉜다.

브라우저가 종료되면 삭제되는 session cookies와 지정된 만료일에 삭제되는 persistent cookies가 있다.

 

세션 스토리지

저장공간 (5~10MB)

세션 스토리지는 session cookies와 비슷하다. 

말 그대로 세션을 위한 저장 공간이며 세션이 종료되면 모두 삭제된다. 쿠키와 다르게 서버에서 접근할 수 없기 때문에 클라이언트에서 스토리지의 값을 꺼내서 서버에 전달해주어야 한다.

 

로컬 스토리지

저장공간 (5MB)

로컬 스토리지는 persistent cookies와 비슷하다. 근데 쿠키는 만료기간이 지나면 삭제되지만 로컬 스토리지에 있는 데이터는 반영구적으로 저장이 가능하다. 

세션 스토리지와 마찬가지로 서버에서 접근할 수 없기 때문에 클라이언트에서 스토리지의 값을 꺼내서 서버에 전달해 주어야 한다.

 

그래서 어디 저장?

솔직히 보안이 크게 중요하지 않으면 로컬도 나쁘지 않은 거 같다. 반영구적이기도 하고, 다른 곳에 비해 많은 저장공간도 있기 때문이다.

하지만 보안에 신경을 써야 한다면 웹 스토리지(로컬 스토리지 + 세션 스토리지)는 좋지 못하다.

웹 스토리지에 저장된 값은 javascript 코드를 통해 언제든지 접근할 수 있는데 이는 웹 사이트에 악의적인 스크립트를 넣어 의도하지 않은 동작을 발생시키는 xss (cross-site scripting) 공격에 취약하다.

 

반면 쿠키는 앞에서 말했던 HttpOnly 속성을 통해 javascript를 통한 접근을 막을 수 있기 때문에 보안적인 측면은 쿠키가 더 나아 보인다. 

 

 

 

 

---

참고 링크

https://tecoble.techcourse.co.kr/post/2020-08-31-where_to_store_token/

토큰을 어디에 저장할까?