📱CS | JWT란?

🪙토큰이란?

버스탈 때 내던 동전, 내가 이 버스를 탈 수 있는 사람이라는 자격을 증명하는 수단

- 기술적 쓸모

권한을 주기 위해서, 신원 증명

---

로그인과 토큰

로그인에 토큰을 사용하는 이유

단순 HTTP 요청은 stateless(무상태성, 서버가 클라이언트의 상태를 저장하지 않음)의 특징을 갖고 있기 때문에, 데이터를 주고받을 수 있도록 하기 위해 토큰을 사용해 인증하여 “저 ‘000’이니 기능 실행 해주세요” 라는 데이터를 요청하고 응답을 받아올 수 있다.

토큰 기반 로그인 과정

1. (클라이언트 -> 서비스) 로그인 요청
2. (서비스 -> 클라이언트) 토큰 발급 및 전달
3. (클라이언트) 토큰 보관
4. (클라이언트) 토큰을 사용해 요청

실제 서비스에서의 구조

• 페이지에 저장된 토큰이 있는지 확인 쿠키, 세션 스토리지, 로컬 등등에 저장되어 있는 토큰이 있으면 아직 쓸 수 있는지 서버에 보내 토큰 유효성 검증을 한다. (보통 토큰 유효성 검사는 직접 구현하지 않고 서버에 요청하면 된다) 🧐 axios를 사용하는 경우라면 인터셉터를 이용해서 요청전에 토큰 검사를 하고 유효하지 않으면 리프레시 토큰을 통해 재발급하고 기존의 요청을 다시 실행하면 된다.
• 만약 서버에서 못쓴다고 하면 로그인을 다시 진행하고, 서버에 인증정보(id/pw)를 보낸 후 로그인 성공 시 서버에서 토큰을 발급한다. (애초에 토큰이 없으면 로그인부터 진행한다)
• 로그인 성공 후 토큰을 사용할 수 있게 된다.

---

JWT

🧐 JSON Web Token

토큰을 만드는 기술의 이름이면서 이 기술로 만들어진 토큰을 JWT라고 한다.

왼쪽 Encoded된 문자가 JWT 토큰의 형태로,
Decode하면 오른쪽과 같이 Header, Payload, Signature로 분류된다.

1) Header

• 암호화 규칙 - 암호화를 어떻게 처리할 것인지에 대한 규칙
• 토큰타입
• 오픈된 데이터 서버에 있다

Payload

• 데이터(클레임)
• 누가, 언제, 어떻게
• iat - 언제 발급되었는지에 대한 데이터 조각
• 오픈된 데이터 서버에 있다

Signature

• 암호화를 위한 데이터
• 토큰용 암호와 키를 넣어서 해싱한다.

→ Header + Payload + '시크릿 키' =Signature
유저가 로그인을 시도하면 (올바른 유저 정보가 전달되었을 때) 서버에서 Signature를 생성해서 내려준다. (클라이언트에서 생성하는 것 아님!)
서버에서 해당 JWT가 유효한 것인지 확인하기 위함으로,
클라이언트는 무엇을 넣어서 암호값이 되었는지 알 수 없다.
서버는 자신이 알고 있는 시크릿 키랑 같이 합쳐서 다시 해싱을 하여 검증할 수 있다.

🧐 서버에서는 암호화 되지 않은 secret key가 있고, signature에서는 암호화 된 secret key가 있다.

🧐 해싱이란?
뒤로 돌아갈 수 없는 암호화 기법, 즉 단방향으로만 가능하다.
복호화(푸는 것)를 할 수 없다.

서버는 자신이 갖고 있는 시크릿 키 값과 같은지 확인을 한다.
Signature가 올바르게 해싱을 했다면 헤더와 페이로드 모두 올바르게 들어갔을 것이라고 검증할 수 있다.

stateless token 사용 이유

• 토큰 자체가 스스로의 유효성을 검증하는 완결성을 가진다. (토큰 유효 기간까지도 검증)
• 서버에서는 매번 확인하는게 아니라 요청이 들어올때만 유효성을 알려주면 되기에 서버의 부담을 줄일 수 있다.

---

JWT 보관 방식과 보안

로컬스토리지의 문제

자바스크립트로 매우 쉽게 접근이 가능하다는 문제
XSS라는 공격 Script를 통한 해킹의 위험이 있다.

쿠키의 문제

CSRF - 쿠키에 저장할 때 유저가 어떤 스팸을 받아서 실수로 링크를 눌렀을 때 해당 링크인 악성사이트를 통해 서버 정보를 긁어오면서 쿠키에 있는 토큰을 획득해버릴 수 있다.

• 해결 방법 : CSRF -> httpOnly true 설정으로 방어
  httpOnly true 설정을 해두면 JS에서는 httpOnly 설정을 할 수 없기 때문에 악성사이트에서 JS로 접근하려는 것을 방지할 수 있다