静的サイトの問い合わせフォームにCloudflare WorkersとreCAPTCHA v3を使用する

静的サイトの問い合わせフォームにCloudflare WorkersとreCAPTCHA v3を使用する 静的サイトの問い合わせフォームにCloudflare WorkersとreCAPTCHA v3を使用する Cloudflare Pages Functions、reCAPTCHA v3、Resend、そしてスパムを減らすための代替案としてCloudflare Turnstileを使用して、安全なEleventy (11ty) 問い合わせフォームを構築する。 著者: Matt Hobbs 公開日: 2026年3月9日 更新日: 2026年3月13日 タグ: development, cloudflare, cloudflare-pages, cloudflare-workers, cloudflare-functions およびその他の5つのタグ recaptcha security 11ty nooshu-website-dev contact-form 読了時間: 📖📖📖📖📖📖📖📖📖📖📖 55分 はじめに 最近、Cloudflare Workerを使用して、標準の圧縮されていないHTMLファイルではなく、Brotli 11で圧縮されたHTMLを提供するブログ記事を書きました。この記事に続いて、私の問い合わせページのCloudflare Workerセットアップについて記事を書くことにしました。スパムを停止するために、フォーム機能にreCAPTCHA v3も統合しました。フォームは非常にシンプルで、訪問者に氏名、メールアドレス、そして私に送りたいメッセージを求めます。Workerはこれらの情報を集め、私の個人メールアドレスを指すカスタムメールアドレスにメールを送信します。これにより、サイトから来るメッセージを簡単にフィルタリングでき、必要に応じて返信するオプションがあります。 この投稿は、Sia Karamalegos氏の2024年のNetlifyからCloudflareへの移行に関する投稿に大きく触発されていることを言及しておく価値があります。私はPerformance.now() 2023で講演した際にアムステルダムでSia氏に会うという素晴らしい機会を得ました。彼女は私の講演のMCを務め、講演前に（率直に言って）緊張でパニックになっていた私を、彼女は非常にサポートしてくれました！ なぜ問い合わせフォームにサーバーレスエンドポイントを使用するのか？ さて、前にも何度も言ったように、このブログは11tyを使用して構築された静的サイトであり、Cloudflare PagesのProプランでホストされています。メールを送信するために必要なPOSTメソッドを指すバックエンドが単純に存在しません。 過去に使用したソリューション これは、このブログの問い合わせフォームの動作方法を変更したのは初めてではありません。長年にわたって5つの代替案を数えました！Gitは履歴を追跡するのに素晴らしいと思いませんか！私のひどい記憶力では、それらをすべて覚えておくことはできないでしょう！したがって、Cloudflareを使用していない場合、またはこれにWorkerを使用したくない場合は、以下に完全に実行可能な代替案のリストがあります。 Netlify Forms URL: Netlify Forms コスト: 無料+（選択したNetlifyティアによる） Netlify Formsは、Netlifyでホストされているサイト向けの組み込みフォーム処理サービスです。バックエンドを構築または維持することなく、静的ウェブサイトからフォーム送信を収集および管理できます。送信はNetlifyダッシュボードで表示したり、メールやWebhookで転送したりできます。CloudflareがNetlify Formsほど簡単に統合および使用できるフォーム設定を提供していないのは本当に残念だと思いますが、もし提供していれば、私はこのブログ記事を書く必要はなかったでしょう！ Cloudflare Pages Functions + MailChannels URL: https://developers.cloudflare.com/pages/functions/ & https://www.mailchannels.com/ コスト: 無料プランあり（ボリュームベースの価格設定による10ドル以上） 最初にNetlifyからCloudflareにホスティングを移行したときに、このセットアップを使用しました。MailChannelsがCloudflare Workersユーザー向けの無料メール送信サービスを終了するまで（私はその一人でした）、それまで他のソリューションを探していました。以下でご覧のとおりです。 Formspree.io URL: https://formspree.io/ コスト: 無料ティアあり（有料プランは月額15ドル以上） Formspreeは、独自のバックエンドサーバーを構築することなくフォーム送信を収集できるホスト型フォームサービスです。フォームをFormspreeにポイントするだけで、送信をメールアドレスやその他のAPIエンドポイントに送信する処理を行います。組み込みのスパム保護とさまざまなワークフローとの統合が付属しています。 Formspark.io (旧Submit Form) URL: https://formspark.io/ コスト: 無料ティアあり（有料プランは月額9ドル以上） Formsparkは、独自のバックエンドサーバーを必要とせずにフォーム送信を受け付けて管理できる基本的なホスト型フォームバックエンドです。フォームをFormsparkに送信するだけで、データを保存（または転送）し、メール通知、Webhook、スパムフィルタリングのオプションがあります。 Botpoison URL: https://botpoison.com/ コスト: 無料プランあり（月額4ドル以上、必要なボット検証数による） Botpoisonは、CAPTCHAやユーザーに追加の手順を要求することなく、自動送信をブロックする、ウェブフォーム用の目に見えないアンチスパムおよびボット防止サービスです。フォームインタラクションを分析し、プルーフ・オブ・ワークチャレンジとレピュテーションチェックを適用して、人間のトラフィックとボットを区別します。Formspark.ioの設定から問い合わせフォームのスパムがまだ届いていたときに、これを使用し始めました。 Resend URL: https://resend.com/ コスト: 無料プランあり（有料プランは20ドル以上） Resendは、開発者向けのメール配信サービスであり、アプリケーションやウェブサイトからトランザクションメールやブロードキャストメールを送信するためのシンプルなAPIとSimple Mail Transfer Protocol (SMTP) インターフェースを提供します。配信可能性、バウンス追跡、抑制リスト、メール分析などの機能を処理するため、開発者はメールインフラストラクチャを自分で管理する必要がなく、多くのプラットフォームと統合できます。Resendは、この記事で後述するように、現在私のメールワークフローの一部です。 セットアップの概要 現在のセットアップは次のとおりです：Cloudflare Pages Functions (Worker) + Google reCAPTCHA v3 + メール送信のためのResend。 このワークフローの全体像は次のとおりです。 ユーザーが詳細とメッセージを入力して問い合わせフォームに記入します。 reCAPTCHA v3が実行され、短命な検証トークンが追加されます。 フォームは/api/contact（リポジトリのルートにあるfunctions/api/contact.jsのPages Function経由）にPOSTします。 Pages Functionは次に次を行います： Googleにトークンを検証します。 ユーザー入力を検証します。 検証された入力をResendを使用してメールで送信します。 ユーザーを「Thank You」ページにリダイレクトし、メッセージが送信されたことを確認します。 Google reCAPTCHA v3 この投稿で書かれていることの中で、Google reCAPTCHA v3がどのように機能するかを調査したことが、おそらく最も魅力的でした！ユーザーには完全に目に見えず、複雑（しかし論理的）なスコアリングメカニズムに基づいているという事実が大好きです。人間であることを証明しない、非常にフラストレーションのたまるビジュアルCAPTCHAは必要ありません。「それらはあなたがアメリカ人であることを証明します！」（この引用の功績は私にはありません。Terence Eden氏のものだと思いますが、少なくとも私が読んだのは彼からだと思います！） では、reCAPTCHA v3はどのようにしてあなたが人間であると判断するのでしょうか？それは、ユーザーにビジュアルチャレンジを設定するのではなく、ユーザーの行動およびコンテキスト信号を分析し、それらの信号に基づいてリスクスコアを作成することであることが判明しました。最大の信号は、ユーザーがページでどのように行動するかからもたらされます。 ユーザーセッションの行動分析 reCAPTCHAは、ユーザーのページとのインタラクションから、多くのパターンとメトリックを観察します。これには以下が含まれます： マウスの移動パターン タイピング速度とリズム スクロール行動 クリックのタイミングと配置 フィールド間またはタブ間のフォーカス変更 私たち人間は、コンピューターを使用する際に少し不器用です。マウスの動きはわずかにカーブしてさまよい、考えずに一時停止し、タイピングには時折の躊躇や不均一なリズムが伴います。 一方、Skynetは少し完璧すぎる傾向があります。そのマウスパスはしばしば直線的で、タイミングは予測可能で、そのインタラクションは実際の人間の管理よりもはるかに速く発生する可能性があります。それらの過度に整然としたパターンは、自動化が機能していることを示す強力な兆候であることがよくあります。 ブラウザとデバイスのフィンガープリンティング さて、ブラウザのフィンガープリンティングについて考えると、私はしばしばそれを広告やインターネット全体でユーザーを追跡する企業と関連付けます。公平に言えば、これはGoogleの話なので、彼らが実際にこれを行っている可能性は非常に高いです！:sad_face:。ブラウザとデバイスのフィンガープリンティングは、reCAPTCHAスクリプトがリクエストの発信元の環境とデバイス情報も調べる方法です。 典型的なシグナルには以下が含まれます： ブラウザのバージョンと機能 インストール