JWT access Token, 어디에 저장하는 것이 좋을까?

2025. 3. 28. 22:10·Cs

❓ JWT access Token

- JWT Access Token은 사용자가 인증된 상태를 유지하고, 서버와 클라이언트 간 안전하게 정보를 교환하기 위해 사용된다. 이 토큰은 API 요청 시 Authorization 헤더에 포함되어 서버에서 인증을 처리할 수 있도록 한다.

▶ 기본 사용 예시

1. 사용자가 로그인하면 서버에서 Access Token과 Refresh Token을 발급
2. 클라이언트는 Access Token을 저장하여 이후 API 요청 시 사용
3. Access Token이 만료되면 Refresh Token을 사용해 새로운 Access Token을 발급

❗ 사용이유

✅ Stateless 인증

- Access Token은 서버가 상태를 저장하지 않아도 인증을 처리할 수 있어 확장성이 뛰어나다.

✅ 빠른 검증

- 토큰 자체에 필요한 정보가 포함되어 있어 서버가 외부 데이터베이스를 조회할 필요 없이 빠르게 인증을 처리할 수 있다.


💥 주의

1️⃣ XXS 공격 위험

- 클라이언트 측에 저장된 토큰은 XSS 공격에 취약할 수 있다.

2️⃣ 토큰 유효 기간 관리

- Access Token은 짧은 유효 기간을 가지며, Refresh Token으로 재발급이 필요하다. 유효 기간 설정과 보안 관리는 필수!


💠 JWT access Token 저장 장소

1️⃣ 로컬 스토리지(Local Storage)

장점 단점
페이지 새로고침 후에도 데이터가 유지 XSS 공격에 취약
여러 탭에서 동일한 데이터를 공유 가능 자동 삭제 기능이 없어 만료된 토큰이 남아 있을 수 있음

2️⃣ 세션 스토리지(Session Storage)

장점 단점
브라우저 탭이 닫히면 데이터가 자동으로 삭제 XSS 공격에 취약
로컬 스토리지보다 짧은 세션 단위로 관리 가능 탭 간 데이터 공유가 불가능

3️⃣ 메모리(In-Memory)

장점 단점
XSS 공격 방어에 상대적으로 안전(브라우저 API 접근 불가) 페이지 새로고침 후 데이터 손실이 발생
페이지 새로고침 시 자동으로 초기화 복잡한 구현이 필요할 수 있음

➕ 토큰을 세션에 저장하지 않는 이유

- 서버가 여러 대일 경우, 세션 데이터를 분산 처리해야한다. -> 성능 저하, 관리 어려움

- 토큰은 클라이언트 측에서 만료 시간을 관리 but 세션은 서버 측에서 만료 시간을 관리 -> 불일치 발생 우려

- 서버 해킹시 보안 위험 발생 가능

- access token은 주기적으로 갱신되므로 그때마다 세션 상태를 갱신하려면 복잡함

하지만 서버에서 중앙 집중식으로 인증 상태를 관리할 수 있다는 점, CSRF 공격 방지, 세션 만료와 추적이 용이하다는 장점도 있다.


🚩 실제 프로젝트에서는?

- SPA에서 access Token은 메모리에 저장하여 XSS 공격 위험을, refresh Token은 HttpOnly 쿠키에 저장하여 CSRF 공격 위험을 줄이는 방식이 자주 사용된다. 이렇게 서로 다른 저장소에 분리하여 관리되면 보안도 강화되고 효율도 향상된다.


✅ XSS와 CSRF

특징 XSS CSRF
공격 대상 클라이언트(사용자 브라우저) 서버
공격 방식 악성 스크립트를 삽입하여 브라우저에서 실행 인증된 사용자의 권한으로 위조 요청 전송
주요 피해 개인정보 탈취, 세션 하이재킹 데이터 변경, 계정 탈취
방어 방법 입력값 검증, HTML 엔티티 치환 CSRF 토큰, Referrer 검증

📜 결론

- JWT Access Token의 저장 위치는 애플리케이션의 보안 요구사항과 사용자 경험에 따라 결정해야 한다. 높은 보안성을 요구하는 경우 HttpOnly 쿠키와 메모리 기반 접근 방식을 결합하는 것이 가장 안전한 선택이다.


여태 진행했던 프로젝트들은 보안이 크게 중요하지 않았고, 소규모의 프로젝트였기 때문에 JWT 토큰을 모두 로컬스토리지에 저장했었다(zustand의 persist 미들웨어 이용). 구글링해봤을 때 라프텔도 JWT 토큰을 로컬스토리지에 저장한다고 봤는데...다른 사이트들은 어떤 이유로, 어떤 방식을 사용하는지 궁금해졌다!

 

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'Cs' 카테고리의 다른 글

외워두면 좋은 HTTP 상태 코드 정리  (0) 2025.04.18
SSG 파헤치기(+ISR)  (3) 2025.04.14
5. 알고리즘  (0) 2024.11.02
4. 자료구조  (0) 2024.10.30
3. 데이터베이스  (0) 2024.10.29
'Cs' 카테고리의 다른 글
  • 외워두면 좋은 HTTP 상태 코드 정리
  • SSG 파헤치기(+ISR)
  • 5. 알고리즘
  • 4. 자료구조
버그잡는고양이발
버그잡는고양이발
주니어 개발자입니다!
  • 버그잡는고양이발
    지극히평범한개발블로그
    버그잡는고양이발
  • 전체
    오늘
    어제
    • 분류 전체보기 (381)
      • React (16)
      • Next.js (5)
      • Javascript (5)
      • Typescript (4)
      • Node.js (2)
      • Cs (16)
      • 트러블 슈팅 (5)
      • Html (1)
      • Css (3)
      • Django (0)
      • vue (0)
      • Java (1)
      • Python (0)
      • 독서 (1)
      • 기타 (3)
      • 백준 (192)
      • swea (31)
      • 프로그래머스 (30)
      • 이코테 (4)
      • 99클럽 코테 스터디 (30)
      • ssafy (31)
      • IT기사 (1)
  • 블로그 메뉴

    • 홈
    • 태그
  • 인기 글

  • 태그

    99클럽
    코딩테스트준비
    개발자취업
    Til
    항해99
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
버그잡는고양이발
JWT access Token, 어디에 저장하는 것이 좋을까?
상단으로

티스토리툴바