開発のきっかけ：オンラインデバッガーへの「言いようのない恐怖」
Web開発、特に認証周りのデバッグをしていると、eyJhb... で始まる長いJWT（JSON Web Token）を眺める時間は非常に長くなります。このトークンの中身をサクッと確認するために、Googleで「JWT Decode」と検索したことがある方は多いでしょう。
しかし、セキュリティを学べば学ぶほど、これは非常に恐ろしいことだと気づかされます。
JWTにはユーザーのメールアドレスやID、さらにはシステム内部の権限情報が含まれていることが多々あります。もしそれが本番環境のトークンであれば、**「見知らぬ誰かに、自分の家の合鍵を預けている」**のと大差ありません。
「教育を受ける側だけでなく、作る側が心から安心して使える『聖域』のような検証場所が必要だ」。
JWT デコード/検証ツール の開発は、この「オンラインツールへの健全な不信感」から始まりました。
技術的なこだわり：ブラウザを「鉄壁の実行環境」に変える
単にデコードするだけなら Base64 を戻すだけですが、私がこだわったのは「署名の検証（Verify）」まで含めた本格的な機能を、完全にローカルで実現することでした。
1. モダンなセキュリティの守護神 jose の導入
暗号化周りのロジックを自前で書くのは、セキュリティエンジニアとして最大の禁忌です。
そこで、現代のWeb標準において最も信頼性が高く、Web Crypto API をフル活用している jose ライブラリを採用しました。
import * as jose from 'jose';
// サーバーに送ることなく、ブラウザ上だけで署名を検証
const secretKey = new TextEncoder().encode(secret);
const { payload, protectedHeader } = await jose.jwtVerify(token, secretKey);このライブラリを使うことで、あなたのPCの外に一滴も情報を漏らすことなく、「このトークンは本物か？」を瞬時に判断できる環境を整えました。
2. 「現場の困りごと」を見捨てないフォールバック
一方で、開発現場では「すでに壊れているトークン」を調査しなければならないシーンもあります。
厳密なライブラリだとパースエラーで止まってしまいますが、「エラーが出るのは分かってる、でも中身の欠片だけでも見たいんだ！」というのがエンジニアの本音ですよね。
そこで、正規の検証とは別に、多少壊れていても無理やり中身をこじ開ける Base64 デコードのフォールバックも実装しました。
// 多少のフォーマット崩れは飲み込んで、JSONを救い出す
const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
const json = decodeURIComponent(atob(base64));「標準を尊重する厳格さ」と、「現場のドロドロした問題に寄り添う柔軟さ」。この両立こそが、道具としての美学だと思っています。
「沈黙」という名の安心
このツールを動かしているとき、ブラウザのネットワークタブを見てみてください。
デコードボタンを押しても、署名検証ボタンを押しても、通信は一切発生しません。
この「沈黙」こそが、私たちが誇る最大のセキュリティ機能です。
まとめ
JWTツールは、複雑な技術を「安全性を1ミリも損なわずに、どこまで身近にできるか」という私なりの挑戦でした。
機密性の高いトークンを扱うとき、ふと「あ、あそこでなら安心して試せるな」と思い出していただける。そんな存在になれたら、これほど嬉しいことはありません。
もっと自由に、もっと安全に。あなたの認証開発が、少しでも軽やかになりますように。