🔑 JWT(Json Web Token)

웹 상에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 생성한 암호화된 토큰이다

JWT는 Json Web Token의 약자로 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 이 토큰은 클레임(Claim) 토큰 기반으로 되어있다.

📎 JWT의 구성요소

JWT는 헤더(header), 페이로드(payload), 서명(signature) 세 파트로 나눠져 있으며, 아래와 같은 형태로 구성되어 있다.

• 헤더 (Header) 어떠한 알고리즘으로 암호화 할 것인지, 어떠한 토큰을 사용할 것 인지에 대한 정보가 들어있다.
• 정보 (Payload) 전달하려는 정보(사용자 id나 다른 데이터들, 이것들을 클레임이라고 부른다)가 들어있다. payload에 있는 내용은 수정이 가능하여 더 많은 정보를 추가할 수 있다. 그러나 노출과 수정이 가능한 지점이기 때문에 인증이 필요한 최소한의 정보(아이디, 비밀번호 등 개인정보가 아닌 이 토큰을 가졌을 때 권한의 범위나 토큰의 발급일과 만료일자 등)만을 담아야한다.
• 서명 (Signature) 가장 중요한 부분으로 헤더와 정보를 합친 후 발급해준 서버가 지정한 secret key로 암호화 시켜 토큰을 변조하기 어렵게 만들어준다. 한가지 예를 들어보자면 토큰이 발급된 후 누군가가 Payload의 정보를 수정하면 Payload에는 다른 누군가가 조작된 정보가 들어가 있지만 Signatute에는 수정되기 전의 Payload 내용을 기반으로 이미 암호화 되어있는 결과가 저장되어 있기 때문에 조작되어있는 Payload와는 다른 결과값이 나오게 된다. 이러한 방식으로 비교하면 서버는 토큰이 조작되었는지 아닌지를 쉽게 알 수 있고, 다른 누군가는 조작된 토큰을 악용하기가 어려워진다.

📎 JWT의 동작원리

JWT의 동작원리에 대해서는 다음과 같이 설명할 수 있다. 1.사용자가 id와 password를 입력하여 로그인 요청을 한다. 2.서버는 회원DB에 들어가 있는 사용자인지 확인을 한다. 3.확인이 되면 서버는 로그인 요청 확인 후, secret key를 통해 토큰을 발급한다. 4.이것을 클라이언트에 전달한다. 5.서비스 요청과 권한을 확인하기 위해서 헤더에 데이터(JWT) 요청을 한다. 6.데이터를 확인하고 JWT에서 사용자 정보를 확인한다. 7.클라이언트 요청에 대한 응답과 요청한 데이터를 전달해준다.

이와 같이 토큰 기반 인증방식은 사용자의 인증이 완료된 이후에 토큰을 발급한다. 클라이언트쪽에서는 전달받은 토큰을 저장해두고 서버에 요청을 할 때마다 해당 토큰을 서버에 함께 전달한다. 그 이후 서버는 토큰을 검증하고 응답하는 방식으로 작동한다.

📎 JWT의 특징

• 토큰 자체가 데이터를 가지고 있음
  • 누구나 열어볼 수 있기 때문에 중요한 정보는 넣으면 안됨
• 다른 토큰보다 길이가 길다
• 토큰을 강제로 만료시킬 방법이 없다.
• 뱅킹서비스, 주신관련 서비스 등 실시간 보안이 중요한 곳은 JWT를 쓰기보다 DB에 부담을 주더라도 DB에 토큰을 넣는 방식을 선택하는 게 나을 수 있음
• 보안보다 사용성이 중요한 어플리케이션에선 정보를 넣을 수 있는게 큰 장점이 될 수 있음
• 만료기간이 짧은 access 토큰과 달리 refresh 토큰은 만료기간이 매우 김

📎 세션-쿠키 방식과 비교

📍 세션-쿠키 인증 방식?

세션-쿠키 인증방식은 로그인에서 아직까지 제일 많이 쓰이는 인증방식

쿠키(Cookie)

• 클라이언트(브라우저)의 저장소
• 브라우저에 300개 까지 저장가능, 도메인당 20개 까지, 개당 4kB까지 저장
• 구성 요소
  • Name-value
  • 유효기간(MaxAge or Expires)
  • 도메인(Domain) : 쿠키를 전송할 도메인
  • 경로(Path) : 서버가 라우팅 할 때 사용하는 경로, default : "/"
    • 서버에서 Path 하위 모든 route에 쿠키가 전송 됨
  • Secure : true로 설정된 경우 HTTPS인 경우에만 쿠키를 전송
  • HttpOnly : 자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정
    • true : js에서 쿠키접근 불가능
    • false(default) : XSS 공격에 취약
  • SameSite : Cross-Origin 요청을 받은 경우, 쿠키 전송 여부 결정
    • Lax : Cross-origin 요청 시 'GET' 메소드에 대해서만 쿠키 전송
    • Stric : Same-site 인 경우에만 쿠키 전송
    • None : 항상 쿠키 전송 가능하지만 Secure 옵션 활성화 필요

세션(서버의 저장소)

• 서버쪽 쿠키, key-value로 이루어진 객체
• 서버에선 클라이언트 구분을 위해 세션 ID를 부여
  • 클라이언트가 request를 보내면 서버가 헤더에 쿠키를 담아 보낼 때 세션ID를 보냄
  • 보안면에서 쿠키보다 우수
  • 사용자가 많아지면 서버메모리를 많이 차지하게 됨

📍 세션과 쿠키의 차이

• 비슷 함, 결국 세션도 쿠키를 이용하여 서버에 저장 하는 것
• 브라우저 종료를 세션에 알려주려면 beforeunload 이벤트를 이용 할 수 있음

📍 토큰방식(JWT)과 세션-쿠키 방식의 차이

• 세션쿠키 방식은 세션ID만 보냄
• 세션이 서버의 메모리를 필요로 함