토큰을 어디에 저장해야할까요?

 

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

토큰을 어디에 저장할까?

위 글을 공부한 내용입니다.

 

웹 서비스를 제공할 때 인증과 인가는 기본적으로 구현해야 하는 기능 중 하나입니다.

이를 구현하기 위해 쿠키/세션을 사용할 수도 있고 토큰을 이용할 수도 있습니다. 만약 토큰을 이용한다면 토큰을 어디에 저장해야할 지 생각해보아야합니다.

 

우선 쿠키와 세션에 대해 알아보도록 합시다.

 

쿠키

HTTP 통신의 Stateless(무상태성)을 보완해주기 위해 나온 것으로 서버가 클라이언트에 값을 저장하고, 읽을 수 있도록 해줍니다.

• 서버에서 접근할 수있고, 자동으로 요청에 포함된다는 점이 중요한 특성입니다.
• HttpOnly 설정을 추가한다면 클라이언트의 접근은 완전히 차단해서 해커가 자바스크립트 코드를 통해 정보를 탈취하는 것을 방지할 수 있습니다.

 

다음은 네이버에 들어갔을 때 Response Header 입니다. set-cookie를 통해 클라이언트에 쿠키를 설정하는 것을 볼 수 있습니다.

이들을 따로 설정하지 않아도 자동으로 다음 요청에 포함됩니다.

 

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

 

매우 작은 저장 공간(4KB)를 가지며 쿠키는 모두 일정 기간이 지나면 삭제 됩니다. 만료 시점을 기준으로 크게 두 가지로 나뉘며, 브라우저가 종료되면 삭제되는 session cookies와 지정된 만료일에 삭제되는 persistent cookies가 있습니다.

 

 

세션 스토리지

세션 스토리지는 session cookies와 비슷하다고 볼 수 있습니다. 세션을 위한 저장 공간이며 세션이 종료되면 모두 삭제 됩니다.

하지만 쿠키와 다르게 서버에서 접근할 수 없고, 클라이언트에서 스토리지 값을 꺼내서 서버에 전달해주어야합니다.

 

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

 

만약 여러 개의 탭을 사용하면 탭 별로 세션 스토리지를 사용합니다. 상당히 큰 저장 공간(5~10MB)를 가집니다.

 

 

로컬 스토리지

로컬 스토리지는 persistent cookies와 비슷하다고 볼 수 있습니다. 다만 쿠키는 만료기간이 지나면 삭제되지만 로컬 스토리지의 데이터는 반 영구적으로 저장가능합니다. 또한 서버에서 접근할 수 없기 때문에, 클라이언트 값에 접근해 서버에 전달하는 과정이 필요합니다. 

로컬 스토리지는 5MB의 저장공간을 가집니다.

 

 

어디에 저장해야하나?

보완적인 측면에서 웹 스토리지(로컬 스토리지 + 세션 스토리지)는 좋지 못하다고 할 수 있습니다. 웹 스토리지에 저장된 값은 JavaScript 코드를 통해 접근이 가능하고 이는 웹 사이트에 악의적인 스크립트를 넣어 의도치 않는 동작을 발생시키는 XSS(cross-site scripting) 공격에 취약합니다.

 

반면 쿠키에 저장한 값은 HttpOnly 속성을 통해 Javascript를 통한 접근을 막을 수 있습니다. 때문에 보완적 측면을 생각한다면 웹 스토리지보다는 쿠키에 저장하는 것이 좋다고 할 수 있습니다.

 

또한 커뮤니티에 질문한 결과도 위와 같은 이유로 쿠키에 저장하는 것이 좋다는 의견이였습니다.