[React] JWT 토큰 : 웹 저장소별 차이

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

JWT 인증은 서버가 상태를 갖지 않아 클라이언트 측에서 토큰을 저장하고 있어야 한다. 우리가 사용할 수 있는 저장소는 쿠키, 세션 스토리지, 로컬 스토리지가 있다. (기존에는 쿠키만 존재했으나 HTML5 들어 저장소 종류가 되었다.) 이 중 어떤 저장소에 JWT토큰을 저장해야 할까라는 고민을 시작으로 웹 저장소를 선택할 때 고려해야 할 점들은 무엇이고 이들의 차이점은 무엇인지 정리해보았다!

 

고려해야 할 점

✅ 얼마나 오래 보관할 것인가

저장소별 휘발성에 차이가 있다.

- 쿠키는 만료일을 지정하게 되어있고 만료일이 경과하면 삭제된다.

- 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거된다. 자동 로그인 등 브라우저를 열었을 때도 유지해야 하는 데이터는 보관하기 어렵다.

- 로컬 스토리지는 영구 저장소이다. 따로 지워주지 않으면 브라우저에 계속 남아있다. 중요한 정보를 넣어두면 위험하다.

 

✅ 얼마나 많은 정보를 보관할 것인가

저장소마다 보관 가능한 크기가 다르다.

- 쿠키는 개수와 용량에 제한이 있다. 최대 4KB이고 하나의 사이트에 최대 20개 쿠키만 가능하다.

- 로컬 스토리지는 5MB로 쿠키보다 더 많은 정보를 저장할 수 있다.

 

보안 위험 대비

토큰은 정당한 사용자 여부를 판단할 수 있는 도구이다. 공격자가 토큰을 탈취하여 정당한 사용자인 척 할 수도 있다는 것이다. 이런 위험을 최소화할 수 있는 저장소를 골라야 한다. 이 부분이 판단의 핵심이자 의견이 분분하다.

 

로컬스토리지는 JavaScript 코드를 통해 접근할 수 있어 XSS 공격에 취약하다. 쿠키도 JS를 통해 접근할 수는 있지만 서버에서 httpOnly 플래그를 설정하면 예방할 수 있다. 또한 쿠키가 모든 웹 요청에 함께 전송된다는 점이 취약할 수 있으나 쿠키를 만들 때 Secure flag를 설정하면 보안되지 않은 연결에서는 전송되지 않게 할 수 있다.

쿠키에 여러 옵션을 추가로 설정한다면 로컬스토리지의 취약점을 보완할 수 있다. 그러나 쿠키 역시 CSRF라는 공격에 취약하다고 한다. 다만 XSS 공격이 범위가 더 넓고 방어가 힘들기 때문에 쿠키에 저장하는 것을 권장한다는 의견들이 있다. 반대 의견도 많다. 각자의 판단이 필요할 것 같다. 

 

기타 트래픽 문제

모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. 다른 저장소는 저장된 데이터가 클라이언트에 존재할 뿐 매번 서버로 전송되지는 않는다. 이것은 네트워크 트래픽 비용과 연결된다.