Background: An “Indescribable Fear” of Online Debuggers
When working on web development, especially debugging authentication, we spend a lot of time staring at long JWTs (JSON Web Tokens) that start with eyJhb.... Many people have likely searched for “JWT Decode” on Google to quickly check the contents of these tokens.
However, the more you learn about security, the more you realize how terrifying this is.
JWTs often contain user email addresses, IDs, and even internal system permission information. If it’s a production token, using an unknown online tool is not much different from “entrusting a duplicate of your house keys to a total stranger.”
“We need a verification ‘sanctuary’ that not only students but also creators can use with total peace of mind.”
The development of our JWT Decode/Verify Tool began from this “healthy distrust of online tools.”
Technical Commitment: Turning the Browser into an “Impregnable Execution Environment”
If it’s just decoding, you can simply return the Base64. But what I insisted on was realizing full-fledged functionality, including “signature verification (Verify),” completely locally.
1. Introducing jose, the Guardian of Modern Security
Writing encryption-related logic on your own is the ultimate taboo for a security engineer.
Therefore, I adopted the jose library, which is the most reliable in modern web standards and makes full use of the Web Crypto API.
import * as jose from 'jose';
// Verify the signature entirely within the browser, without sending it to a server
const secretKey = new TextEncoder().encode(secret);
const { payload, protectedHeader } = await jose.jwtVerify(token, secretKey);By using this library, I set up an environment where you can instantly judge “Is this token the real deal?” without leaking a single drop of information outside your PC.
2. A Fallback that Doesn’t Abandon “On-site Troubles”
On the other hand, there are scenes in development where you have to investigate “tokens that are already broken.”
Strict libraries will stop with a parse error, but the developer’s honest feeling is: “I know it’ll error, but I want to see at least a fragment of the contents!”
So, separately from the legitimate verification, I also implemented a Base64 decode fallback that forces open the contents even if it’s somewhat broken.
// Swallowing some format corruption and rescuing the JSON
const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
const json = decodeURIComponent(atob(base64));“Strictness that respects standards” and “flexibility that stays close to messy on-site problems.” I believe this balance is the aesthetic of a tool.
Peace of Mind Named “Silence”
While running this tool, take a look at the browser’s network tab.
Even if you press the decode button or the signature verify button, no communication occurs.
This “silence” is the greatest security feature we boast.
Conclusion
The JWT tool was my own challenge of “how familiar can we make complex technology without compromising safety by even a millimeter.”
I couldn’t be happier if, when dealing with highly confidential tokens, you suddenly remember, “Oh, I can safely try it there.”
Be more free, and more safe. I hope your authentication development becomes even a little bit lighter.