JWT

WEB

 

JWT

JWT는 JSON Web Token의 약자입니다.

 

이는 로그인 성공 후 유저가 매번 로그인하지 않아도 되도록 하는 데 사용되는 액세스 토큰을 생성하기 위한 방법 중 하나입니다.

 

JWT는 JSON 객체를 사용하여 토큰 자체에 정보를 저장하는 웹 토큰입니다.

대부분의 주류 프로그래밍 언어에서 JWT를 지원합니다.

 

JWT는 다음과 같은 구조로 이루어져 있습니다: HEADER . PAYLOAD . SIGNATURE.

 

이 구조는 점(.)으로 구분되며, 헤더, 페이로드, 서명 세 부분으로 구성되는데 헤더(Header)는 토큰의 타입과 해시 암호화 알고리즘으로 구성됩니다.

 

페이로드(Payload)는 실제로 토큰으로 사용하려는 데이터인 user_id, expire, scope 등이 담기는 부분입니다. 서명(Signature)은 헤더와 페이로드의 데이터 무결성과 변조 방지를 위해 사용되며 가장 중요한 부분입니다.

이는 암호화된 코드로서, secret key를 포함하여 암호화되어 있습니다.

 

예를 들어, 아래와 같은 JWT가 있습니다: byJ0eVAiOiJdV1QiLAJab4ciOiJIUzI1NiJ9.EyJpZCw6MjJ9.u8jur2tF3vo3HOPy433eXiDAr0Pht5jH3xUY6o10vrI

 

헤더는 토큰의 타입과 해시 알고리즘을 나타내고, 페이로드에는 user_id와 expire, scope와 같은 실제 토큰으로 사용되는 데이터가 담겨 있습니다.

 

마지막으로, 서명은 헤더와 페이로드의 데이터 무결성과 변조 방지를 위한 암호화 코드입니다. JWT는 토큰 기반 인증 시스템에서 사용되며, 액세스 토큰의 유효성을 검증하고 사용자 인증을 처리하는 데 아주 중요한 역할을 합니다.

용도

HTTP header / URI 파라미터를 이용해 전달 가능 회원 인증이 가능합니다.  로그인을 할 때 TOKEN을 발급하고 이후 요청 시 TOKEN을 포함하여 HTTP Request 함으로써 유저가 요청한 작업에 권한이 있는지 없는지 확인합니다.

 

정보 교류 즉, 데이터 통신을 할 때도 중요한 역할을 합니다.

TOKEN 생성자의 signature를 포함하므로 양자 간 데이터 교환에 있어서 안정성 있게 무결성 검증이 가능해집니다.

JWT

 

보안에 있어서 아주 중요한 역할을 하는 친구입니다.

 

장단점

JWT의 장점

서버 자원 절약

 

JWT는 토큰 자체에 사용자 인증에 필요한 모든 정보를 포함하므로 별도의 인증 저장소가 필요하지 않습니다. 이로 인해 서버 자원을 절약할 수 있습니다.
Stateless 서버

 

JWT는 클라이언트 사이드에 저장되므로 서버가 stateless 상태를 유지할 수 있습니다. 기존의 토큰 방식은 토큰을 데이터베이스나 서버 캐시에 저장하고 유효성을 검사해야 했지만, JWT는 Secret key를 공유함으로써 각 서버에서 토큰 유효성 검증이 가능해지기 때문에 서버 유지 보수와 확장이 편리합니다.
데이터베이스 조회 필요 없음:

 

JWT는 클라이언트에 토큰이 저장되므로 데이터베이스 조회가 필요하지 않습니다. 이는 데이터베이스 부하를 줄이는 큰 장점입니다.
보안성 향상

 

세션 인증을 위한 쿠키 전달이 필요하지 않으므로 보안성이 향상됩니다. JWT는 토큰 자체에 인증 정보를 포함하고 암호화되어 전송되기 때문에 중간에 조작될 위험이 적습니다.

CORS 제약 없음

 

JWT는 쿠키가 아닌 토큰을 주고받기 때문에 별도의 CORS 설정이 필요하지 않습니다. 이는 서버 간 통신에서 자유롭게 사용할 수 있는 장점입니다.

 

JWT의 단점

클라이언트 사이드 저장

JWT는 클라이언트 사이드에 저장되므로, DB에서 사용자 정보가 조작되더라도 토큰에 직접 적용할 수 없고 새로운 토큰을 발행해야 합니다.

긴 토큰 길이

 

Payload에 저장하는 정보가 많아질수록 토큰의 길이가 늘어나고, 이로 인해 매 HTTP 요청의 트래픽 양에 영향을 줄 수 있습니다.
보안성 제약

 

Payload는 암호화되지 않기 때문에 누구나 열어볼 수 있습니다. 따라서 보안이 중요한 데이터는 최소한의 정보만 넣는 것이 좋습니다.

요약을 하자면 JWT는 서버 자원 절약과 Stateless 서버, 데이터베이스 조회 없음, 보안성 향상, CORS 제약 없음 등의 장점을 가지고 있지만, 클라이언트 사이드 저장, 긴 토큰 길이, 보안성 제약과 같은 단점도 고려해야 합니다.

그럼 이 중요한 JWT 어디에 저장해야 할까?

React에서 JWT를 저장하는 위치로는 주로 localStorage와 쿠키(cookie)가 사용됩니다. 웹 스토리지(Web Storage)는 클라이언트에 데이터를 저장할 수 있는 기능을 제공합니다. 그중에서도 localStorage와 sessionStorage가 있습니다.

 

localStorage는 데이터를 브라우저에 반영구적으로 저장하며, 브라우저를 종료해도 데이터가 유지됩니다.

 

sessionStorage는 브라우저 세션 동안만 데이터를 유지하며, 브라우저를 종료하면 데이터가 사라집니다.

 

쿠키(cookie)는 유저의 웹 사용을 효율적이고 안전하게 보장하기 위해 널리 사용되고 있습니다.

 

쿠키는 웹사이트에 다운로드되어 브라우저에 저장되는 작은 텍스트 파일입니다.

 

두 저장소 각각에는 장단점이 있어 어느 것이 더 좋다고 일반적으로 어디가 더 좋은 선택이라고 단정 짓기는 어려울 거 같습니다.

 

localStorage와 sessionStorage는 자바스크립트를 통해 제어할 수 있으므로 XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다. 해커가 악성 자바스크립트 코드를 웹 페이지에 삽입하여 사용자 정보를 탈취할 수 있습니다.

 

쿠키는 자바스크립트로 접근이 가능하므로 쿠키에 저장된 데이터를 보호하기 위해 HTTP Only 옵션을 사용해야 합니다. 또한, HTTPS가 적용되지 않은 이미지 등을 통해 쿠키가 탈취될 수 있는 위험성도 고려해야 합니다.

 

쿠키는 CSRF(Cross-Site Request Forgery) 공격에 취약할 수 있습니다. 따라서 JWT를 저장하는 위치를 선택할 때에는 보안, XSS 공격, CSRF 공격 등을 고려하여 적절한 방식을 선택해야 합니다.