turnstile

turnstile = ウェブサイトを閲覧しているときに現れる「Cloudflare」の文字とアイコンがあるチェックが必要なボックス。

類似サービスは Google reCAPTCHA という複数の画像が表示されるもので、trunstileと同じくらいよく見かけるが、turnstileの方がユーザー目線で負担が少ない

turnstileが必要な理由

Bot対策が主な理由

大量の新規登録や form送信の対策として認証に関連したページや form を使ったアクションに turnstile を添えるのがイメージしやすいパターン

サイトアクセス時に表示されるものとは別物

サイトアクセス時にScreenサイズで「サイトの安全性を確認しています」という文字とCloudflare のボックスがあるのもよく見かけるが、これは turnstile ではない

おそらくCloudflareの「WAF」というサービス
ダッシュボードからWAFを見ると有料っぽい

turnstileを使う

https://developers.cloudflare.com/turnstile

cloudflareダッシュボード/turnstileからウィジェットを追加
ホストを追加： localhost と アプリのドメイン
1. ドメインは他サービスでもOK（例： vercel.app）
サイトキー / シークレットキーを .env へ
1. サイトキーは NEXT_PUBLIC をつける

# Cloudflare-turnstile
TURNSTILE_SITE_KEY=""
TURNSTILE_SECRET_KEY=""

*後からチェック行為無しで人間判定をするモードに切り替えられる

turnstileを使う際の前提知識：

turnstileはクライアント側だけでは脆弱なので、クライアント側からサーバーへ「チェックした際のトークン」を渡すことで、サーバーでCloudflare側への「人間かどうかの検証」を行う

例：form送信前にチェックを挟む

react-turnstile というライブラリを使った方が良い。

コンポーネント：

"use client";
import React, { useState } from "react";
import Turnstile, { useTurnstile } from "react-turnstile";

const TurnstileComponent = () => {
  const [isHuman, setIsHuman] = useState(false);

  const turnstile = useTurnstile();

  const handleVerify = async (token: string) => {
    const res = await fetch("/api/turnstile", {
      method: "POST",
      body: JSON.stringify(token),
    });
    const data = await res.json();
    console.log(data, "data in component");
    if (data.success) {
      setIsHuman(true);
    }
  };

  return (
    <div>
      <form className="grid gap-4 ring-2">
        <input type="email" name="email" required />
        <input type="password" name="password" required />

        <Turnstile
          sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
          onVerify={handleVerify}
          fixedSize={true}
          refreshExpired="auto"
        />
        {isHuman && <button type="submit">submit</button>}
      </form>
    </div>
  );
};

export default TurnstileComponent;

handleVerify にチェックを行うと検証トークンが渡される（*あくまでクライアント側での検証成功）
次にそのトークンをAPIルートに渡してサーバー側での検証を行う
その結果がsuccessならsubmitボタンが出現

route.ts：

import { NextRequest, NextResponse } from "next/server";

const SECRET_KEY = process.env.TURNSTILE_SECRET_KEY;

export async function POST(req: NextRequest) {
  try {
    const token = await req.json();
    console.log(token, "token in route.ts");
    if (!token) {
      return NextResponse.json(
        { error: "Turnstile token missing" },
        { status: 400 }
      );
    }

    const formData = new FormData();
    formData.append("secret", SECRET_KEY!);
    formData.append("response", token);

    const verifyRes = await fetch(
      "https://challenges.cloudflare.com/turnstile/v0/siteverify",
      {
        method: "POST",
        body: formData,
      }
    );
    const data = await verifyRes.json();
    if (!data.success) {
      return NextResponse.json(
        { error: "Turnstile verification failed" },
        { status: 400 }
      );
    }
    return NextResponse.json({
      success: true,
      message: "Success! Turnstile passed",
    });
  } catch (err) {
    console.error(err);
    return NextResponse.json({ error: "Internal error" }, { status: 500 });
  }
}

    const formData = new FormData();
    formData.append("secret", SECRET_KEY!);
    formData.append("response", token);

    const verifyRes = await fetch(
      "https://challenges.cloudflare.com/turnstile/v0/siteverify",
      {
        method: "POST",
        body: formData,
      }
    );

クライアントから渡されたトークンとシークレットキーをformDataにしてcloudflareのエンドポイントにポスト

Cloudlrare：turnstile - チェックボックス