[Spring Boot] JWT 저장하기

JWT란?

JSON Web Token의 약자로 모바일이나 웹에서 클라이언트와 서버 간 통신 시 사용자의 인증을 위해 사용하는 암호화된 토큰을 의미한다.
JWT 정보는 주로 통신 시 헤더의 Authorization에 담아 전송되며 이것을 서버에서 검증하여 사용자의 정보 열람, 권한 부여 등의 인증/인가 작업을 수행할 수 있다.

 

왜써요 ?

세션은 접속자 마다 하나씩 생성이 되는데

만약 다른기기로 접속하게 되면 또 다른 세션이 생성되고 다른 동작을 한 사람이 동시에 하는 경우가 생긴다.

이는 큰 문제가 될 수 있다.

 

그리고 서버가 여러개 일 경우 서버간에 세션을 이동시킬수는 없기 때문에

같은 사이트내에서 라도 다른 서버일 경우 다시 인증을 요구하는 경우가 있다.

 

이럴 때 토큰인증 방식이 필요하다.

 

저장 위치

토큰을 무분별하게 저장하게 될 경우

XSS, CSRF 공격에 당할 수 있다.

 

XSS 공격 : 공격자가 상대방의 브라우저에 스크립트가 실행되도록 하여 사용자의 세션 혹은 웹사이트를 변조하여 악의적인 콘텐츠/피싱 공격

 

CSRF 공격 : 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 행위

 

 

어떤 저장 위치가 좋을까 ?

세션 스토리지 : 세션 스토리지는 모든 자바스크립트 코드를 통해 액세스 할 수 있음으로 XSS 공격에도 취약하나
자바스크립트 코드로 제어가 필요하기에 CSRF 공격에서는 안전하다.

 

로컬 스토리지 : 세션 스토리지와 동일하게 모든 자바스크립트 코드를 통해 액세스 할 수 있음으로 XSS 공격에 취약하고 CSRF 공격에 안전하다.

 

쿠키(권장) : 옵션 없이 기본적으로 작동되는 쿠키는 XSS, CSRF 공격에 모두 취약함

그래서 백엔드 쪽에서 처리해줘야 할 옵션이 있다.

 

옵션

HttpOnly : 스크립트 상에서 접근이 불가능하도록 한다.

secure: 패킷 감청을 막기 위해 https 통신 시에만 해당 쿠키를 사용하도록 한다.

SameSite : Strict, Lax 모드가 있으며 Strict 모드에서는 같은 도메인 범위에서만 해당 쿠키를 사용하게 하며, Lax는 사용자가 페이지 이동 시 혹은 Form을 통한 Get 요청 시에만 허용된다

 

JWT 저장 로직

1. 백엔드 → 로그인 시 인증 서버로부터 access token, refresh token을 받아온다.
2. 프론트엔드 → access token은 메모리(변수)에 저장한다.
3. 백엔드 → refresh token은 쿠키에 저장하여 httpOnly / secure / SameSite(Strict or Lax 모드) 옵션을 지정한다. (백엔드)
4. 프론트엔드 → 권한이 필요한 요청 시 Authorization 헤더에 access token을 보내준다.
5. 백엔드 & 프론트엔드 → access token이 만료되었거나, 페이지 이동으로 사라졌을 시, 서버 렌더링 과정 혹은 API 통신을 통해 재발급을 요청한다.
   → 이때, 요청 시 쿠키에는 자바스크립트에서 접근이 불가능한(httpOnly 옵션) refresh token이 이미 담겨진 상태로 서버와 통신하게 된다.
6. 백엔드 → refresh token이 만료되었을 때 DB와 다시 한번 통신하여 갱신 혹은 로그아웃 상태로 렌더링을 하여준다.