쿠키(Cookie)와 로컬/세션 스토리지(localStorage / sessionStorage)를 사용하여 토큰을 관리하는 방식에는 각각의 장점과 단점이 있다.
✅ 쿠키 vs 로컬/세션 스토리지의 차이점
구분 쿠키 (Cookie) 로컬스토리지 (localStorage) / 세션스토리지 (sessionStorage)
| 저장 방식 | HTTP 요청 시 자동으로 전송 | JS를 통해 읽고 쓰기 가능 |
| 보안성 | HttpOnly 설정 가능 → XSS 방어 가능 | XSS 공격에 취약 |
| CSRF 공격 | 기본적으로 취약 → CSRF 토큰 필요 | CSRF 공격에 안전 |
| 만료 시간 | 서버가 설정 가능 (Max-Age, Expires) | 개발자가 직접 관리해야 함 |
| 도메인 제한 | 특정 도메인에서만 접근 가능 | 모든 JS에서 접근 가능 |
| 전송 방식 | Cookie 헤더를 통해 자동 전송 | API 요청 시 Authorization 헤더에 수동으로 추가해야 함 |
| 용량 제한 | 약 4KB 제한 | 약 5MB 제한 |
✅ 1. 쿠키로 토큰 관리 (HTTP-Only 쿠키)
✅ 쿠키 관리 방법
- 서버에서 Set-Cookie를 통해 쿠키에 토큰 저장
- 클라이언트는 withCredentials: true 옵션을 사용하여 요청
- 쿠키는 HTTP 요청 시 자동으로 포함됨
📌 예제
서버에서 쿠키 설정
Set-Cookie: access_token=abc123; Path=/; HttpOnly; Secure; SameSite=Strict;
클라이언트 요청 (Axios 예시)
axios.get("https://api.example.com/user", {
withCredentials: true
});
✅ 장점
✔ 보안성이 높음 (HttpOnly, Secure 옵션 사용 가능)
✔ XSS 공격 방어 가능 (HttpOnly 설정 시 JS에서 접근 불가)
✔ 자동으로 포함되므로 클라이언트에서 토큰을 수동으로 추가할 필요 없음
✔ 서버가 만료 기간을 설정하고 관리 가능
❌ 단점
❌ CORS 설정이 복잡함 (Access-Control-Allow-Credentials: true 필요)
❌ CSRF 공격에 취약할 수 있음 → CSRF 방어를 위한 추가적인 조치 필요
❌ 도메인 간 공유가 어려움 (다른 도메인에서는 접근 불가)
✅ 2. 로컬스토리지 또는 세션스토리지에서 토큰 관리
✅ 로컬스토리지(LocalStorage)와 세션스토리지(SessionStorage)의 차이
저장 방식 설명
| localStorage | 브라우저가 종료되어도 토큰이 유지됨 |
| sessionStorage | 브라우저 또는 탭이 종료되면 토큰이 삭제됨 |
📌 예제
// 로그인 시 토큰 저장
localStorage.setItem("access_token", "abc123");
// API 요청 시 헤더에 포함
axios.get("https://api.example.com/user", {
headers: {
Authorization: `Bearer ${localStorage.getItem("access_token")}`
}
});
✅ 장점
✔ CSRF 공격에 안전함 (쿠키처럼 자동 전송되지 않음)
✔ CORS 설정이 비교적 간단함
✔ 도메인 간 공유가 가능함 (단, postMessage API를 사용해야 함)
✔ 응답 속도가 빠름 (쿠키보다 I/O 비용이 적음)
❌ 단점
❌ XSS 공격에 취약함 (악성 스크립트가 토큰을 훔칠 수 있음)
❌ 토큰이 자동으로 포함되지 않으므로 매 요청마다 Authorization 헤더에 추가해야 함
❌ 수동으로 만료 시간을 관리해야 함 (쿠키는 서버에서 Max-Age 설정 가능)
✅ 그럼 언제 쿠키를 쓰고, 언제 로컬스토리지를 써야 할까?
✅ 쿠키를 써야 하는 경우
- 보안이 중요한 경우 (예: 로그인, 금융 서비스 등)
- XSS 공격 방어가 필요할 때 (HttpOnly 쿠키 사용)
- 토큰을 자동으로 요청과 함께 보내야 할 때
- 서버가 인증을 철저하게 관리해야 할 때
✅ 로컬스토리지/세션스토리지를 써야 하는 경우
- CSRF 공격을 막고 싶을 때
- CORS 설정이 복잡한 API를 사용할 때
- OAuth 2.0의 Authorization: Bearer 토큰을 활용할 때
- 토큰을 수동으로 관리할 필요가 있을 때 (리프레시 토큰 전략 등)
✅ 결론
선택 기준 쿠키 (HttpOnly) 로컬스토리지 / 세션스토리지
| 보안 | XSS 공격 방어 가능 | XSS 공격에 취약 |
| CSRF 공격 방어 | 별도 방어 필요 (CSRF 토큰) | 기본적으로 안전 |
| 자동 전송 | 요청 시 자동 전송 (Cookie 헤더) | Authorization 헤더에 수동 추가 필요 |
| 설정 난이도 | CORS, 쿠키 설정 필요 | 비교적 설정이 쉬움 |
| 도메인 공유 | 제한적 (도메인 간 공유 불가) | 비교적 자유로움 |
👉 보안이 중요한 경우 → HttpOnly 쿠키 추천
👉 토큰을 수동으로 관리하고 싶다면 → 로컬/세션스토리지 추천