[Web] jwt 소개

2022. 11. 8.·🎨 프론트엔드 공부/기타

JWT : JSON Web Token의 약자

 

- 데이터를 JSON 형태로 안전하게 주고 받기 위한 개방형 표준 (RFC 7519를 따르고 있음)

- 전자서명되어 위변조 불가

- 회원 가입, 로그인 등의 권한 부여(authorization) 과정에서 폭넓게 사용됨

- 토큰 자체에 정보를 포함할 수 있음 (payload)

 

Token이란

- 토큰은 세션과 달리 서버가 아닌 클라이언트에 저장됨

 

Authorization 활용 시나리오

- 유저가 한번 로그인하면, 이후의 모든 요청의 헤더에 JWT가 포함됨

- 이 토큰을 통해 유저가 허용된 라우트 및 리소스 등에 접근 가능 (서버가 토큰을 검증)

 

JWT 구조

1. Header

2. Payload

3. Signature

-> 토큰은 xxxxx.yyyyy.zzzzz 같은 모양을 갖는다

 

1. Header

헤더는 일반적으로 2가지로 구성된다

- 해시 알고리즘

- JWT  타입

 

{
  "alg": "HS256", // 해시 알고리즘 (SHA256 or RSA 등)
  "typ": "JWT" // JWT 타입
}

 

그리고 이 헤더는 Base64url로 인코딩되어 JWT의 1번째 부분을 형성한다

 

Base64 : 공통적으로 사용되는 아스키코드 0~64. 즉, 대소문자 알파벳, 숫자, +, /
Base64url : URL에서 오류 없이 사용 가능하도록 Base64에서 +, / 을 각각 -, _ 로 바꿈

 

2. Payload

- 서버에서 첨부한 유저 권한 정보 및 데이터가 담겨 있다

 

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

 

- 토큰이 암호화되면 변조로부터 보호된다.

- 하지만 암호화된 토큰도 누구나 읽을 수 있기 때문에, 암호화하지 않은 데이터를 payload에 넣어서는 안된다.

- payload도 Base64url로 인코딩된다

 

3. signature

- 인코딩된 헤더, 인코딩된 페이로드, 개인 키(secret)가 헤더에 지정된 hash 알고리즘을 통해 변환되어 생성된다

 

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

 

 

 

완성된 JWT

- Base64url(header) . Base64url(payload) . Base64url(signature) 형태로 만들어진다

 

 

 

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • Vite - 매우 빠른 React 개발 환경
  • [Web] jwt 작동 원리
  • 02 - 리졸버 (resolver)
  • 01 - 스키마
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (513) N
      • 🎨 프론트엔드 공부 (250) N
        • JS & TS (89) N
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
[Web] jwt 소개
상단으로

티스토리툴바