[Enhancement] localStorage 토큰 저장 방식 보안 개선

[seorinn]

배경

현재 액세스 토큰을 localStorage에 저장하고 있어 XSS 공격에 취약합니다. 공격자가 스크립트를 삽입할 경우 토큰을 탈취할 수 있습니다.

현재 코드

// src/utils/axios.js, src/auth/login.tsx
localStorage.setItem("accessToken", res.data.accessToken.value);
localStorage.getItem("accessToken");

문제점

• localStorage는 JavaScript로 접근 가능 → XSS 시 토큰 노출
• 모든 origin의 JS 코드에서 접근 가능

개선 방향 (단계별)

권장: 메모리 + HttpOnly 쿠키 이중 저장

• 액세스 토큰: 메모리(변수)에만 저장 → 빠르고 XSS 안전
• 리프레시 토큰: HttpOnly 쿠키 (서버 설정 필요)
• 새로고침 시 리프레시 토큰으로 액세스 토큰 재발급

단기: 메모리 저장소

// src/utils/tokenStore.ts
let accessToken: string | null = null;
export const getToken = () => accessToken;
export const setToken = (token: string) => { accessToken = token; };
export const clearToken = () => { accessToken = null; };

백엔드 협의가 필요한 부분이 있으므로 백엔드팀과 함께 검토 필요

관련 파일

• src/utils/axios.js
• src/auth/login.tsx