JWT 저장소
Exactly! 💯 네 말이 아주 정확해.
"프로젝트의 특징, 인증 방식, 보안 요구 수준"에 따라
JWT를 어디에 저장할지: Cookie, localStorage, sessionStorage 중 선택해야 해.
🧠 정리: JWT 저장소 선택 기준표
| 저장 방식 | 특징 | 장점 | 단점 | 추천 상황 |
|---|---|---|---|---|
🍪 Cookie (HttpOnly) | 서버와 자동 전송 (보안에 강함) | ✅ XSS 방어 ✅ 자동 인증 유지 | ❌ CSRF에 취약 ❌ 설정 복잡 | ✅ 서버 렌더링 ✅ 보안이 중요한 시스템 |
| 💾 localStorage | 브라우저에 영구 저장 | ✅ 간단한 구현 ✅ 많은 데이터 저장 가능 | ❌ XSS 취약 ❌ 브라우저에만 저장 | ✅ SPA ✅ JWT 기반 프론트 인증 |
| 📦 sessionStorage | 탭 단위 저장 | ✅ 탭마다 분리 ✅ 로그인 자동 해제 가능 | ❌ 새 탭/새로고침 시 소멸 | ✅ 은행/보안 앱 ✅ 짧은 세션 요구 |
🔐 쿠키 vs 로컬스토리지 vs 세션스토리지 간단 도식
로그인 성공
↓
┌─────────────┬───────────────┬────────────────┐
│ Cookie │ localStorage │ sessionStorage │
├─────────────┼───────────────┼────────────────┤
│ HttpOnly 사용 │ JS 접근 가능 │ JS 접근 가능 │
│ 서버 전송됨 │ 프론트 전용 │ 프론트 전용 │
│ 보안 우수 │ 구현 간단 │ 탭 종료 시 삭제 │
└─────────────┴───────────────┴────────────────┘🏗️ 예제 시나리오별 추천
| 프로젝트 상황 | 저장 방식 | 이유 |
|---|---|---|
| 쇼핑몰, 블로그, 뉴스 | 🍪 Cookie (HttpOnly + Secure) | 자동 로그인, 보안 중요 |
| SPA 웹앱 (React, Vue) | 💾 localStorage | 쉽게 토큰 접근, 로그인 유지 |
| 모바일 뱅킹 / 증권 | 📦 sessionStorage | 보안 강화, 짧은 세션 유지 |
| 회사 인트라넷 시스템 | 🍪 Cookie + CSRF 방어 | 서버 인증이 주체인 경우 |
| 개인 포트폴리오 | 💾 localStorage | 빠른 개발, 간단한 인증 |
🔐 + 보안 팁 (토큰 저장할 때는 꼭 체크!)
| 항목 | 설명 |
|---|---|
✅ HttpOnly | JS에서 쿠키 접근 불가 (XSS 방어) |
✅ Secure | HTTPS에서만 쿠키 전송 |
| ✅ CSRF 방어 | 쿠키 사용할 땐 꼭 토큰 추가로 붙이기 |
| ✅ XSS 방지 | 모든 입력값을 필터링하고, Content Security Policy 설정 |
💡 결론
"JWT 저장소 선택은 기술이 아니라 전략이다"
- 성능을 중시할지?
- 보안을 중시할지?
- 유지 관리 편의성을 중시할지?
필요하다면:
- ✅ Spring Security + JWT + Cookie 예제
- ✅ React + localStorage + JWT 흐름도
- ✅ sessionStorage 기반 SPA 로그인 흐름
이렇게 저장소 방식별로 실습 예제도 짜줄 수 있어!
지금 만들고 있는 프로젝트 특성에 맞춰 방향 잡아볼까? 🤓
@mgkick