JWT가 뭘까?

오늘은 블로그를 살펴보다가 JWT라는 인증 방식을 알게 되어 글을 쓰게 되었습니다
그동안 제가 알고 있던 인증 방식은 주로 세션과 쿠키 정도였는데

또 다른 방식이 있다는 사실이 흥미로워서 글을 쓰게 되었습니다

---

❓ JWT(Json Web Token)가 무엇일까?

JWT 통신 과정

JWT는 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이라고 합니다

 

장점

• 데이터 위조나 변조를 방지할 수 있습니다
• JWT에는 모든 정보를 담고 있기 때문에 별도의 저장소가 없어도 됩니다
• 확장성이 좋습니다
• 모바일에서도 잘 동작합니다 (세션은 모바일 X)

단점

• 토큰의 길이가 너무 깁니다
• Payload 자체는 암호화가 되지 않아 위험합니다
• 토큰을 탈취당하면 대처하기 어렵습니다

세션이나 쿠키와의 차이점은

구분	세션/쿠키	JWT
상태 관리	서버가 인증 상태를 관리하며, 세션 ID를 통해 클라이언트 요청과 연결 (Stateful)	클라이언트가 JWT를 관리하며, 서버는 상태를 저장하지 않음 (Stateless)
저장 위치	세션 정보는 서버, 세션 ID는 쿠키에 저장	JWT 자체를 클라이언트가 저장 (로컬 스토리지, 세션 스토리지, 쿠키 등)
보안 방식	서버에서 세션 데이터를 관리하므로 탈취 시 피해를 최소화	JWT는 서명(Signature)으로 변조를 방지하지만, 탈취 시 재사용 위험 존재
무효화 방식	서버에서 세션을 삭제하거나 쿠키 만료로 처리	토큰 만료 시간(exp) 또는 블랙리스트 필요
전송 방식	쿠키를 통해 세션 ID가 전송되며, 서버가 상태를 확인	HTTP 헤더(Authorization) 또는 쿠키로 토큰 전송
유효기간 관리	서버가 세션 만료 시간을 관리	토큰 자체에 유효기간 포함 (exp 필드 사용)
성능	서버 부하 증가 (세션 저장 및 조회 필요)	서버 부하 감소 (상태 저장 불필요)

 

stateful과 stateless 예시와 설명(HTTP 웹 기본지식에 있는 무상태 프로토콜에서 확인할 수 있습니다)

https://github.com/bae080311/TIL

GitHub - bae080311/TIL

---

🏗️ JWT의 구조

JWT는 .을 구분자로 3가지의 문자열로 되어있습니다

JWT 구조

header

두가지 정보를 갖습니다 

• type: 토큰의 타입을 지정함 (JWT)
• alg: 해싱 알고리즘을 지정함 보통 HMAC SHA256 또는 RSA가 사용 됨  signature 부분에서 사용

 

예시

{
  "typ": "JWT",
  "alg": "HS256"
}

# base64URL 방식으로 인코딩 후

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

payload

이 부분에서는 사용자의 정보나 클레임을 포함합니다

여기에 담는 정보의 한 ‘조각’ 을 클레임(claim) 이라고 부릅니다

클레임은 비공식 클레임, 등록된 클레임으로 나뉩니다

인증되지 않은 정보를 담고 있습니다

ex) 사용자 정보, 토큰 만료 기간 등등

 

등록된 클레임

클레임 키	설명
iss	토큰 발급자 (Issuer)
sub	토큰 주제 (Subject)
aud	토큰 대상자 (Audience)
exp	토큰 만료 시간 (Expiration)
iat	토큰 발급 시간 (Issued At)
nbf (선택)	활성화 시작 시간 (Not Before)

 

{
  "sub": "1234567890", 
  "name": "John Doe", # 비공식 클레임
  "iat": 1516239022 # 등록된 클레임
}

# base64URL 방식으로 인코딩 후

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ

 

signature

보안을 하는 부분입니다

JWT가 위조되지 않도록 보장하는 중요한 부분입니다

헤더와 정보(Payload)를 조합한 후 비밀키를 이용해 특정 알고리즘으로 해싱(Hashing)하여 생성합니다

여기서 해싱 알고리즘은 header에서 골랐던 알고리즘을 사용합니다  

 

JWT를 해석하고 싶다면?

https://jwt.io/

JWT.IO

---

🎯 사용법

로그인하여 JWT 토큰 발급받기

ex)

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
}

 

 

토큰 저장

const jwtToken = response.data.access_token;  
localStorage.setItem('jwtToken', jwtToken);

 

 

API 요청 시 헤더에 JWT 포함하기

axios.get(URL, {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

---

✨글을 마치며

오늘은 JWT에 대해서 알아보았는데 기존의 알고 있던 인증 방식인

세션과 쿠키와는 꽤 많은 차이가 있어서 놀랐던거 같습니다

다음에 사용해 볼 기회가 있었으면 좋겠습니다