하이브리드 토큰 저장 방식

4 min read

하이브리드 토큰 저장 방식

저장 위치

Access Token  → localStorage (또는 메모리)
Refresh Token → HttpOnly Cookie

왜 이렇게 나눠서 저장할까?

1. 각 토큰의 특성이 다르기 때문

토큰유효기간사용 빈도중요도
Access Token짧음 (15분~1시간)매 API 요청마다탈취되어도 피해 제한적
Refresh Token김 (7일~30일)Access Token 만료 시만탈취 시 장기간 피해

2. 보안과 편의성의 균형

javascript

// 일반 API 요청
axios.get('/api/user/profile', {
  headers: { 
    Authorization: `Bearer ${localStorage.getItem('accessToken')}` 
  }
});
 
// Access Token 만료 시 갱신 (자동)
axios.post('/api/auth/refresh');  
// Refresh Token은 HttpOnly 쿠키로 자동 전송됨
// 백엔드에서 새 Access Token 발급
```
 
### 전략별 비교
 
#### ❌ **둘 다 localStorage**
```
Access Token  → localStorage
Refresh Token → localStorage
```
- **문제점**: Refresh Token이 탈취되면 장기간 피해
- XSS 공격으로 두 토큰 모두 탈취 → 최악의 시나리오
 
#### ❌ **둘 다 HttpOnly Cookie**
```
Access Token  → HttpOnly Cookie
Refresh Token → HttpOnly Cookie
```
- **문제점**: 
  - CSRF 공격에 취약 (모든 요청에 자동 포함)
  - JavaScript로 토큰 접근 불가 → 토큰 상태 확인 어려움
  - SPA에서 토큰 만료 체크가 복잡해짐
 
#### ✅ **하이브리드 방식 (가장 많이 사용)**
```
Access Token  → localStorage
Refresh Token → HttpOnly Cookie
  • 장점:와
    1. XSS로 Access Token 탈취되어도 → 15분 후 무용지물
    2. Refresh Token은 HttpOnly라 JavaScript로 접근 불가 → XSS에 안전
    3. Refresh Token은 특정 엔드포인트(/refresh)에만 전송 → CSRF 위험 최소화

실제 플로우

javascript

// 1. 로그인 성공
// 백엔드 응답:
{
  accessToken: "eyJhbGc...",  // → localStorage 저장
  // refreshToken은 Set-Cookie 헤더로 HttpOnly 쿠키 설정
}
 
// 2. 일반 API 요청 (Axios Interceptor)
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
 
// 3. Access Token 만료 시 자동 갱신
axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response?.status === 401) {
      // Refresh Token으로 새 Access Token 발급
      const { data } = await axios.post('/api/auth/refresh');
      // Refresh Token은 자동으로 쿠키로 전송됨
      
      localStorage.setItem('accessToken', data.accessToken);
      // 실패한 요청 재시도
      return axios(error.config);
    }
  }
);

현업에서는?

대기업/보안 중요 서비스

  • 하이브리드 방식 압도적으로 선호
  • 예: Google, Facebook, GitHub

스타트업/초기 프로젝트

  • 개발 속도 우선 → 둘 다 localStorage로 시작
  • 나중에 하이브리드로 마이그레이션

PR 문서에는 이렇게 쓰면 좋을 것 같아요

markdown

3. LocalStorage 방식의 토큰 저장
* 현재 구현
   - Access Token만 사용 중이며 localStorage에 저장
   
* 추후 개선 계획
   - Refresh Token 도입 시 **하이브리드 방식** 적용 예정:
     - Access Token (짧은 유효기간) → localStorage
     - Refresh Token (긴 유효기간) → HttpOnly Cookie
   - 이를 통해 XSS 공격 시 피해를 Access Token 유효기간 내로 제한

답변: 네, 이 방식 많이 씁니다! 보안(Refresh Token 보호)과 편의성(Access Token 접근성)의 균형을 맞춘 방식이에요.

Files