핵심 요약
서버가 자동으로 받아야 하면 cookie(특히 인증은 HttpOnly+Secure+SameSite), 브라우저에서만 오래 보관할 설정값은 localStorage, 탭이 닫히면 사라질 임시값은 sessionStorage. 인증 토큰을 localStorage에 두는 건 XSS에 취약하니 피하는 게 좋다.
1. 비교
| 수명 | 서버 전송 | 용량 | |
|---|---|---|---|
| cookie | 설정한 만료까지 | 매 요청 자동 | ~4KB |
| localStorage | 영구(수동 삭제까지) | 안 됨 | ~5MB |
| sessionStorage | 탭 닫으면 소멸 | 안 됨 | ~5MB |
2. 인증 토큰은?
- 권장: HttpOnly 쿠키 — JS에서 못 읽어 XSS로 탈취 불가
- 쿠키 쓰면 CSRF 대비 필요 — SameSite=Lax/Strict + CSRF 토큰
- localStorage 토큰은 XSS 한 방에 털린다
3. 함정
- localStorage는 동기 API라 큰 값 잦은 접근 시 메인 스레드 블록
- JSON은 직접 stringify/parse — 객체 그대로 못 넣음
- 민감정보(주민번호·카드)는 어디에도 평문 저장 금지
자주 묻는 질문
JWT를 localStorage에 두면 편한데 위험한가요?
XSS가 한 번 터지면 토큰이 그대로 탈취됩니다. HttpOnly 쿠키에 두면 JS가 못 읽어 훨씬 안전합니다. 편의보다 보안을 택하세요.
SameSite는 뭘로 하나요?
대부분 Lax면 충분합니다. 결제처럼 민감하면 Strict, 크로스사이트 임베드가 필요하면 None+Secure를 씁니다.
댓글 0