"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "csrf-とは何か", "hProperties": { "id": "csrf-とは何か" } }, "depth": 2, "value": "CSRF とは何か？" }, { "data": { "id": "csrf-が機能する仕組み", "hProperties": { "id": "csrf-が機能する仕組み" } }, "depth": 2, "value": "CSRF が機能する仕組み" }, { "data": { "id": "ブラウザの同一オリジンポリシー", "hProperties": { "id": "ブラウザの同一オリジンポリシー" } }, "depth": 3, "value": "ブラウザの同一オリジンポリシー" }, { "data": { "id": "自動クッキー送信メカニズム", "hProperties": { "id": "自動クッキー送信メカニズム" } }, "depth": 3, "value": "自動クッキー送信メカニズム" }, { "data": { "id": "csrf-攻撃のステップ", "hProperties": { "id": "csrf-攻撃のステップ" } }, "depth": 3, "value": "CSRF 攻撃のステップ" }, { "data": { "id": "csrf-攻撃の例", "hProperties": { "id": "csrf-攻撃の例" } }, "depth": 2, "value": "CSRF 攻撃の例" }, { "data": { "id": "csrf-攻撃を防ぐ一般的な方法", "hProperties": { "id": "csrf-攻撃を防ぐ一般的な方法" } }, "depth": 2, "value": "CSRF 攻撃を防ぐ一般的な方法" }, { "data": { "id": "csrf-トークンの使用", "hProperties": { "id": "csrf-トークンの使用" } }, "depth": 3, "value": "CSRF トークンの使用" }, { "data": { "id": "referer-ヘッダーの確認", "hProperties": { "id": "referer-ヘッダーの確認" } }, "depth": 3, "value": "Referer ヘッダーの確認" }, { "data": { "id": "samesite-クッキー属性の使用", "hProperties": { "id": "samesite-クッキー属性の使用" } }, "depth": 3, "value": "SameSite クッキー属性の使用" }, { "data": { "id": "カスタムリクエストヘッダーの使用", "hProperties": { "id": "カスタムリクエストヘッダーの使用" } }, "depth": 3, "value": "カスタムリクエストヘッダーの使用" }, { "data": { "id": "ダブルクッキーバリデーション", "hProperties": { "id": "ダブルクッキーバリデーション" } }, "depth": 3, "value": "ダブルクッキーバリデーション" }, { "data": { "id": "機密操作の再認証の使用", "hProperties": { "id": "機密操作の再認証の使用" } }, "depth": 3, "value": "機密操作の再認証の使用" }, { "data": { "id": "まとめ", "hProperties": { "id": "まとめ" } }, "depth": 2, "value": "まとめ" }]; const readingTime = { "minutes": 4, "words": 1344, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "ウェブ開発、特にクッキーを扱っていると、「この設定は CSRF を防ぐのに役立ちます」といったフレーズをよく耳にします。しかし、多くの人は「CSRF」の意味を漠然としか理解していないのが現状です。" }), "\n", _jsx(_components.p, { children: "今日は、一般的なウェブセキュリティの弱点である CSRF（クロスサイトリクエストフォージェリ）について深く掘り下げます。これにより、CSRF 関連の問題をより効果的に扱えるようになります。" }), "\n", _jsxs(_components.h2, { id: "csrf-とは何か", children: ["CSRF とは何か？", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-とは何か", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF（クロスサイトリクエストフォージェリ）は、攻撃者が認証されたユーザーを騙して意図しない操作を実行させるウェブ攻撃の一種です。簡単に言うと、「ハッカーがユーザーのフリをして不正行為を行う」ということです。" }), "\n", _jsxs(_components.h2, { id: "csrf-が機能する仕組み", children: ["CSRF が機能する仕組み", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-が機能する仕組み", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF を理解するためには、いくつかの重要な概念を把握する必要があります：" }), "\n", _jsxs(_components.h3, { id: "ブラウザの同一オリジンポリシー", children: ["ブラウザの同一オリジンポリシー", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ブラウザの同一オリジンポリシー", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "同一オリジンポリシーは、ブラウザ内でのセキュリティ機能であり、あるオリジンからのドキュメントやスクリプトが他のオリジンからのリソースとどのようにやり取りできるかを制限します。" }), "\n", _jsxs(_components.p, { children: ["オリジンはプロトコル（HTTP または HTTPS など）、ドメイン名、ポート番号で構成されます。例えば、", _jsx(_components.code, { children: "https://example.com:443" }), " は一つのオリジンであり、", _jsx(_components.code, { children: "https://demo.com:80" }), " は別のオリジンです。"] }), "\n", _jsx(_components.p, { children: "同一オリジンポリシーは異なるオリジンからのページ間のデータアクセスを制限し、それはつまり：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "あるオリジンの JavaScript は他のオリジンの DOM を読み取ることができません" }), "\n", _jsx(_components.li, { children: "あるオリジンの JavaScript は他のオリジンの Cookie、IndexedDB、localStorage を読み取ることができません" }), "\n", _jsx(_components.li, { children: "あるオリジンの JavaScript は他のオリジンに AJAX リクエストを送信できません（CORS を使用する場合を除く）" }), "\n"] }), "\n", _jsx(_components.p, { children: "しかし、ウェブの開放性と相互運用性を維持するために（CDN からのリソースを読み込む、またはログ記録用にサードパーティ API にリクエストを送信するなど）、同一オリジンポリシーはクロスオリジンのネットワークリクエストを制限していません：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "ページは任意のオリジンに GET や POST リクエストを送信できます（画像を読み込んだりフォームを送信したりする場合など）" }), "\n", _jsxs(_components.li, { children: ["任意のオリジンのリソースは含められます（", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["ユーザーが銀行アカウントからログアウトしないまま ", _jsx(_components.code, { children: "https://evil.com" }), " リンクをクリックすると、", _jsx(_components.code, { children: "bank.com" }), " にすでにログイン済みで有効な ", _jsx(_components.code, { children: "session_id" }), " クッキーを持っているため、"] }), "\n", _jsxs(_components.p, { children: ["悪意のあるページがロードされた後、隠されたフォームが自動的に送信され、送金リクエストが ", _jsx(_components.code, { children: "https://bank.com/transfer" }), " に送信されます。"] }), "\n", _jsxs(_components.p, { children: ["ユーザーのブラウザはこのリクエストに自動的に ", _jsx(_components.code, { children: "bank.com" }), " のクッキーを付加します。", _jsx(_components.code, { children: "bank.com" }), " サーバーはこのリクエストを受け取り、クッキーが有効であることを確認した後、この不正な送金操作を実行します。"] }), "\n", _jsxs(_components.h2, { id: "csrf-攻撃を防ぐ一般的な方法", children: ["CSRF 攻撃を防ぐ一般的な方法", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-攻撃を防ぐ一般的な方法", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ここでは、一般的に用いられる CSRF 防御方法をいくつか紹介します。それぞれの方法の原理と、CSRF 攻撃をどのように効果的に防止するかを詳しく説明します：" }), "\n", _jsxs(_components.h3, { id: "csrf-トークンの使用", children: ["CSRF トークンの使用", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-トークンの使用", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF トークンは、CSRF 攻撃に対する最も一般的かつ効果的な方法の一つです。方法は以下の通りです：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "サーバーは各セッションに対してユニークで予測不可能なトークンを生成します。" }), "\n", _jsx(_components.li, { children: "このトークンはすべてのフォームに埋め込まれ、機密操作用です。" }), "\n", _jsx(_components.li, { children: "ユーザーがフォームを送信すると、サーバーがトークンの有効性を確認します。" }), "\n"] }), "\n", _jsx(_components.p, { children: "CSRF トークンはユーザーのセッションに結び付けられたユニークな値であり、攻撃者はこの値を知ることも予測することもできないため（各セッションで異なるので）、攻撃者がユーザーを騙してリクエストを送信させても、サーバーは有効な CSRF トークンがないためにリクエストを拒否します。" }), "\n", _jsx(_components.p, { children: "実装例：" }), "\n", _jsx(_components.p, { children: "サーバー側（Node.js および Express を使用）：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const express = require('express');\nconst crypto = require('crypto');\nconst app = express();\n\n// CSRF トークンを生成\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF 保護ミドルウェア\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // 各 GET リクエストに新しい CSRF トークンを生成\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // CSRF トークンをチェック\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'CSRF トークンの検証に失敗しました' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "フロントエンドの JavaScript：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// CSRF トークンを含むリクエストを送信\nasync function sendRequestWithCSRFToken(url, method, data) {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n const response = await fetch(url, {\n method: method,\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify(data)\n });\n return response.json();\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "referer-ヘッダーの確認", children: [_jsx(_components.code, { children: "Referer" }), " ヘッダーの確認", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#referer-ヘッダーの確認", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Referer" }), " ヘッダーには、リクエストを発行したページの URL が含まれています。", _jsx(_components.code, { children: "Referer" }), " ヘッダーを確認することで、サーバーはリクエストが正当なソースから来たかどうかを判断できます。"] }), "\n", _jsxs(_components.p, { children: ["CSRF 攻撃は通常、異なるドメインから来るため、", _jsx(_components.code, { children: "Referer" }), " ヘッダーには攻撃者のドメイン名が表示されます。", _jsx(_components.code, { children: "Referer" }), " が期待される値かどうかを確認することで、不明なソースからのリクエストをブロックできます。"] }), "\n", _jsxs(_components.p, { children: ["ただし、この方法は必ずしも信頼性が高いとは言えません。一部のブラウザは ", _jsx(_components.code, { children: "Referer" }), " ヘッダーを送信しない場合があり、ユーザーはブラウザー設定やプラグインを通じて ", _jsx(_components.code, { children: "Referer" }), " ヘッダーを無効にできるからです。"] }), "\n", _jsx(_components.p, { children: "実装例：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function checkReferer(req) {\n const referer = req.get('Referer');\n return referer && referer.startsWith('https://yourwebsite.com');\n}\n\napp.use((req, res, next) => {\n if (['POST', 'PUT', 'DELETE'].includes(req.method) && !checkReferer(req)) {\n return res.status(403).json({ error: '無効なリファラー' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "samesite-クッキー属性の使用", children: [_jsx(_components.code, { children: "SameSite" }), " クッキー属性の使用", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samesite-クッキー属性の使用", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " は、クッキーがクロスサイトリクエストで送信されるかどうかを制御するためのクッキー属性です。3 つの可能な値があります："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": クッキーは同一サイトリクエストでのみ送信されます。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": クッキーは同一サイトのリクエストおよびトップレベルのナビゲーションで送信されます。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": クッキーはすべてのクロスサイトリクエストで送信されます（", _jsx(_components.code, { children: "Secure" }), " 属性と共に使用する必要があります）。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " が ", _jsx(_components.code, { children: "Strict" }), " に設定されている場合、サードパーティのウェブサイトからのクッキー送信を完全に防ぐことができ、CSRF 攻撃を効果的に防止します。\n", _jsx(_components.code, { children: "SameSite" }), " が ", _jsx(_components.code, { children: "Lax" }), " に設定されている場合、外部リンクからウェブサイトに入るような一般的なクロスサイト利用ケースを許可しながら、機密操作を保護します。"] }), "\n", _jsx(_components.p, { children: "実装例：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "res.cookie('session_id', 'abc123', {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "カスタムリクエストヘッダーの使用", children: ["カスタムリクエストヘッダーの使用", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#カスタムリクエストヘッダーの使用", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "AJAX リクエストにはカスタムリクエストヘッダーを追加することができます。同一オリジンポリシーの制限により、攻撃者はクロスオリジンリクエストでカスタムヘッダーを設定することができません。サーバーはこのカスタムヘッダーの存在を確認して、リクエストの正当性を検証することができます。" }), "\n", _jsx(_components.p, { children: "実装例：" }), "\n", _jsx(_components.p, { children: "フロントエンドでは：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "fetch('/api/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest'\n },\n body: JSON.stringify(data)\n});\n" }) }), "\n", _jsx(_components.p, { children: "サーバー側では：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "app.use((req, res, next) => {\n if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {\n // AJAX リクエストを処理\n } else {\n // 非 AJAX リクエストを処理\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "ダブルクッキーバリデーション", children: ["ダブルクッキーバリデーション", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ダブルクッキーバリデーション", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ダブルクッキーバリデーションは、効果的な CSRF 防御手法です。その核心原理は、サーバーがランダムなトークンを生成し、クッキーとして設定し、ページに埋め込みます（通常は隠しフォームフィールドとして）。ブラウザがリクエストを送信すると、クッキーが自動的に含まれ、ページの JavaScript がトークンをリクエストパラメータとして送信します。サーバーは、クッキーのトークンとリクエストパラメーターのトークンが一致するかどうかを確認します。" }), "\n", _jsx(_components.p, { children: "攻撃者はクロスサイトリクエストで対象ウェブサイトのクッキーを含めることはできますが、クッキーの値を読み取ったり変更したりすることはできませんし、ページのトークン値にアクセスしたり変更したりすることもできません。クッキーとパラメータの両方から取得したトークンを含むリクエストが必要にすることで、クッキーを読み取る権限があるソースからのリクエストであることを保証し、CSRF 攻撃を効果的に防御します。" }), "\n", _jsxs(_components.h3, { id: "機密操作の再認証の使用", children: ["機密操作の再認証の使用", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#機密操作の再認証の使用", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "特に機密性の高い操作（パスワードの変更や大口送金など）では、ユーザーに再認証を要求できます。\nこれにより、ユーザーには追加のセキュリティチェックポイントが提供されます。たとえユーザーが CSRF 攻撃を成功させたとしても、再認証ステップを通過できません。" }), "\n", _jsx(_components.p, { children: "実装の提案：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "機密操作を実行する前に、別の認証ページにリダイレクトします。" }), "\n", _jsx(_components.li, { children: "このページで、ユーザーにパスワードやその他の本人確認情報を入力するよう要求します。" }), "\n", _jsx(_components.li, { children: "認証が通過したら、一回限りのトークンを生成し、このトークンを以降の機密操作で使用します。" }), "\n"] }), "\n", _jsxs(_components.h2, { id: "まとめ", children: ["まとめ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#まとめ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "この詳細な議論を通じて、皆さんが CSRF 攻撃についてより包括的な理解を持つことができたことを願っています。\nCSRF がどのように機能するかを学ぶだけでなく、さまざまな効果的な防御策についても探求しました。すべてのこれらの方法は、ウェブアプリケーションのセキュリティを効果的に向上させることができます。" }), "\n", _jsx(_components.p, { children: "この知識が、日々の開発で CSRF 関連の問題をよりよく扱い、より安全なウェブアプリケーションを構築するのに役立つことを願っています。" }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }