JWT (JSON Web Token) - 액세스 토큰 관리 비교

액세스 토큰을 어디에 저장할지 선택하는 것은 보안과 사용성을 균형 있게 고려해야 하는 문제다. 각각의 저장 방식에 장단점이 있으므로, 애플리케이션의 특성과 보안 요구사항에 따라 결정하는 것이 중요하다.

---

1. 주요 저장 방법 비교

저장 위치	보안성	사용성	XSS 위험	CSRF 위험
메모리 (변수/상태 관리)	✅ 높음	❌ 새로고침 시 사라짐	✅ 없음	✅ 없음
HTTP-Only 쿠키	✅ 높음	✅ 자동 전송	✅ 없음	❌ 있음 (적절한 보호 필요)
localStorage	❌ 낮음	✅ 유지됨	❌ 높음	✅ 없음
sessionStorage	❌ 낮음	❌ 세션 종료 시 사라짐	❌ 높음	✅ 없음

각 저장 방식의 자세한 설명과 고려할 사항을 살펴보자.

---

2. 저장 방식별 상세 분석

1) 메모리 저장 (JavaScript 변수, React 상태 관리 등)

✅ 장점:

• XSS 공격에 안전함 (스크립트가 실행되는 동안만 유지됨).
• CSRF 공격에도 안전함 (브라우저가 자동으로 전송하지 않음).

❌ 단점:

• 새로고침하면 사라짐 → UX가 나빠짐.
• 페이지가 닫히면 다시 로그인해야 함.

🔹 추천 상황:

• 보안이 최우선인 애플리케이션 (ex: 금융 서비스, 관리자 페이지).
• 사용자 경험보다 보안이 더 중요한 경우.

---

2) HTTP-Only 쿠키 저장 (✅ 추천)

쿠키에 httpOnly, secure, sameSite=strict 속성을 추가하면 XSS 공격에 안전하면서도 자동으로 액세스 토큰을 포함하여 요청할 수 있다.

res.cookie("accessToken", token, {
  httpOnly: true, 
  secure: process.env.NODE_ENV === "production", 
  sameSite: "strict"
});

✅ 장점:

• XSS 공격에 안전 (JavaScript에서 접근 불가).
• 브라우저가 자동으로 요청에 포함 → 개발이 편리함.

❌ 단점:

• CSRF 공격에 취약 → CSRF 보호가 필요함.
  • 대책: SameSite=Strict 설정 또는 CSRF 토큰 추가.
• 도메인 간 요청 제한 (sameSite=strict로 설정 시 외부 사이트에서 요청 불가).

🔹 추천 상황:

• JWT 기반 인증 시스템에서 보안과 편의성을 함께 고려할 때.
• REST API를 사용하는 SPA/SSR 애플리케이션.

✅ 보안 대책 (CSRF 보호):

• API 요청 시 CSRF 토큰 사용 (ex: X-CSRF-Token 헤더).
• SameSite=Strict 설정으로 외부 사이트 요청 차단.

---

3) localStorage 저장 (❌ 비추천)

localStorage는 XSS 공격에 취약하므로, 보안이 중요한 애플리케이션에서는 사용하지 않는 것이 좋다.

✅ 장점:

• 새로고침해도 유지됨.
• CSRF 공격에 안전함.

❌ 단점:

• XSS 공격에 취약 → 악성 스크립트가 localStorage에서 토큰을 가져갈 수 있음.
• 토큰을 직접 포함해서 요청해야 함 → 번거로움.

🔹 추천 상황:

• 보안이 크게 중요하지 않은 애플리케이션.
• 서버가 정적 리소스만 제공하고, API 요청 시만 인증이 필요한 경우.

---

4) sessionStorage 저장 (❌ 비추천)

sessionStorage는 XSS 공격에 취약하고, 브라우저를 닫으면 사라지므로 보안성이 높다고 보기 어렵다.

✅ 장점:

• 새로고침해도 유지됨.
• CSRF 공격에 안전함.

❌ 단점:

• XSS 공격에 취약.
• 브라우저를 닫으면 로그아웃됨 → 사용자 경험이 나쁨.

🔹 추천 상황:

• 보안이 중요하지 않고, 짧은 세션만 유지하면 되는 경우.

---

3. 결론: 언제 어떤 저장 방식을 선택해야 할까?

저장 방식	추천 사용 사례
메모리 저장	보안이 최우선인 앱 (ex: 금융, 관리자 페이지)
HTTP-Only 쿠키 저장	JWT 기반 인증을 사용하는 대부분의 SPA/SSR
localStorage 저장	보안이 중요하지 않은 앱 (❌ 추천하지 않음)
sessionStorage 저장	보안이 중요하지 않으며, 세션만 유지하는 앱 (❌ 추천하지 않음)

✅ 최적의 선택:

• 백엔드 API와 함께 JWT를 사용할 경우, httpOnly 쿠키 저장을 추천.
• CSRF 보호를 추가하면 보안성이 높아짐.
• XSS 위험을 최소화하려면 localStorage 사용을 피하는 것이 좋음.

---

4. 추가 보안 대책

1. CSRF 방어

   • SameSite=Strict 또는 X-CSRF-Token 사용.
   • CSRF 보호가 필요한 경우 쿠키를 사용하지 않고, 헤더 기반 인증 (Authorization: Bearer)을 고려.

2. XSS 방어

   • Content Security Policy (CSP)를 적용하여 악성 스크립트 실행 차단.
   • React 등에서 dangerouslySetInnerHTML 같은 XSS 위험 요소 피하기.

3. 리프레시 토큰은 어디에 저장할까?

   • httpOnly 쿠키에 저장하는 것이 가장 안전.
   • 리프레시 토큰은 주로 보안성이 중요한 정보이므로 JavaScript에서 접근할 수 없게 설정하는 것이 좋음.

---

5. 최종 추천 구조

• 액세스 토큰: httpOnly 쿠키에 저장.
• 리프레시 토큰: httpOnly 쿠키에 저장.
• CSRF 보호: X-CSRF-Token을 요청 헤더에 포함.

이렇게 하면 XSS, CSRF 공격을 모두 방어하면서도 개발 편의성을 유지할 수 있다.