Workersを使用したTurnstile

JavaScript

export default {
  async fetch(request, env) {
    const SITE_KEY = env.SITE_KEY
    let res = await fetch(request)

    // 特定の要素（例：`head`、`div`）で実行するためにAPIをインスタンス化します
    let newRes = new HTMLRewriter()

      // `.on`は要素ハンドラーを添付し、要素/属性にマッチさせたり、APIに応じた特定のメソッドを使用したりできます
      .on('head', {
        element(element) {

          // この場合、`head`要素に新しいスクリプトを追加するために`append`を使用しています
          element.append(`<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>`, { html: true });
        },
      })
      .on('div', {
        element(element) {

          // ここでは、要素の`id`または`class`を取得するために`getAttribute`メソッドを使用しています
          if (element.getAttribute('id') === <NAME_OF_ATTRIBUTE>) {
            element.append(`<div class="cf-turnstile" data-sitekey="${SITE_KEY}" data-theme="light"></div>`, { html: true });
          }
        },
      })
      .transform(res);
    return newRes
  }
}

TypeScript

export default {
  async fetch(request, env): Promise<Response> {
    const SITE_KEY = env.SITE_KEY
    let res = await fetch(request)

    // 特定の要素（例：`head`、`div`）で実行するためにAPIをインスタンス化します
    let newRes = new HTMLRewriter()

      // `.on`は要素ハンドラーを添付し、要素/属性にマッチさせたり、APIに応じた特定のメソッドを使用したりできます
      .on('head', {
        element(element) {

          // この場合、`head`要素に新しいスクリプトを追加するために`append`を使用しています
          element.append(`<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>`, { html: true });
        },
      })
      .on('div', {
        element(element) {

          // ここでは、要素の`id`または`class`を取得するために`getAttribute`メソッドを使用しています
          if (element.getAttribute('id') === <NAME_OF_ATTRIBUTE>) {
            element.append(`<div class="cf-turnstile" data-sitekey="${SITE_KEY}" data-theme="light"></div>`, { html: true });
          }
        },
      })
      .transform(res);
    return newRes
  }
} satisfies ExportedHandler<Env>;

Python

from pyodide.ffi import create_proxy
from js import HTMLRewriter, fetch

async def on_fetch(request, env):
    site_key = env.SITE_KEY
    res = await fetch(request)

    class Append:
        def element(self, element):
            s = '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>'
            element.append(s, {"html": True})

    class AppendOnID:
        def __init__(self, name):
            self.name = name
        def element(self, element):
            # ここでは、要素の`id`または`class`を取得するために`getAttribute`メソッドを使用しています
            if element.getAttribute("id") == self.name:
                div = f'<div class="cf-turnstile" data-sitekey="{site_key}" data-theme="light"></div>'
                element.append(div, { "html": True })

    # 特定の要素（例：`head`、`div`）で実行するためにAPIをインスタンス化します
    head = create_proxy(Append())
    div = create_proxy(AppendOnID("NAME_OF_ATTRIBUTE"))
    new_res = HTMLRewriter.new().on("head", head).on("div", div).transform(res)

    return new_res

ノート

これはTurnstileの実装の半分に過ぎません。ウィジェットがレンダリングされた結果として得られる対応するトークンも、siteverify APIを使用して検証する必要があります。以下の例を参照してください。

async function handlePost(request) {
    const body = await request.formData();
    // Turnstileは`cf-turnstile-response`にトークンを挿入します。
    const token = body.get('cf-turnstile-response');
    const ip = request.headers.get('CF-Connecting-IP');

    // `/siteverify` APIを呼び出してトークンを検証します。
    let formData = new FormData();

    // `secret_key`はここでWranglerのシークレットを使用して設定されています
    formData.append('secret', secret_key);
    formData.append('response', token);
    formData.append('remoteip', ip);

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

    const outcome = await result.json();

    if (!outcome.success) {
        return new Response('提供されたTurnstileトークンは無効です！', { status: 401 });
    }
    // Turnstileトークンは正常に検証されました。アプリケーションロジックを続行します。
    // ログインを検証する、ユーザーをリダイレクトするなど。
    return await fetch(request)
}

export default {
  async fetch(request, env) {
    const SITE_KEY = env.SITE_KEY
    let res = await fetch(request)

    if (request.method === 'POST') {
      return handlePost(request)
    }

    // 特定の要素（例：`head`、`div`）で実行するためにAPIをインスタンス化します
    let newRes = new HTMLRewriter()
      // `.on`は要素ハンドラーを添付し、要素/属性にマッチさせたり、APIに応じた特定のメソッドを使用したりできます
      .on('head', {
        element(element) {

          // この場合、`head`要素に新しいスクリプトを追加するために`append`を使用しています
          element.append(`<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>`, { html: true });
        },
      })
      .on('div', {
        element(element) {
          // ここでは、要素の`id`または`class`を取得するために`getAttribute`メソッドを使用しています
          if (element.getAttribute('id') === <NAME_OF_ATTRIBUTE>) {
            element.append(`<div class="cf-turnstile" data-sitekey="${SITE_KEY}" data-theme="light"></div>`, { html: true });
          }
        },
      })
      .transform(res);
    return newRes
  }
}