認証トークンの作成から署名検証までの流れをインタラクティブに可視化します
JWT(JSON Web Token)は、ウェブアプリケーションで「ログイン済みであること」を証明するためのトークンです。誰が作るのか? — サーバー(バックエンド)が作ります。ユーザーがIDとパスワードでログインに成功したとき、サーバーが「この人は認証済みです」という情報を詰め込んだJWTトークンを生成し、ブラウザに返します。いつ使うのか? — ログイン後のすべてのリクエストで使います。ブラウザはサーバーから受け取ったJWTを保存しておき、APIにアクセスするたびに「Authorization: Bearer eyJhbG...」というHTTPヘッダーに添えて送ります。サーバーはこのトークンを検証するだけで、誰からのリクエストかを判断できます。セッションIDと違い、サーバー側でログイン状態を記憶しておく必要がありません(ステートレス)。トークン自体にユーザー情報が含まれているため、データベースを参照せずに認証を確認できます。Auth0、Firebase Authentication、AWS Cognitoなどの認証サービスで広く使われています。
JWT は実は「フォーマットの名前」で、実際のトークンの実装方式として JWS(署名付き)と JWE(暗号化)の2種類があります。一般的に「JWT」と言ったときはほぼ JWS のことを指します。
JWS は「中身は誰でも読めるが、改ざんされていないことを署名で保証する」という仕組みです。暗号化ではないので、ペイロードを Base64URL デコードすれば誰でも読めます。
| JWS(署名) | JWE(暗号化) | |
|---|---|---|
| 目的 | 改ざんの検知 | 中身を隠す(暗号化) |
| 中身 | 誰でも読める(Base64URL) | 復号しないと読めない |
| 構成 | 3パート(Header.Payload.Sig) | 5パート |
| 使用頻度 | ほぼこちら(一般的な JWT) | まれ(特殊な要件時のみ) |
| パフォーマンス | 高速(ハッシュ計算のみ) | 低速(暗号化+復号) |
JWTトークンは、3つのパートをドット(.)で繋いだ1本の文字列です。見た目は意味不明な英数字の羅列ですが、ドットで区切ると役割がはっきり分かれています。
{
"alg": "HS256",
"typ": "JWT"
}{
"sub": "user_1234",
"name": "田中太郎",
"role": "user",
"iat": 1709280000,
"exp": 1709366400
}HMAC-SHA256( base64url(header) + "." + base64url(payload), secret_key )
Authorization: Bearer <token> としてBearerトークンを取得します。.)で区切ってheader, payload, signatureの3パートに分割します。
ブラウザとサーバー間のHTTPリクエスト/レスポンスの仕組みを可視化

直列リクエストと多重化の違いをウォーターフォールチャートで比較

HTTPSで安全に通信するためのTLSハンドシェイクの仕組みを可視化

サーバーからクライアントへの一方向リアルタイムストリーミング通信

UDPベースの次世代トランスポートプロトコル。0-RTT接続、ストリーム多重化、接続マイグレーションを可視化

MQTTブローカーを経由したPublish/Subscribeモデルの通信フローを可視化します