スパム・bot対策システムの導入

Webサイトやフォームを運営していると、スパム投稿やボットによるアクセスが問題になることがあります。これを防ぐには、CAPTCHA（キャプチャ）と呼ばれる仕組みを導入するのが一般的です。この記事では、代表的な3つのCAPTCHAサービス（reCAPTCHA、hCaptcha、Turnstile）を紹介し、特にCloudflare Turnstileの導入方法を詳しく解説します。

主なCAPTCHAサービスの比較

• Google reCAPTCHA
  Googleが提供するCAPTCHAサービスで、v2（チェックボックス形式）とv3（スコア形式）があります。
  メリット：精度が高く導入も簡単。
  デメリット：Google依存で、ユーザーの追跡やCookie使用がある。
• hCaptcha
  プライバシー重視を掲げるCAPTCHAサービス。画像認識の形式がreCAPTCHAに似ています。
  メリット：無料で利用可能、Google非依存。
  デメリット：やや煩わしい認証が多い印象。
• Cloudflare Turnstile
  Cloudflareが提供する無料のbot対策サービスで、ユーザー操作なしに自動で検証を行います。
  メリット：ユーザー体験を損なわず、プライバシーにも配慮、無料。
  デメリット：Cloudflareアカウントが必要。

Cloudflare Turnstile の導入手順

1. Cloudflare アカウント作成と Turnstile サイトの登録

Cloudflare の管理画面（Cloudflare Dashboard）にアクセスし、無料アカウントを作成します。
次に「Turnstile」メニューから「Create site」を選び、ラベルとドメインを設定すると、Site keyとSecret keyが発行されます。

2. フロントエンドへの埋め込み

1<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
2
3<form method="POST" action="/api/contact">
4  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
5  <button type="submit">送信</button>
6</form>
7

3. サーバー側での検証

フォーム送信時に取得できるトークン（cf-turnstile-response）を、Cloudflareの検証エンドポイントであるhttps://challenges.cloudflare.com/turnstile/v0/siteverifyにPOSTすることで、正規のユーザーかどうかをサーバー側で確認できます。

環境ごとに site key を切り替える方法

Turnstile の sitekey は開発・本番で別のキーを使用することが推奨されます。Next.js では .env ファイルを使って簡単に切り替えることができます。

1# .env.local（開発用）
2NEXT_PUBLIC_TURNSTILE_SITE_KEY=dev-site-key
3
4# .env.production（本番用）
5NEXT_PUBLIC_TURNSTILE_SITE_KEY=prod-site-key
6

JSX内では以下のように使用します：

1<div
2  className="cf-turnstile"
3  data-sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
4/>
5

まとめ

• スパム・bot対策には CAPTCHA の導入が重要
• Turnstile は非侵襲・無料・プライバシー重視の優れた選択肢
• フォームへの埋め込みが簡単で、サーバー側検証も可能
• 環境ごとの site key 切り替えは process.env で柔軟に対応できる

ユーザーの操作を求めない Turnstile は、UXを損なわずにセキュリティを向上させたい開発者にとって、非常に魅力的なソリューションです。