JWT를 어디에 저장할 것인가? LocalStorage vs 쿠키
date
Jan 26, 2025
slug
jwt-storage-localstorage-vs-cookie
author
status
Public
tags
React
summary
JWT를 어떻게 저장하느냐에 따라 애플리케이션의 보안성과 편의성이 크게 달라집니다. 이 글에서는 LocalStorage와 쿠키에 JWT를 저장해본 경험을 바탕으로 각각의 장단점과 주의할 점을 정리하고, XSS, CSRF 등 주요 공격에 대한 대응 방안을 설명합니다.
type
Post
thumbnail
category
💻 Frontend
updatedAt
May 25, 2025 10:00 AM
웹 개발을 하면서 사용자 인증 및 권한 관리를 위해 JWT를 사용하곤 합니다. 그러나 JWT를 어떻게 저장하고 사용하는 것이 가장 안전하고 효율적인지에 대해 많은 고민을 했습니다. 이번 글에서는 제가 사용해본 두 가지 저장 방식과 각각의 장단점, 그리고 보안 이슈에 대해 정리해보려 합니다.
1. LocalStorage에 저장
선택한 이유
LocalStorage는 브라우저에서 제공하는 간단한 키-값 저장소로, 쉽게 데이터를 저장하고 불러올 수 있습니다. 로그인 후 사용자 정보를 클라이언트 측에서 간편하게 접근하기 위해 처음에는 LocalStorage에 JWT를 저장하였습니다.
장점
- 쉬운 구현:
localStorage.setItem()및localStorage.getItem()으로 쉽게 사용 가능.
- 용량 제한: 약 5MB로, 토큰 저장에는 충분한 공간 제공.
- 클라이언트에서 쉽게 접근 가능: 애플리케이션 로직에서 토큰을 쉽게 가져와 사용할 수 있음.
주의할 점
- 보안 이슈: XSS 공격에 취약하여 악성 스크립트가 삽입되면 토큰을 탈취당할 수 있음.
- 자동 전송 불가: HTTP 요청 시 자동으로 헤더에 포함되지 않아 매번 수동으로 설정 필요.
2. 쿠키에 저장
선택한 이유
LocalStorage의 XSS 취약점을 보완하기 위해 HttpOnly와 Secure 속성을 사용할 수 있는 쿠키에 JWT를 저장해보았습니다.
장점
- HttpOnly 옵션 지원: 클라이언트 측 스크립트로 접근 불가하여 XSS 공격 방어.
- 자동 전송: 동일한 도메인에 대한 요청 시 자동으로 쿠키가 포함되어 편리함.
- Secure 옵션 지원: HTTPS 연결에서만 쿠키 전송 가능하여 보안 강화.
- SameSite: 쿠키는 CSRF 공격 취약하지만 SameSite를 설정하여 방어할 수 있습니다.
주의할 점
- 저장 용량 제한: 일반적으로 4KB로, 토큰 외 추가 데이터 저장에 제약이 있음.
토큰 탈취를 위한 주요 공격 방법
- XSS: 악성 스크립트를 통해 LocalStorage 또는 쿠키에서 토큰을 탈취.
- CSRF: 사용자의 인증 정보를 이용해 의도치 않은 요청을 서버에 전송.
- 쿠키 조작: 쿠키에 저장된 토큰을 변조하여 권한 상승 시도.
- 중간자 공격: 암호화되지 않은 연결에서 토큰을 가로챔.
결론
이번 글에서는 JWT 저장 방식을 선택하면서 겪었던 고민과 이를 해결하기 위해 적용한 방법들을 정리해 보았습니다. LocalStorage와 쿠키 각각의 장단점을 이해하고, 실제 상황에 맞게 보안 취약점을 보완하는 과정을 통해 더 안전한 애플리케이션을 개발할 수 있었습니다.
개발은 항상 새로운 이슈와 마주하는 과정이며, 그 과정에서 배운 점들을 기록하고 공유하는 것이 의미 있다고 생각합니다. 앞으로도 안전하고 효율적인 개발을 위해 고민하며 성장해 나가겠습니다.