엑세스 토큰과 리프레시 토큰
🔑 엑세스 토큰 (Access Token)
- 목적: API 요청과 같은 실질적인 데이터 접근 권한을 증명한다. 서버는 요청 헤더에 담긴 이 토큰을 보고 "아, 이 사용자는 인증된 사용자가 맞구나" 라고 판단하고 데이터를 응답해 준다.
- 역할: API 요청 시마다 '내가 누구인지'를 증명하는 단기 인증 티켓이며 유효기간이 보통 30분 ~ 2시간 정도로 짧다.
- 저장 위치: 로컬 스토리지. 자바스크립트로 쉽게 접근해서 API 요청 헤더(Header)에 담아 보낼 수 있기 때문.
- 보안 우려 (XSS 공격): 로컬 스토리지는 XSS(Cross-Site Scripting) 공격에 취약.
악성 스크립트가 사이트에 삽입되면 로컬 스토리지의 토큰을 탈취할 수 있다. - 해결책: 그래서 유효 기간을 짧게 설정한다. 탈취되더라도 금방 만료되므로 피해를 최소화할 수 있다.
- 특징:
- 짧은 유효 기간 (Stateless & Short-lived): 보통 30분 ~ 2시간 정도로 매우 짧다. 토큰 자체에 유저 정보와 만료 시간이 기록되어 있어(JWT 기준), 서버가 토큰의 유효성만 검증하면 되므로 서버 부하가 적다. 만약 탈취되더라도 금방 만료되어 피해를 최소화할 수 있다.
- 상대적으로 덜 안전한 곳에 저장: 자바스크립트가 쉽게 접근하여 API 요청 헤더에 포함시켜야 하므로 localStorage나 sessionStorage에 저장.
🔄 리프레시 토큰 (Refresh Token)
- 목적: 오직 새로운 엑세스 토큰을 발급받기 위한 용도로만 사용. 이 토큰으로는 데이터 API를 직접 호출할 수 없다.
- 역할: 액세스 토큰이 만료되었을 때, 새로운 액세스 토큰을 발급받기 위한 장기 인증 티켓. 유효기간은 보통 7일 ~ 30일 정도로 길다.
- 저장 위치: HttpOnly 속성이 적용된 쿠키.
- 특징:
- 긴 유효 기간 (Stateful & Long-lived): 보통 7일, 30일 등 훨씬 길다. 사용자가 매시간 다시 로그인해야 하는 불편함을 없애줌.
- 매우 안전한 곳에 저장: 자바스크립트가 절대 접근할 수 없는 HttpOnly 쿠키에 저장하여 XSS 공격으로부터 토큰 탈취를 원천적으로 방지한다.
- 서버에서 관리 가능: 서버는 발급한 리프레시 토큰 목록을 별도로 저장하고 관리할 수 있다. 만약 특정 유저의 리프레시 토큰이 탈취되었다고 의심되면, 서버에서 해당 토큰을 강제로 만료시켜 해당 유저를 모든 기기에서 로그아웃시킬 수 있다
엑세스 토큰 vs 리프레시 토큰 : 놀이공원 비유 🎡
- 엑세스 토큰 (Access Token) 🔑: 당일 사용 손목 입장권
- 놀이기구를 탈 때마다 직원에게 보여주는 손목 입장권과 같습니다.
- 매번 보여줘야 해서 꺼내기 쉬운 손목에 차고 다닙니다. (→ localStorage)
- 하지만 오늘 하루만 유효하고, 잃어버리면 누군가 주워서 쓸 수 있는 위험이 있습니다. (→ 짧은 유효 기간, 탈취 위험)
- 리프레시 토큰 (Refresh Token) 🎫: 1년 회원권 카드
- 손목 입장권의 유효기간이 다 됐을 때, 매표소에 가서 새 손목 입장권을 발급받기 위해 사용하는 1년 회원권 카드입니다.
- 이 카드로 직접 놀이기구를 탈 수는 없습니다. 오직 '새 입장권 발급' 용도입니다.
- 매우 중요하기 때문에 손목이 아닌, 아무나 꺼낼 수 없는 지갑 깊숙한 곳에 보관합니다. (→ HttpOnly 쿠키)
- 이 회원권 카드마저 만료되면, 다시 회원가입(로그인)을 해서 새로 발급받아야 합니다.