mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 16:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(jwt-parser): simplified code

Browse source
This commit is contained in:
Corentin Thomasset 2023-01-13 13:59:27 +01:00
parent acc7f0a586
commit f52f7a845c
No known key found for this signature in database
GPG key ID: 3103EB5E79496F9C
8 changed files with 203 additions and 558 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/tools/jwt-parser/claim.vue
View file

@ -1,29 +0,0 @@
<template>
<n-space>
<em>{{ claim }}</em>
<span v-if="label.label !== claim">
<n-popover placement="right" trigger="hover">
<template #trigger>
<n-icon :component="InfoCircle" trigger />
</template>
{{ label.label }}
<template v-if="label.ref !== ''" #footer> {{ label.ref }} </template>
</n-popover>
</span>
</n-space>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { InfoCircle } from '@vicons/tabler';
import { getClaimLabel } from './jwt-parser.service';
const props = defineProps({
claim: {
type: String,
default: '',
},
});
const label = computed(() => getClaimLabel(props.claim ? props.claim : ''));
</script>

20
src/tools/jwt-parser/index.ts
View file

@ -4,8 +4,24 @@ import { defineTool } from '../tool';
export const tool = defineTool({
name: 'JWT parser',
path: '/jwt-parser',
description: 'Parse a JWT (JSON Web Token) to display its content.',
keywords: ['jwt', 'parser'],
description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
keywords: [
'jwt',
'parser',
'decode',
'typ',
'alg',
'iss',
'sub',
'aud',
'exp',
'nbf',
'iat',
'jti',
'json',
'web',
'token',
],
component: () => import('./jwt-parser.vue'),
icon: Key,
});

92
src/tools/jwt-parser/jwt-parser.constants.ts Normal file
View file

@ -0,0 +1,92 @@
// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
export const ALGORITHM_DESCRIPTIONS: { [k: string]: string } = {
HS256: 'HMAC using SHA-256',
HS384: 'HMAC using SHA-384',
HS512: 'HMAC using SHA-512',
RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
ES256: 'ECDSA using P-256 and SHA-256',
ES384: 'ECDSA using P-384 and SHA-384',
ES512: 'ECDSA using P-521 and SHA-512',
PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
none: 'No digital signature or MAC performed',
};
// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
export const CLAIM_DESCRIPTIONS: Record<string, string> = {
typ: 'Type',
alg: 'Algorithm',
iss: 'Issuer',
sub: 'Subject',
aud: 'Audience',
exp: 'Expiration Time',
nbf: 'Not Before',
iat: 'Issued At',
jti: 'JWT ID',
name: 'Full name',
given_name: 'Given name(s) or first name(s)',
family_name: 'Surname(s) or last name(s)',
middle_name: 'Middle name(s)',
nickname: 'Casual name',
preferred_username: 'Shorthand name by which the End-User wishes to be referred to',
profile: 'Profile page URL',
picture: 'Profile picture URL',
website: 'Web page or blog URL',
email: 'Preferred e-mail address',
email_verified: 'True if the e-mail address has been verified; otherwise false',
gender: 'Gender',
birthdate: 'Birthday',
zoneinfo: 'Time zone',
locale: 'Locale',
phone_number: 'Preferred telephone number',
phone_number_verified: 'True if the phone number has been verified; otherwise false',
address: 'Preferred postal address',
updated_at: 'Time the information was last updated',
azp: 'Authorized party - the party to which the ID Token was issued',
nonce: 'Value used to associate a Client session with an ID Token',
auth_time: 'Time when the authentication occurred',
at_hash: 'Access Token hash value',
c_hash: 'Code hash value',
acr: 'Authentication Context Class Reference',
amr: 'Authentication Methods References',
sub_jwk: 'Public key used to check the signature of an ID Token',
cnf: 'Confirmation',
sip_from_tag: 'SIP From tag header field parameter value',
sip_date: 'SIP Date header field value',
sip_callid: 'SIP Call-Id header field value',
sip_cseq_num: 'SIP CSeq numeric header field parameter value',
sip_via_branch: 'SIP Via branch header field parameter value',
orig: 'Originating Identity String',
dest: 'Destination Identity String',
mky: 'Media Key Fingerprint String',
events: 'Security Events',
toe: 'Time of Event',
txn: 'Transaction Identifier',
rph: 'Resource Priority Header Authorization',
sid: 'Session ID',
vot: 'Vector of Trust value',
vtm: 'Vector of Trust trustmark URL',
attest: 'Attestation level as defined in SHAKEN framework',
origid: 'Originating Identifier as defined in SHAKEN framework',
act: 'Actor',
scope: 'Scope Values',
client_id: 'Client Identifier',
may_act: 'Authorized Actor - the party that is authorized to become the actor',
jcard: 'jCard data',
at_use_nbr: 'Number of API requests for which the access token can be used',
div: 'Diverted Target of a Call',
opt: 'Original PASSporT (in Full Form)',
vc: 'Verifiable Credential as specified in the W3C Recommendation',
vp: 'Verifiable Presentation as specified in the W3C Recommendation',
sph: 'SIP Priority header field',
ace_profile: 'ACE profile a token is supposed to be used with.',
cnonce: 'Client nonce',
exi: 'Expires in',
roles: 'Roles',
groups: 'Groups',
entitlements: 'Entitlements',
token_introspection: 'Token introspection response',
};

457
src/tools/jwt-parser/jwt-parser.service.ts
View file

@ -1,429 +1,46 @@
import jwt_decode, { InvalidTokenError } from 'jwt-decode';
import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
import _ from 'lodash';
import { match } from 'ts-pattern';
import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
interface JWT {
header: Map<string, unknown>;
payload: Map<string, unknown>;
export { decodeJwt };
function decodeJwt({ jwt }: { jwt: string }) {
const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
const rawPayload = jwtDecode<JwtPayload>(jwt);
const header = _.map(rawHeader, (value, claim) => parseClaims({ claim, value }));
const payload = _.map(rawPayload, (value, claim) => parseClaims({ claim, value }));
return {
header,
payload,
};
}
export function safeJwtDecode(rawJwt: string): JWT {
try {
const header = jwt_decode(rawJwt, { header: true }) as Map<string, unknown>;
const payload = jwt_decode(rawJwt) as Map<string, unknown>;
return { header, payload };
} catch (e) {
if (e instanceof InvalidTokenError) {
return { header: new Map<string, unknown>(), payload: new Map<string, unknown>() };
} else {
throw e;
}
}
function parseClaims({ claim, value }: { claim: string; value: unknown }) {
const claimDescription = CLAIM_DESCRIPTIONS[claim];
const formattedValue = _.toString(value);
const friendlyValue = getFriendlyValue({ claim, value });
return {
value: formattedValue,
friendlyValue,
claim,
claimDescription,
};
}
export function getClaimLabel(claim: string): { label: string; ref: string } {
const infos = STANDARD_CLAIMS.find((info) => info.name === claim);
if (infos) {
return { label: infos.long_name, ref: infos.ref };
}
switch (claim) {
case 'typ':
return { label: 'Type', ref: '' };
case 'alg':
return { label: 'Algorithm', ref: '' };
}
return { label: claim, ref: '' };
function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
return match(claim)
.with('exp', 'nbf', 'iat', () => dateFormatter(value))
.with('alg', () => (_.isString(value) ? ALGORITHM_DESCRIPTIONS[value] : undefined))
.otherwise(() => undefined);
}
export function parseClaimValue(claim: string, value: unknown): { value: unknown; extension?: unknown } {
switch (claim) {
case 'exp':
case 'nbf':
case 'iat': {
// Convert to milliseconds, JWT specs says it should be in seconds, JS
// works with milliseconds
value = typeof value === 'string' ? parseInt(value) : value;
const date = new Date((value as number) * 1000);
return { value: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`, extension: value };
}
case 'alg':
return { value: AlgorithmKeyDescriptionMapping[value as string], extension: value };
default:
if (typeof value === 'boolean') {
// Perhaps there's a better way to do this?
return { value: value ? 'true' : 'false' };
}
return { value: value };
}
}
const dateFormatter = (value: unknown) => {
if (_.isNil(value)) return undefined;
// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
const AlgorithmKeyDescriptionMapping: { [k: string]: string } = {
HS256: 'HMAC using SHA-256',
HS384: 'HMAC using SHA-384',
HS512: 'HMAC using SHA-512',
RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
ES256: 'ECDSA using P-256 and SHA-256',
ES384: 'ECDSA using P-384 and SHA-384',
ES512: 'ECDSA using P-521 and SHA-512',
PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
none: 'No digital signature or MAC performed',
const date = new Date(Number(value) * 1000);
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
};
// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
const STANDARD_CLAIMS = [
{
name: 'iss',
long_name: 'Issuer',
ref: '[RFC7519 - Section 4.1.1]',
},
{
name: 'sub',
long_name: 'Subject',
ref: '[RFC7519 - Section 4.1.2]',
},
{
name: 'aud',
long_name: 'Audience',
ref: '[RFC7519 - Section 4.1.3]',
},
{
name: 'exp',
long_name: 'Expiration Time',
ref: '[RFC7519 - Section 4.1.4]',
},
{
name: 'nbf',
long_name: 'Not Before',
ref: '[RFC7519 - Section 4.1.5]',
},
{
name: 'iat',
long_name: 'Issued At',
ref: '[RFC7519 - Section 4.1.6]',
},
{
name: 'jti',
long_name: 'JWT ID',
ref: '[RFC7519 - Section 4.1.7]',
},
{
name: 'name',
long_name: 'Full name',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'given_name',
long_name: 'Given name(s) or first name(s)',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'family_name',
long_name: 'Surname(s) or last name(s)',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'middle_name',
long_name: 'Middle name(s)',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'nickname',
long_name: 'Casual name',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'preferred_username',
long_name: 'Shorthand name by which the End-User wishes to be referred to',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'profile',
long_name: 'Profile page URL',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'picture',
long_name: 'Profile picture URL',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'website',
long_name: 'Web page or blog URL',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'email',
long_name: 'Preferred e-mail address',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'email_verified',
long_name: 'True if the e-mail address has been verified; otherwise false',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'gender',
long_name: 'Gender',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'birthdate',
long_name: 'Birthday',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'zoneinfo',
long_name: 'Time zone',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'locale',
long_name: 'Locale',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'phone_number',
long_name: 'Preferred telephone number',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'phone_number_verified',
long_name: 'True if the phone number has been verified; otherwise false',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'address',
long_name: 'Preferred postal address',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'updated_at',
long_name: 'Time the information was last updated',
ref: '[OpenID Connect Core 1.0 - Section 5.1]',
},
{
name: 'azp',
long_name: 'Authorized party - the party to which the ID Token was issued',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'nonce',
long_name: 'Value used to associate a Client session with an ID Token',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'auth_time',
long_name: 'Time when the authentication occurred',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'at_hash',
long_name: 'Access Token hash value',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'c_hash',
long_name: 'Code hash value',
ref: '[OpenID Connect Core 1.0 - Section 3.3.2.11]',
},
{
name: 'acr',
long_name: 'Authentication Context Class Reference',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'amr',
long_name: 'Authentication Methods References',
ref: '[OpenID Connect Core 1.0 - Section 2]',
},
{
name: 'sub_jwk',
long_name: 'Public key used to check the signature of an ID Token',
ref: '[OpenID Connect Core 1.0 - Section 7.4]',
},
{
name: 'cnf',
long_name: 'Confirmation',
ref: '[RFC7800 - Section 3.1]',
},
{
name: 'sip_from_tag',
long_name: 'SIP From tag header field parameter value',
ref: '[RFC8055][RFC3261]',
},
{
name: 'sip_date',
long_name: 'SIP Date header field value',
ref: '[RFC8055][RFC3261]',
},
{
name: 'sip_callid',
long_name: 'SIP Call-Id header field value',
ref: '[RFC8055][RFC3261]',
},
{
name: 'sip_cseq_num',
long_name: 'SIP CSeq numeric header field parameter value',
ref: '[RFC8055][RFC3261]',
},
{
name: 'sip_via_branch',
long_name: 'SIP Via branch header field parameter value',
ref: '[RFC8055][RFC3261]',
},
{
name: 'orig',
long_name: 'Originating Identity String',
ref: '[RFC8225 - Section 5.2.1]',
},
{
name: 'dest',
long_name: 'Destination Identity String',
ref: '[RFC8225 - Section 5.2.1]',
},
{
name: 'mky',
long_name: 'Media Key Fingerprint String',
ref: '[RFC8225 - Section 5.2.2]',
},
{
name: 'events',
long_name: 'Security Events',
ref: '[RFC8417 - Section 2.2]',
},
{
name: 'toe',
long_name: 'Time of Event',
ref: '[RFC8417 - Section 2.2]',
},
{
name: 'txn',
long_name: 'Transaction Identifier',
ref: '[RFC8417 - Section 2.2]',
},
{
name: 'rph',
long_name: 'Resource Priority Header Authorization',
ref: '[RFC8443 - Section 3]',
},
{
name: 'sid',
long_name: 'Session ID',
ref: '[OpenID Connect Front-Channel Logout 1.0 - Section 3]',
},
{
name: 'vot',
long_name: 'Vector of Trust value',
ref: '[RFC8485]',
},
{
name: 'vtm',
long_name: 'Vector of Trust trustmark URL',
ref: '[RFC8485]',
},
{
name: 'attest',
long_name: 'Attestation level as defined in SHAKEN framework',
ref: '[RFC8588]',
},
{
name: 'origid',
long_name: 'Originating Identifier as defined in SHAKEN framework',
ref: '[RFC8588]',
},
{
name: 'act',
long_name: 'Actor',
ref: '[RFC8693 - Section 4.1]',
},
{
name: 'scope',
long_name: 'Scope Values',
ref: '[RFC8693 - Section 4.2]',
},
{
name: 'client_id',
long_name: 'Client Identifier',
ref: '[RFC8693 - Section 4.3]',
},
{
name: 'may_act',
long_name: 'Authorized Actor - the party that is authorized to become the actor',
ref: '[RFC8693 - Section 4.4]',
},
{
name: 'jcard',
long_name: 'jCard data',
ref: '[RFC8688][RFC7095]',
},
{
name: 'at_use_nbr',
long_name: 'Number of API requests for which the access token can be used',
ref: '[ETSI GS NFV-SEC 022 V2.7.1]',
},
{
name: 'div',
long_name: 'Diverted Target of a Call',
ref: '[RFC8946]',
},
{
name: 'opt',
long_name: 'Original PASSporT (in Full Form)',
ref: '[RFC8946]',
},
{
name: 'vc',
long_name: 'Verifiable Credential as specified in the W3C Recommendation',
ref: '[W3C Recommendation Verifiable Credentials Data Model 1.0 - Expressing verifiable information on the Web (19 November 2019) - Section 6.3.1]',
},
{
name: 'vp',
long_name: 'Verifiable Presentation as specified in the W3C Recommendation',
ref: '[W3C Recommendation Verifiable Credentials Data Model 1.0 - Expressing verifiable information on the Web (19 November 2019) - Section 6.3.1]',
},
{
name: 'sph',
long_name: 'SIP Priority header field',
ref: '[RFC9027]',
},
{
name: 'ace_profile',
long_name: 'The ACE profile a token is supposed to be used with.',
ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10]',
},
{
name: 'cnonce',
long_name:
'client-nonce. A nonce previously provided to the AS by the RS via the client. Used to verify token freshness when the RS cannot synchronize its clock with the AS.',
ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10]',
},
{
name: 'exi',
long_name:
'Expires in. Lifetime of the token in seconds from the time the RS first sees it. Used to implement a weaker from of token expiration for devices that cannot synchronize their internal clocks.',
ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10.3]',
},
{
name: 'roles',
long_name: 'Roles',
ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
},
{
name: 'groups',
long_name: 'Groups',
ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
},
{
name: 'entitlements',
long_name: 'Entitlements',
ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
},
{
name: 'token_introspection',
long_name: 'Token introspection response',
ref: '[RFC-ietf-oauth-jwt-introspection-response-12 - Section 5]',
},
];

63
src/tools/jwt-parser/jwt-parser.vue
View file

@ -4,48 +4,59 @@
<n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
</n-form-item>
<n-table>
<n-table v-if="validation.isValid">
<tbody>
<td colspan="2" class="table-header"><strong>Header</strong></td>
<tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key">
<td class="claims"><claim-vue :claim="key" /></td>
<td>
<value-vue :claim="key" :value="value" />
</td>
</tr>
<td colspan="2" class="table-header"><strong>Payload</strong></td>
<tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key">
<td class="claims"><claim-vue :claim="key" /></td>
<td>
<value-vue :claim="key" :value="value" />
</td>
</tr>
<template v-for="section of sections" :key="section.key">
<th colspan="2" class="table-header">{{ section.title }}</th>
<tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
<td class="claims">
<n-space>
<n-text strong>{{ claim }}</n-text>
<template v-if="claimDescription">
<n-text depth="3">({{ claimDescription }})</n-text>
</template>
</n-space>
</td>
<td>
<n-space>
<n-text>{{ value }}</n-text>
<template v-if="friendlyValue">
<n-text depth="3">({{ friendlyValue }})</n-text>
</template>
</n-space>
</td>
</tr>
</template>
</tbody>
</n-table>
</n-card>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import jwt_decode from 'jwt-decode';
import { useValidation } from '@/composable/validation';
import { isNotThrowing } from '@/utils/boolean';
import { safeJwtDecode } from './jwt-parser.service';
import claimVue from './claim.vue';
import valueVue from './value.vue';
import { withDefaultOnError } from '@/utils/defaults';
import { computed, ref } from 'vue';
import { decodeJwt } from './jwt-parser.service';
const rawJwt = ref(
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
);
const decodedJWT = computed(() => {
return safeJwtDecode(rawJwt.value);
});
const decodedJWT = computed(() =>
withDefaultOnError(() => decodeJwt({ jwt: rawJwt.value }), { header: [], payload: [] }),
);
const sections = [
{ key: 'header', title: 'Header' },
{ key: 'payload', title: 'Payload' },
] as const;
const validation = useValidation({
source: rawJwt,
rules: [
{
validator: (value) => value.length > 0 && isNotThrowing(() => jwt_decode(value, { header: true })),
validator: (value) => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
message: 'Invalid JWT',
},
],
@ -56,8 +67,4 @@ const validation = useValidation({
.table-header {
text-align: center;
}
.claims {
width: 20%;
}
</style>

24
src/tools/jwt-parser/value.vue
View file

@ -1,24 +0,0 @@
<template>
<n-space>
{{ value.value }}
<em v-if="value.extension">({{ value.extension }})</em>
</n-space>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { parseClaimValue } from './jwt-parser.service';
const props = defineProps({
claim: {
type: String,
default: '',
},
value: {
type: String,
default: '',
},
});
const value = computed(() => parseClaimValue(props.claim, props.value));
</script>