[WEB] JWT를 어디에 보관해야할까
저번 포스팅에서는 JWT에 대해서 알아보았습니다.
https://ssungkang.tistory.com/entry/WEB-Authentication-2-JWT
[WEB] Authentication (2) JWT
저번 포스팅에 이어 이번엔 인증하는 두 번째 방법, JWT에 대해서 알아보겠습니다. [WEB] Authentication (1) 세션과 쿠키 [WEB] Authentication (1) 세션과 쿠키 Authentication 우선 Authentication 이 뭔지부터..
ssungkang.tistory.com
JWT를 결국 클라이언트가 보관해야하는데 그 보관을 어디서 할 것인가에 대해 알아봅시다.
이번 포스팅은 웹 어플리케이션을 기준으로 이야기 하겠습니다.
Web Storage
Web Storage 은 HTML5부터 지원되는 기술로 브라우저에 데이터를 저장할 수 있는 방법입니다.
Web Storage 는 session storage와 local storage로 구분됩니다.
sessionStorage
sessionStorage는 각 세션마다 데이터가 개별적으로 저장됩니다.
즉 여러 개의 탭을 실행 중이면 각 탭 별로 따로 데이터가 저장됩니다.
이 때 세션이 다르면 다른 세션의 sessionStorage에 접근할 수 없습니다.
sessionStorage에 데이터를 저장하고 가져오는 방법은 아래와 같습니다.
sessionStorage.setItem('myCat', 'Tom');
var myCat = sessionStorage.getItem('myCat');
localStorage
localStorage는 브라우저에 반영구적으로 저장됩니다.
브라우저를 종료해도 데이터가 유지되며 도메인 기준으로 저장을 합니다.
A.com에서 B.com에 저장한 데이터를 접근할 수 없습니다.
localStorage에 데이터를 저장하고 가져오는 방법은 아래와 같습니다.
localStorage.setItem('myCat', 'Tom');
var myCat = localStorage.getItem('myCat');
두 방법 모두 javascript를 통해 쉽게 sotrage에 접근이 가능합니다.
쉽게 접근할 수 있다는 것은 장점이나 단점입니다.
XSS 공격에 취약해지기 때문에 보안 상의 문제가 발생합니다.
용량은 5MB로 cookies에 비해 여유롭습니다.
Cookies
Cookies 는 예전부터 많이 사용하던 기술로 기본적인 개념은 아래 링크에서 확인할 수 있습니다.
[WEB] Authentication (1) 세션과 쿠키
Authentication 우선 Authentication 이 뭔지부터 알아봅시다. 여러분이 어떤 서비스를 이용할 때, 아이디와 비밀번호를 입력하고 로그인을 한 경험이 있으실 겁니다. 이것이 바로 여러분이 서버로 부터
ssungkang.tistory.com
Cookies 는 용량이 4KB로 Web Storage 에 비해 매우 작습니다.
하지만 Cookies 는 HttpOnly 옵션이 있습니다.
해당 옵션을 통해 자바스크립트를 통한 Cookies 접근을 막아 XSS 공격을 방지 할 수 있습니다.
또한 Secure 옵션을 통해 HTTPS로만 쿠키가 통신되도록 하여 보안을 더 높여 줄 수 있습니다.
하지만 CSRF 공격에는 취약합니다.
결론
두 가지 방법 모두 장단점이 있지만 결국 인증을 위한 JWT를 저장하는데 있어서 가장 중요한 부분은 보안입니다.
Cookies 에 저장하고 위에서 설명한 여러 옵션을 적용하여 보안을 강화할 수 있습니다.
비록 CSRF 공격에는 취약하지만 이 역시 CSRF TOKEN을 사용하여 보안을 강화할 수 있으므로 Cookies 에 저장하는 방법이 더 좋다고 생각합니다.