[WEB] JWT를 어디에 보관해야할까

저번 포스팅에서는 JWT에 대해서 알아보았습니다.

https://ssungkang.tistory.com/entry/WEB-Authentication-2-JWT

[WEB] Authentication (2) JWT

 

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 는 예전부터 많이 사용하던 기술로 기본적인 개념은 아래 링크에서 확인할 수 있습니다.

https://ssungkang.tistory.com/entry/WEB-Authentication-1-%EC%84%B8%EC%85%98%EA%B3%BC-%EC%BF%A0%ED%82%A4

[WEB] Authentication (1) 세션과 쿠키

 

Cookies 는 용량이 4KB로 Web Storage 에 비해 매우 작습니다.

하지만 Cookies 는 HttpOnly 옵션이 있습니다.

해당 옵션을 통해 자바스크립트를 통한 Cookies 접근을 막아 XSS 공격을 방지 할 수 있습니다.

또한 Secure 옵션을 통해 HTTPS로만 쿠키가 통신되도록 하여 보안을 더 높여 줄 수 있습니다.

하지만 CSRF 공격에는 취약합니다.

 

결론

두 가지 방법 모두 장단점이 있지만 결국 인증을 위한 JWT를 저장하는데 있어서 가장 중요한 부분은 보안입니다.

Cookies 에 저장하고 위에서 설명한 여러 옵션을 적용하여 보안을 강화할 수 있습니다.

비록 CSRF 공격에는 취약하지만 이 역시 CSRF TOKEN을 사용하여 보안을 강화할 수 있으므로 Cookies 에 저장하는 방법이 더 좋다고 생각합니다.