こんにちは。セキュリティの世界へようこそ。
日々、見えない脅威と戦っているエンジニアの皆さん、お疲れ様です。今日は、Webアプリ開発において「避けては通れないけれど、意外と勘違いされやすい」CSRF（クロスサイトリクエストフォージェリ）、特にOAuth認可フローにおける`state`パラメータの役割について、じっくりお話ししましょう。
専門用語を並べるのは簡単ですが、今日はあえて「家の防犯」に例えて、その本質を紐解いていきますね。
—
1. CSRFって結局なに？：泥棒の「なりすまし」手口
まずはイメージしてください。あなたは「会員制の高級クラブ」のオーナーだとしましょう。
通常、会員は会員証を見せて入店しますよね。しかし、ある日、「会員証を盗んだ泥棒」が、あなたの店にやってきて「このサービスを解約しろ！」と勝手に書き換えを要求したらどうなるでしょう？
もし、店員が「会員証を持っているから本人に違いない」と信じ込んで解約処理をしてしまったら……これがCSRF（クロスサイトリクエストフォージェリ）の正体です。
攻撃者は、あなたのブラウザに保存されている「ログイン情報（クッキーなど）」を悪用し、あなたが意図しないリクエストを、あたかもあなた自身が行ったかのようにサーバーに送りつけます。恐ろしいのは、「本人が操作している」とサーバー側が錯覚してしまう点です。
—
2. OAuth認可フローでの「stateパラメータ」という切り札
最近のWebアプリでは、GoogleやGitHubなどのIDを使ってログインする「OAuth」が主流ですよね。ここでもCSRFのリスクは潜んでいます。
攻撃者は、あなたがログインしようとしているタイミングで、自分の「認可コード（認可の証明書のようなもの）」を、あなたのブラウザに差し込もうとします。 これにより、あなたのブラウザが「攻撃者のアカウント」と連携されてしまう危険があるのです。
ここで登場するのが、`state`パラメータです。
「state」は「使い捨ての合言葉」
これを家の防犯に例えるなら、「ランダムに生成した、世界に一つだけの合言葉」です。
1. 行き（リクエスト）: あなたがログインを試みる際、アプリ側で「ランダムな文字列（これがstate）」を生成し、サーバーに「後でこの合言葉を照らし合わせるから覚えておいてね！」と伝えます。
2. 帰り（コールバック）: 認証先（Googleなど）から戻ってきた時、一緒にその「state」も戻ってきます。
3. 照合: サーバーは、「最初に出した合言葉」と「戻ってきた合言葉」が一致するかを確認します。
もし、攻撃者が途中で割り込もうとしても、攻撃者は「あなたが最初に生成したランダムな合言葉」を知りようがありません。 だから、サーバーは「合言葉が合わないぞ！これは怪しいリクエストだ！」と門前払いできるわけです。
—
3. 実装のステップ：泥臭いけど大切な手順
では、実際にどう実装するのか、コードのイメージを見てみましょう。
手順1：stateを生成して保存する
ユーザーを認証ページへ飛ばす前に、セッションに`state`を保存します。
// サーバーサイド（Node.js/Expressのイメージ）
const crypto = require(‘crypto’);
app.get(‘/login’, (req, res) => {
// 32バイトのランダムな文字列を生成
const state = crypto.randomBytes(32).toString(‘hex’);
// セッションに保存（これが「合言葉」の控えになります）
req.session.oauth_state = state;
// 認証プロバイダーへ飛ばす（stateをパラメータに含める）
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?state=${state}&…`;
res.redirect(authUrl);
});
手順2：戻ってきた値を確認する
コールバックを受け取った時、必ずチェックを行います。
app.get(‘/callback’, (req, res) => {
const { state, code } = req.query;
const originalState = req.session.oauth_state;
// ここが防波堤！合言葉が一致するかチェック
if (!state || state !== originalState) {
return res.status(403).send(‘不正なリクエストです。セキュリティ上のリスクが検知されました。’);
}
// チェックOKなら、認可コードをアクセストークンに交換する処理へ…
// …
});
—
4. 一歩ずつ、確実に。初心者が気をつけるべきこと
最後に、新人の皆さんに一つだけアドバイスです。
- 「stateは毎回必ず使い捨てること」: 一度使った合言葉を使い回すと、そこから推測されるリスクが生まれます。常に`crypto.randomBytes`などで生成しましょう。
- 「セッション管理は厳重に」: `state`を保存しているセッション自体が乗っ取られたら元も子もありません。HTTPSの利用と、Cookieの`Secure`, `HttpOnly`, `SameSite`属性の設定は「基本の防犯」として必ず行ってください。
「セキュリティ対策は面倒くさい」と感じるかもしれません。しかし、泥棒は常に「鍵の閉め忘れ」や「隙」を狙っています。今回紹介した`state`パラメータは、ほんの数行のコードですが、あなたのサービスとユーザーを守るための非常に強力な「鍵」になります。
最初から完璧を目指さなくて大丈夫。まずは、自分の書くコードに「これは誰が発行したリクエストか？」という視点を少しずつ取り入れてみてください。
皆さんの開発が、安全でワクワクするものになりますように。また次の記事でお会いしましょう！
コメント