JWT 디코더

로그인 응답으로 받은 토큰이 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIi...처럼 점 두 개로 이어진 긴 문자열이라, 이 안에 사용자 ID가 뭐로 들어갔는지 만료가 언제인지 그냥 봐서는 하나도 안 보였던 적 있으실 겁니다. JWT 디코더는 이 토큰을 붙여넣으면 헤더와 페이로드를 읽을 수 있는 JSON으로 풀어 주고, 안에 든 exp 같은 시간 값도 사람이 읽는 날짜로 바꿔 보여 주는 도구입니다.

인증 붙일 때 백엔드가 발급한 토큰이 내가 기대한 클레임을 담고 있는지 매번 확인하고 싶은데, 그걸 볼 때마다 콘솔에서 atob 치거나 외부 사이트에 토큰을 붙여넣는 게 영 찜찜했습니다. 서버로 안 보내고 브라우저 안에서만 풀리게 해서, 그냥 제가 확인용으로 쓰려고 만들었습니다.

사용 방법

토큰 붙여넣기

디코더 탭이 열린 상태에서 왼쪽 입력창에 확인할 JWT를 통째로 붙여넣습니다. header.payload.signature 세 부분이 점으로 이어진 문자열이면 됩니다. 입력하는 즉시 오른쪽에 결과가 나오니 따로 변환 버튼을 누를 필요는 없습니다.

헤더·페이로드·만료시각 읽기

오른쪽에는 Header, Payload, Signature가 각각 나뉘어 표시됩니다. Header에서 서명 알고리즘(alg)을, Payload에서 sub·name 같은 실제 담긴 클레임을 바로 확인할 수 있습니다. 페이로드에 exp가 있으면 맨 위에 만료 여부가 초록(유효)이나 빨강(만료됨) 배지로 뜨고, iat(발급)·nbf(유효 시작)·exp(만료)는 아래 타임스탬프 칸에서 유닉스 시간 대신 한국 시각으로 풀어 보여 줍니다.

프론트엔드는 JWT 토큰을 어디에 저장할까?

브라우저에 이미 발급된 토큰을 확인하고 싶을 때는, 그게 어디 저장돼 있는지부터 알아야 합니다. 가장 흔한 곳은 두 군데입니다.

하나는 localStorage입니다. 개발자 도구를 열고 Application 탭 → Local Storage로 가면 accessToken 같은 키에 담긴 토큰 문자열이 보입니다. 그 값을 복사해 여기 입력창에 붙여넣으면 안을 바로 들여다볼 수 있죠. 자바스크립트에서 localStorage.getItem('accessToken')으로 바로 읽히는 만큼, 페이지에 끼어든 악성 스크립트(XSS)에도 그대로 노출된다는 뜻입니다.

다른 하나는 쿠키입니다. 서버가 Set-Cookie에 HttpOnly 옵션을 붙여 내려보내면, 그 쿠키는 자바스크립트에서 document.cookie로 못 읽습니다. XSS로 훔쳐 가기는 어려워지지만, 브라우저가 요청마다 쿠키를 자동으로 붙여 보내므로 이번엔 CSRF를 따로 막아 줘야 합니다. HttpOnly 쿠키에 든 토큰은 자바스크립트로 못 꺼내니, 확인하려면 개발자 도구의 Application 탭 → Cookies에서 값을 찾아 복사하면 됩니다. 어느 쪽도 공짜는 없고, 무엇을 막고 싶은지에 따라 고르는 트레이드오프입니다.

디코딩만으로 알 수 없는 것 (서명 검증 주의)

여기서 토큰이 풀려 내용이 보인다고 해서 그 토큰이 진짜라는 뜻은 아닙니다. 디코딩은 세 번째 조각인 서명을 그냥 문자열로 보여 줄 뿐, 그 서명이 올바른지는 검증하지 않습니다. 서명 검증은 발급자만 아는 비밀 키(HMAC)나 공개 키(RSA/ECDSA)가 있어야 가능하고, 누군가 페이로드를 바꿔치기했는지는 서버에서 검증해야 걸러집니다. 이 도구의 결과는 "안에 뭐가 들었나"를 읽는 용도이지 "믿어도 되나"를 판정하는 용도가 아닙니다.

그리고 이게 더 중요한데, 페이로드는 암호화가 아니라 그냥 base64url로 인코딩된 것뿐입니다. 토큰을 가진 사람은 누구나 여기 붙여넣기만 하면 그 안을 통째로 읽을 수 있습니다. 그러니 비밀번호, 주민등록번호, 결제 정보 같은 민감한 값을 페이로드에 담으면 안 됩니다. 토큰 안에는 식별자와 권한, 만료 시각 정도만 두고, 실제 비밀은 서버에만 두세요.