JWTとは

CoddyのNode.jsジャーニー「認証とセキュリティ」セクションの一部。レッスン 14/24。

セッションでは、リクエストのたびにデータベースを検索する必要があります。JWT（JSON Web Token）は情報自体を保持し、ドットでつながれた3つの部分から成ります。各部分はbase64urlで記述されます。これは、文字、数字、-、_を使ってバイトを書き表す方法です。ヘッダーにはアルゴリズムが記され、ペイロードにはクレーム（誰のトークンかを示すsub、有効期限を示すexp）が含まれ、署名によってサーバーがトークンを作成したことが証明されます。

base64urlはエンコードであり、暗号化ではありません。トークンを持っている人なら誰でも、そのペイロードを読めます。

const payload = token.split('.')[1];
JSON.parse(Buffer.from(payload, 'base64url').toString());
// { sub: '42', name: 'Lin', exp: 1767225600 }

JWTパッケージのjoseに含まれるdecodeJwt(token)も同じ処理をします。署名を検証せずにペイロードを読み取り、テキストがJWTでない場合はエラーを投げます。したがって、ペイロードに秘密情報を入れてはいけません。また、decodeJwtが返したクレームをもとに何かを判断してはいけません。誰でもどんなクレームでも書けるからです。

チャレンジ

簡単

この章では、API を呼び出すアプリ向けに、トークンを使った2つ目のログイン方法を追加します。まず、サインアップとログインはできるものの、セッションやメモはない、小さなサーバーのコピーから始めます。JWT はその中に情報を含み、誰でもその情報を読むことができます。トークンの内容を表示するルートを作り、トークンの主張を何でも信頼する管理者ページを閉じましょう。

server.js に GET /inspect を書きます。クエリー文字列からトークンを読み取り、GET /inspect?token=eyJ... のように、その中のクレームを JSON として返します。すでにインポートされている decodeJwt を使って読み取ります。ペイロードが {"sub": "lin", "plan": "free"} のトークンに対して、このルートは正確に {"sub": "lin", "plan": "free"} を返します。
テキストが JWT ではない場合、decodeJwt はエラーをスローします。それを捕捉し、ステータス 400 と {"error": "Not a JWT"} を返します。たとえば、GET /inspect?token=hello はその 400 を返します。
GET /admin を確認しましょう。トークンを decodeJwt で読み取り、トークンに "admin": true と書かれていれば秘密を表示します。しかし、decodeJwt は署名を決して検証しないため、誰でも "admin": true と書かれたトークンを入力できます。このサーバーはまだ署名を検証できません。そこで、受け取るトークンが何であっても、GET /admin がすべてのリクエストに対してステータス 403 と {"error": "Admins only"} を返すようにします。403 Forbidden は「これは見られません」という意味です。第4章では、管理者だけが本当にアクセスできる管理者ページを再び開きます。

試してみましょう: 「実行」を押します。リクエストバーには、まず GET /admin?token= が表示され、その後ろに次のトークンが続きます: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJtYWxsb3J5IiwiYWRtaW4iOnRydWV9.c2lnbmF0dXJl mallory という攻撃者が秘密鍵を使わずに手作業で作成したものです。何も変更する前に送信してみましょう。最初の状態では {"secret": "The vault key is 42"} が返されます。変更後、もう一度「実行」を押し、同じリクエストを送信します。ステータス 403 と {"error": "Admins only"} が返されます。同じトークンを後ろに付けて GET /inspect?token= を送信すると、鍵なしで読み取られた {"sub": "mallory", "admin": true} が返されます。GET /inspect?token=hello を送信すると、ステータス 400 と {"error": "Not a JWT"} が返されます。

自分で試してみよう

import express from 'express';
import { decodeJwt } from 'jose';
import { users } from './db.js';
import { hashPassword, verifyPassword } from './passwords.js';

const app = express();
app.use(express.json());

app.post('/signup', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const password = String(req.body.password ?? '');
    if (!username || password.length < 8) {
        return res.status(400).json({ error: 'Pick a username and a password of at least 8 characters' });
    }
    if (await users.findOne({ username })) {
        return res.status(409).json({ error: 'That username is taken' });
    }
    await users.insertOne({ username, passwordHash: await hashPassword(password) });
    res.status(201).json({ username });
});

app.post('/login', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const user = await users.findOne({ username });
    if (!user || !(await verifyPassword(String(req.body.password ?? ''), user.passwordHash))) {
        return res.status(401).json({ error: 'Wrong username or password' });
    }
    res.json({ username: user.username });
});

// トークンの内容を表示する: GET /inspect?token=...
app.get('/inspect', (req, res) => {
    res.status(501).json({ error: 'Not written yet' });
});

// 管理者ページ。
app.get('/admin', (req, res) => {
    const claims = decodeJwt(String(req.query.token ?? ''));
    if (claims.admin === true) {
        return res.json({ secret: 'The vault key is 42' });
    }
    res.status(403).json({ error: 'Admins only' });
});

app.listen(3000, () => {
    console.log('Vault is running on port 3000');
});

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

認証とセキュリティのすべてのレッスン

自分で練習してみよう: Expressプレイグラウンド