[TIL 1] 토큰은 어디에 저장해야 할까?

토큰이란?
로그인을 하거나 사이트를 이용할 때 사용되는 권리

왜 사용하나요?
사용자가 웹 서비스를 이용할 때 사용자에게 권한을 부여하거나 막아야할 때가 있습니다.
예를 들어 사용자마다의 장바구니, 위시리스트, 결제를 이용할 때 필요하게 됩니다.
이 때 사이트를 이용할 때마다 유저를 확인하는 api를 매번 실행하게 됩니다.
토큰은 한번만 부여하면 이 토큰으로 로그인된 유저에게 권한을 주는 역할을 하게 됩니다.

작동원리

1. 유저가 아이디와 비밀번호로 로그인을 합니다

2. 서버측에서 해당 계정정보로 검증합니다.

3. 계정정보가 정확하다면, 서버측에서 유저에게 signed 토큰을 발급해줍니다.

4. 클라이언트 측에서 잔달받은 토큰을 저장해두고, 서버에 요청을 할 때 마다, 해당 토큰을 함께 서버에 전달합니다.

5. 서버는 토큰을 검증하고, 요청에 응답합니다.

토큰이 저장되는 곳

1. COOKIE
2. WEB STORAGE
   • LOCAL STORAGE
   • SESSION STORAGE

COOKIE

• 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보
• 쿠키는 서버와 자신의 로컬 영역에 저장을 해두고 비교를 할때마다 쿠키용 api를 만들어 호출하는 방식
• 로그인이 성공할 경우 토큰에 해당하는 쿠키를 서버와 클라이언트에 생성하고 클라이언트는 토큰이 아닌 쿠키를 통해 서버에 요청을 합니다.

WEB STORAGE

• HTML5에서 쿠키의 단점을 보완해서 만든 기술
• key와 value 형태로 이루어져있습니다. 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장합니다.
• 쿠키와의 역할 자체에서는 크게 차이가 없습니다. 저장용량에서 차이가 있는데 쿠키는 4Kb, 로컬스토리지는 5Mb 정도까지 가능합니다. 가장 큰 차이점은 서버에 클라이언트에 대한 데이터를 저장하지 않습니다.
• 웹 스토리지는 자기 로컬영역에만 저장을 해두고 해당하는 key값에 해당하는 value값들을 비교 및 유지하는 형식

종류
LOCAL STORAGE

• 클라이언트에 대한 정보를 영구적으로 보관합니다.

SESSION STORAGE

• 세션이 종료(웹브라우저를 닫을 경우)되면 클라이언트에 대한 정보를 삭제합니다.
• 보안이 많이 필요할수록 세션스토리지를 쓰는 것이 좋습니다.

각 저장소의 장단점

cookie

• 웬만한 브라우져에는 지원이 다 된다
• api가 한번 더 호출되므로 서버에 부담, 용량이 작다
• CSRF, XSRF 공격으로 부터 취약하다

local storage

• 서버에 불필요하게 데이터 저장안함
• HTML4만 지원되는 브라어져라면 지원 x
• 특정 도메인으로 부터 격리되어 서브도메인과 같이 다른 도메인에서 접근이 불가능

session storage

• 장단점은 local storage와 동일, 단지 기능 차이