見出し画像

Turnstile導入手順｜reCAPTCHAから乗り換え

土門大貴/daikidomon

フォームのbot対策で使われてきたreCAPTCHAから、CloudflareのTurnstileへ乗り換える動きが増えています。両者の違いと、実装レベルの移行手順を整理します。

Turnstileとは何か

Turnstileは、閲覧者が人間かどうかを判定するCAPTCHAの代替です。信号取得のための軽量なチャレンジをバックグラウンドで実行し、多くの場合は画像を選ばせるような操作を求めずに判定します。

特徴は、サイトのトラフィックをCloudflareのCDNに通していなくても使える点です。ドメインをCloudflareに移していなくても、Turnstileだけを既存サイトに埋め込めます。プライバシー保護を重視した設計で、WCAG 2.2 AAのアクセシビリティ基準にも対応しています。

reCAPTCHAとの主な違い


表1: 項目 / Turnstile / reCAPTCHA


reCAPTCHAが有料機能や大規模利用で費用と設計判断を伴うのに対し、Turnstileは無料枠が広く、フォームの体験を損ないにくい点が乗り換えの動機になっています。

Turnstileの無料枠（2026年7月時点）


表2: 項目 / 無料プラン


検証リクエストが無制限で無料のため、通常のフォーム対策であれば無料プランで完結します。ウィジェット数やホスト名の上限、分析期間を広げたい場合にEnterpriseプランが用意されています。

導入の3ステップ

Turnstileの実装は、大きく3つの部品で構成されます。



  1. 管理画面でウィジェットを作成する: CloudflareダッシュボードのTurnstileから対象サイトを追加し、サイトキー（公開用）とシークレットキー（サーバー用）を取得する

  2. クライアント側にウィジェットを埋め込む: フォームに表示用のスクリプトと要素を置く

  3. サーバー側でトークンを検証する: 送信されたトークンをCloudflareの検証エンドポイントに問い合わせ、正当性を確認する

クライアント側の設置

フォームのページにスクリプトを読み込み、ウィジェットの要素を置きます。

<script src="/https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form method="POST" action="/submit">
  <!-- 既存のフォーム項目 -->
  <div class="cf-turnstile" data-sitekey="ここにサイトキー"></div>
  <button type="submit">送信</button>
</form>

ウィジェットの判定が通ると、フォーム内に cf-turnstile-response という名前でトークンが自動的に付与されます。

サーバー側の検証

送信を受け取ったサーバーは、トークンをCloudflareの検証エンドポイントに送って確認します。

curl -X POST "https://challenges.cloudflare.com/turnstile/v0/siteverify" \
  -d "secret=ここにシークレットキー" \
  -d "response=送信されたcf-turnstile-responseの値"

レスポンスのJSONで success が true なら人間による正当な送信として扱い、false なら拒否します。シークレットキーはサーバー側だけで扱い、クライアントに出さないことが前提です。

reCAPTCHAからの置き換えポイント

既存のreCAPTCHAからの移行は、部品を差し替える作業になります。




表3: 置き換え対象 / reCAPTCHA / Turnstile


ウィジェットのモードは、リスクに応じて表示を出し分ける「Managed（推奨）」、操作を求めない「Non-interactive」、完全に非表示の「Invisible」から選べます。まずはManagedで始め、体験を見ながら調整するのが無難です。

導入時の注意点

  • シークレットキーの扱い: サーバー側のみで使用し、リポジトリやフロントに含めない

  • サーバー側検証を省略しない: クライアントにウィジェットを置くだけでは不十分で、サーバーでのトークン検証まで実装して初めて対策になる

  • ホスト名の登録: ウィジェットに紐づくホスト名を正しく設定する。ステージング環境も使う場合は登録を忘れない

まとめ

  • TurnstileはCloudflareのCAPTCHA代替で、多くの場合は無操作で人間判定を行う

  • Cloudflare CDNを使っていなくても任意のサイトに設置できる

  • 無料枠は検証リクエスト無制限・ウィジェット最大20個で、通常のフォーム対策は無料で完結する

  • reCAPTCHAからの移行はスクリプト・要素クラス・トークン名・検証先を差し替える作業

  • クライアント設置だけでなくサーバー側のトークン検証まで実装する

主な参考資料: Cloudflare Turnstile ドキュメント、Turnstile プラン

Turnstile・フォーム対策の実装を相談したい方へ

TodoONadaはAWS・Cloudflare・Supabaseまわりのインフラ設計を軸に受託開発を行っています。

  • reCAPTCHAからTurnstileへの移行実装

  • サーバー側検証を含むフォームスパム対策の設計

  • 既存サイト・WordPressへの組み込み

「クライアント側は置けたがサーバー検証まで手が回らない」といった段階からご相談ください。お問い合わせはこちら。

いいなと思ったら応援しよう！