# Turnstile を使った React Router フォームのスパム対策 > React Router のフォームをスパムから守る方法。Turnstile 付きのルート Action、cf-connecting-ip をキーにした Workers のレート制限、.server モジュール、CSP ヘッダー。 公開日 2026-10-25 · https://ikiform.com/ja/guides/spam-protection/react-router チェックはルートの `action` で行います。クライアント IP で制限し、siteverify で Turnstile のトークンを検証してから、ハニーポットと一緒にフィールドを転送します。ヘルパーは `.server.ts` モジュールに置いてブラウザーに届かないようにし、CSP はルートの `headers` エクスポートで設定します。Cloudflare Workers では、レート制限バインディングとシークレットは `cloudflare:workers` の `env` から取得します。 ## React Router ならではの違い フレームワークモードでは、`action` を持つすべてのルートが、自分のフォームからでも他人からでも POST を受け付けます。React Router には、スパムチェックの組み込み方を左右する 3 つの道具があります: - **`.server` モジュール。** `spam.server.ts` という名前のファイルはクライアントのコードにバンドルできないので、コンポーネントが同じルートからインポートしても、シークレットと siteverify の呼び出しはサーバーにとどまります。 - **`headers` エクスポート。** Action が返すヘッダーは、ルートの `headers` 関数が引き渡さない限り、ドキュメントのレスポンスでは送られません。CSP もここに置きます。 - **`useFetcher`。** ナビゲーションなしで Action に送信するので、ページとウィジェットは試行の間もマウントされたままです。そのため、応答のたびに `key` でウィジェットをマウントし直します。 このページでは、レート制限バインディングが組み込まれていて React Router のデプロイ先としても一般的な Cloudflare Workers にデプロイします。Vercel と Netlify についてはデプロイの表で説明します。 図: JavaScript の有無で、送信が React Router の Action に届くまで 1. ハイドレーション後は、フォームが useFetcher で送信するので、ページは遷移しません。 2. Action が IP でレート制限し、Turnstile のトークンを検証して、フィールドを転送します。 3. 結果は fetcher.data として届きます。 4. ウィジェットの key が変わるので、次の試行に向けて新しいウィジェットと新しいトークンが用意されます。 5. ハイドレーション前は、同じフォームが Turnstile のトークンなしの通常のドキュメントリクエストとして送信されます。 6. Action は siteverify の段階でそれを拒否します。 7. headers エクスポートが、Retry-After と CSP をドキュメントのレスポンスに引き渡します。 8. コンポーネントは fetcher.data の代わりに actionData を読み、エラーを表示します。 人間確認には JavaScript が必要なので、JavaScript なしの経路は黙って通すのではなく、わかりやすいエラーで終わります。 ## プロジェクトの準備 `@cloudflare/vite-plugin` を使う Cloudflare の React Router テンプレートから始めます。React Router 8 では `context` 引数は常に `RouterContextProvider` で、Worker のエントリーから素の `{ cloudflare: { env } }` オブジェクトを渡すと例外が発生します。そのため、エントリーはリクエストだけを渡し、ルートは `import { env } from "cloudflare:workers"` でバインディングを読みます。このページで編集するファイル: `ファイル`: ```text app/ routes/ contact.tsx components/ turnstile.tsx lib/ spam.server.ts workers/ app.ts wrangler.jsonc .dev.vars ``` `workers/app.ts`: ```ts import { createRequestHandler } from "react-router"; const handler = createRequestHandler(() => import("virtual:react-router/server-build"), import.meta.env.MODE); export default { fetch(request) { return handler(request); }, } satisfies ExportedHandler; ``` `wrangler.jsonc`: ```json { "name": "acme-site", "main": "./workers/app.ts", "vars": { "TURNSTILE_SITE_KEY": "1x00000000000000000000AA" }, "ratelimits": [ { "name": "CONTACT_LIMIT", "namespace_id": "1001", "simple": { "limit": 5, "period": 60 } } ] } ``` `.dev.vars`: ```bash TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA IKIFORM_SECRET_KEY=ik_sk_your_secret_key ``` - サイトキーは公開情報なので `vars` に置きます。ローダーがコンポーネントに渡すので、クライアントのビルドに環境変数は一切要りません。 - シークレットはローカルでは `.dev.vars` に、本番では `wrangler secret put` で設定し、決して `wrangler.jsonc` には書かないでください。 - 設定を編集したら `wrangler types` を実行して、`env` 上の `CONTACT_LIMIT` とシークレットに型が付くようにします。 ## サーバー専用のヘルパー `app/lib/spam.server.ts`: ```ts export async function isHuman(secret: string, token: string, ip: string, host: string) { if (!token || token.length > 2048) return false; const body = new URLSearchParams({ secret, response: token, remoteip: ip }); try { const response = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", { method: "POST", body }); const verdict = (await response.json()) as { success: boolean; hostname?: string; action?: string }; return verdict.success && verdict.action === "contact" && (import.meta.env.DEV || verdict.hostname === host); } catch { return false; } } export async function forward(secretKey: string, form: FormData, origin: string | null) { const headers = new Headers({ Accept: "application/json", Authorization: `Bearer ${secretKey}` }); if (origin) headers.set("Origin", origin); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers, body: form }).catch(() => null); return response?.ok ?? false; } ``` - `.server` の接尾辞により、クライアントのコードがこのモジュールを含むことになるとビルドが失敗します。 - siteverify はフォームエンコードのボディを受け取ります。ホスト名のチェックは訪問者が送信したホストと比較し、開発中はスキップします。テスト用のトークンにはダミーのホスト名が入っているためです。 - `forward` は元の `FormData` を送るので、ハニーポットを含むすべてのフィールドが送信されたとおりに Ikiform に届きます。 - 訪問者の `Origin` も渡します。サーバー側の fetch はこれを送らず、Ikiform は無料の `localhost` テストを判定するためにこれを読むからです。 > サーバー側の版はシークレットキーで送信するので、Ikiform は **Allowed domains** と自身の人間確認をスキップします。すべての送信がサーバーの IP から届くため、訪問者ごとに 1 分 5 件という Standard の制限は全訪問者の合計で数えられます。サーバー経由で送信するフォームには Relaxed か Custom の[レート制限](https://ikiform.com/ja/docs/rate-limits.md)を選び、`IKIFORM_SECRET_KEY` はサーバー専用の環境変数に置いてください。 ## ウィジェット `app/components/turnstile.tsx`: ```tsx import { useEffect, useRef } from "react"; const SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"; interface TurnstileApi { render(container: HTMLElement, options: { sitekey: string; action: string }): string; remove(widgetId: string): void; } declare global { interface Window { turnstile?: TurnstileApi; } } export function Turnstile({ siteKey }: { siteKey: string }) { const box = useRef(null); useEffect(() => { let widgetId: string | undefined; const mount = () => { if (box.current && window.turnstile) widgetId = window.turnstile.render(box.current, { sitekey: siteKey, action: "contact" }); }; if (window.turnstile) mount(); else document.querySelector(`script[src="${SCRIPT}"]`)?.addEventListener("load", mount, { once: true }); return () => { if (widgetId) window.turnstile?.remove(widgetId); }; }, [siteKey]); return ( <>