JWT와 관리 전략 + NextJS 실전 사례

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

인증/보안

대상자

• *웹/앱 개발자** (인증 시스템 설계, 보안 강화 필요 시)
• *난이도**: 중급 (JWT 개념 이해, Next.js 환경 적용)

핵심 요약

• JWT 구조: 헤더.페이로드.서명으로 구성되며, exp, sub, role 등 클레임을 포함
• 보안 전략: Access Token은 HttpOnly 쿠키에 저장 + 짧은 유효기간, Refresh Token은 HttpOnly + Secure 쿠키 + RTR(Rotation) 적용
• Next.js 환경 제약: 서버 컴포넌트 및 미들웨어에서 localStorage 접근 불가 → 쿠키 저장 필수

섹션별 세부 요약

1. JWT 개요 및 구성

• JWT 정의: 사용자 인증 정보를 Base64Url 인코딩한 JSON 토큰으로, 서명을 통해 위변조 방지
• 구조:

- 헤더: "alg": "HS256", "typ": "JWT"

- 페이로드: sub, exp, role 등 민감 정보는 포함 금지

- 서명: 헤더+페이로드를 secret key로 서명한 결과

• 주의 사항:

- Base64 인코딩은 암호화 X → 민감 정보 저장 금지

- XSS/CSRF 대응 필요 (HttpOnly, Secure, SameSite 설정)

2. 토큰 관리 전략 및 한계점

• Access Token vs Refresh Token:

- Access Token: 짧은 수명 (10~30분), 요청마다 포함

- Refresh Token: 긴 수명 (7~30일), 서버 저장 + RTR 적용

• 한계점:

- 단일 토큰 사용 시 탈취 시 무기한 사용 가능

- 탈취 시 즉시 무효화 불가 (stateless 특성)

3. 토큰 저장 방식 비교 및 Next.js 적용

• 저장 방식 비교:

- HttpOnly 쿠키: 보안성 높음, XSS 대응 가능, Access/Refresh Token 모두 저장 가능

- 로컬스토리지: XSS 취약, 보안성 낮음

- 메모리: 새로고침 시 소멸, Access Token에만 적합

• Next.js 환경 적용 사례:

- 서버 컴포넌트/미들웨어에서 쿠키 자동 전송 필요 → HttpOnly 쿠키 사용

- middleware.ts에서 request.cookies.get('access_token')으로 인증 처리

4. 보안 대응 및 실전 팁

• XSS 방어:

- 민감 정보는 HttpOnly 쿠키에 저장

- 사용자 입력 Escape/Sanitize 처리

• CSRF 방어:

- SameSite=Strict 설정

- 요청에 CSRF 토큰 포함 (폼 기반 요청 시)

• Next.js + NestJS 환경 최적 방식:

- Access Token: HttpOnly + 짧은 수명

- Refresh Token: HttpOnly + Secure + RTR 적용

- 예시 코드:

```ts

res.cookie('access_token', token, {

httpOnly: true,

secure: true,

sameSite: 'strict',

maxAge: 15 60 1000 // 15분

});

```

결론

• JWT 보안 강화 핵심: Access/Refresh Token 분리 + HttpOnly 쿠키 사용 + RTR 적용
• Next.js 환경 제약으로 인해 쿠키 저장 필수 → HttpOnly 설정을 통해 XSS/CSRF 대응
• 실전 팁: SameSite=Strict, Secure, HttpOnly 옵션 필수 적용, RTR로 Refresh Token 무효화 관리