[JWT] JWT(JSON Web Token)의 저장 위치 비교

JWT(JSON Web Token)는 JSON 형태의 토큰으로 클라이언트가 서버에 자원을 요청할 때 요청과 함께 전달하여 요청 권한을 증명할 수 있다. 서버가 토큰을 발급해주면, 브라우저에서 클라이언트/서버 간에 토큰을 전달하는 방식은 크게 두 가지로 나뉜다.

 

1. HTML5 Web Storage(LocalStorage 또는 SessionStorage)

2. Cookie

 

 HTML5 Web Storage 

 Cookie의 단점 

• 웹 브라우저에서 쿠키의 저장 한도는 약 4KB로 제한된다.
• 쿠키는 모든 HTTP 요청과 함께 전송되므로 웹 애플리케이션 성능이 저하된다.

 HTML5 Web Storage란 무엇인가? 

사용자가 key/value 쌍의 형태로 데이터를 유지할 수 있도록하는 간단한 클라이언트 측 데이터베이스이다.

로컬 저장소에 데이터를 검색/쓰기하는 매우 간단한 API가 있으며, 도메인당 최대 10MB의 데이터를 저장할 수 있다.  쿠키와 달리 저장된 데이터는 모든 HTTP 요청에 포함되지 않는다.

 

 HTML5 Web Storage 유형 

LocalStorage

만료 날짜 없이 데이터를 저장한다. 브라우저/탐색 탭을 닫거나 다시 열어도 데이터를 사용할 수 있다.

 

SessionStorage

한 세션에 대한 데이터를 저장한다. 유지된 데이터는 사용자가 브라우저를 닫는 즉시 지워진다.

 

두 유형 모두 Web Storage 데이터는 다른 브라우저 간에 사용할 수 없다.

 

 

 HTML5 Web Storage에 토큰 저장 

로그인 성공 시, 서버가 토큰을 응답 정보에 넣어서 전달하고,  해당 값을 Web Storage에 저장한다.

그 다음부터 웹 요청 시 마다 HTTP 헤더 값에 토큰을 넣어서 요청하는 방법이다. (주로 Authorization 헤더에 Bearer 스키마를 사용해서 보낸다.)

 

장점

• 구현하기 쉽다
• 하나의 도메인에 제한되지 않는다.

단점

• localStorage에 접근하면 바로 토큰에 접근할 수 있다.
• XSS 해킹 공격을 통해 해커의 악성 스크립트에 노출이 되는 경우 토큰 탈취가 가능하다. 
  • 해결방법 : 스크립트 등 해킹에 사용될 수 있는 코딩에 사용되는 입출력 값을 검증하고 무효화 시킨다.

 

 Cookie 

쿠키를 정보 전송수단으로 사용하는 것일 뿐, 쿠키를 사용한다고해서 세션을 관리하는 것은 아니다.

이 과정에서, 서버측에서 응답을 하면서 쿠키를 설정할 때 httpOnly 값을 활성화 해주면, 네트워크 통신 상에만 토큰 정보가 들어있는 쿠키가 붙게 된다. 따라서, 브라우저상에서는 자바스크립트로 토큰 값에 접근하는 것이 불가능해진다. (XSS 해킹 문제 해결)

 

장점

• XSS 해킹 문제를 해결 할 수 있다.
• Secure 옵션을 주면 쿠키가 HTTPS로만 전송되기 때문에 보안 수준을 높힐 수 있다.

단점

• 쿠키가 한정된 도메인에서만 사용이 된다. 
  • 해결방법 : 토큰이 필요해질 때 현재 쿠키에 있는 토큰을 사용하여 새 토큰을 문자열로 받아올 수 있게하는 API 구현
• CSRF 공격의 위험이 있다.
  • CSRF : 계정정보를 탈취하는 것은 아니지만, 스크립트를 통해서 사이트의 외부에서 사이트의 API를 사용하는 것처럼 모방하는 것이다.
  • 혹은 사이트 내부에서 스크립트가 실행되어 원하지 않는 작업이 수행되게 할 수도 있다.
  • CSRF 공격의 예제(스크립트에 노출되는 순간)
    • 유저도 모르는 사이 계정 탈퇴해버리기
    • 댓글, 포스트 자동 작성
    • 회원 정보 변경
  • 해결 방법 :
    • 특정함수에서만 API에 대한 HTTP 요청을 가능하게 제한한다.
    • HTTP Request Header의 Refer, Origin 체크한다.
    • CSRF 토큰을 사용한다.

 

참고자료:

HTML5 Web Storage - SitePoint

Daily Study Logging34 - JWT 토큰 저장위치 에 대하여