자바스크립트로 라이브러리를 사용하지 않고 jwt 토큰을 해독하는 방법?

자바스크립트를 사용하여 JWT의 페이로드를 어떻게 디코딩할 수 있을까요? 라이브러리 없이. 토큰은 프론트엔드 앱에서 사용할 수 있는 페이로드 객체를 반환합니다.

예시 토큰: xxxxxxxxx.XXXXXXXX.xxxxxxxx

그리고 결과는 다음과 같습니다:

{exp: 10012016 name: john doe, scope:['admin']}

답변 1

참고: 이는 서명을 확인하지 않고 토큰에서 JSON 페이로드를 추출하기 때문에 변조될 수 있습니다.

브라우저

유니코드 텍스트 JWT 파서 함수 작동:

function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
}

JWT는 base64url (RFC 4648 §5)을 사용하므로 base64만 사용하는 atob 만으로는 충분하지 않습니다.

Node.js

function parseJwt (token) {
    return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
}

답변 2

How to decode JWT 토큰 in JavaScript without using a library?
JWT (JSON Web Token)는 인증 및 정보 교환을 위해 사용되는 암호화된 토큰입니다. JWT 토큰을 받은 경우, 종종 해당 토큰의 내용을 읽어야 할 때가 있습니다. JavaScript를 사용하여 라이브러리 없이 JWT 토큰을 해독하는 방법에 대해 알아보겠습니다.
1. JWT의 구조 이해하기:
JWT는 세 개의 부분(header, payload, signature)으로 구성되어 있습니다. 이 세 가지 부분은 Base64URL로 인코딩되어 토큰 형태로 전송됩니다. 알고리즘에 따라 헤더와 페이로드가 서명되어 시그니처가 생성됩니다.
2. 토큰을 가져오기:
먼저, JWT 토큰을 변수에 저장해야 합니다. 토큰은 일반적으로 서버에서 발급받거나 다른 방법으로 전달됩니다. 다음과 같이 토큰을 변수에 할당합니다.
```js
const token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c;
```
3. 토큰 파싱하기:
JWT 토큰은 `.`으로 구분된 세 부분으로 이루어져 있습니다. 토큰을 이 부분으로 분리해야 합니다. 다음 코드를 사용하여 토큰을 분리합니다.
```js
const tokenParts = token.split('.');
const header = tokenParts[0];
const payload = tokenParts[1];
const signature = tokenParts[2];
```
4. Base64URL 디코딩:
헤더와 페이로드는 Base64URL로 인코딩되어 있으므로 디코딩해야 합니다. 이를 위해 atob() 함수를 사용하여 Base64URL을 디코딩합니다.
```js
const decodedHeader = atob(header);
const decodedPayload = atob(payload);
```
5. 디코딩된 JSON 확인:
디코딩된 헤더와 페이로드는 JSON 형태입니다. JSON.parse() 함수를 사용하여 이를 객체로 변환하여 사용할 수 있습니다.
```js
const headerObj = JSON.parse(decodedHeader);
const payloadObj = JSON.parse(decodedPayload);
```
6. 결과 확인:
이제 디코딩한 토큰의 내용을 확인할 수 있습니다. 헤더와 페이로드는 일반적으로 클레임 정보 또는 토큰의 유용한 데이터를 포함하고 있습니다.
```js
console.log(headerObj);
console.log(payloadObj);
```
이렇게 하여 JavaScript에서 라이브러리를 사용하지 않고 JWT 토큰을 해독할 수 있습니다. 이 방법을 통해 JWT 토큰을 이해하고 내용을 추출하여 인증 절차나 유용한 정보를 활용할 수 있습니다. 주의해야 할 점은 암호화된 시그니처 부분은 서버에서 확인해야 한다는 점입니다.