お問い合わせフォームのスパムを止める方法
お問い合わせフォームのスパム対策
お問い合わせフォームのスパム対策：ハニーポット、タイムトラップ、CAPTCHA | We.Inc
ハニーポット、タイムトラップ、Turnstile・reCAPTCHA・hCaptchaなどの無料CAPTCHAをサーバー側で検証して、お問い合わせフォームのスパムを防ぐ方法。ライブデモ付き。
手間のかからない対策から順に重ねます。人には見えないがボットは入力してしまう隠しハニーポット欄を追加し、人が入力できないほど速く送信されたフォームを拒否します。それでもスパムが届く場合は、Turnstile、reCAPTCHA、hCaptchaなどのCAPTCHAサービスを追加し、そのトークンをサーバーで検証します。
スパム対策の比較
- 方法
- 訪問者が気づくこと
- 防げるもの
- サーバー側のコード
- ハニーポット欄
- なし
- すべての欄を埋める単純なボット
- 必要、1行のチェック
- Cloudflare Turnstile
- 通常はなし、時々チェックボックス
- ほとんどの自動投稿
- 必要、siteverifyの呼び出し
- reCAPTCHA v3
- なし、スコアが返る
- ほとんどの自動投稿
- 必要、検証してしきい値を決める
- hCaptcha
- 時々パズル
- ほとんどの自動投稿
- 必要、siteverifyの呼び出し
スパムボットはWeb上のフォームを巡回し、自動で投稿します。サーバーには誰が入力しているか見えないため、どの対策も、人ならしない振る舞いを見つけるか、別のサービスに訪問者を保証してもらう仕組みです。デモで最初の2つの対策を試し、対応するサーバー側のチェックをコピーしてください。
- websiteのような思わず入力したくなる名前の入力欄を1つ追加し、type=hiddenではなくCSSで隠します。
- フォームが表示された時刻を保持する隠し欄を追加します。
- サーバーで、トラップに値がある送信や、時間差が数秒未満の送信を破棄します。
- スパムが続く場合は、CAPTCHAウィジェットを追加し、メッセージの保存やメール送信の前にサーバーでトークンを検証します。
- トラップにかかった送信は、黙って受け付けて破棄しましょう。エラーを表示すると、ボットに何を変えればよいか教えてしまいます。
- トラップ欄にはtabindex="-1"とaria-hidden="true"を付け、キーボードやスクリーンリーダーの利用者が入り込まないようにします。
- タイムトラップは3秒程度と短めにします。ブラウザーの自動入力を使えば、本物の人でもすぐにフォームを埋められます。
- CAPTCHAのシークレットキーは絶対にページのコードに入れないでください。置き場所はサーバーだけです。
よくある質問
ハニーポット欄とは何ですか？
フォームのコードには存在するものの、人からは隠されている入力欄です。訪問者には見えないので空のままになりますが、見つけた欄をすべて埋めるボットは何かを入力してしまい、正体がばれます。
無料のreCAPTCHA代替はありますか？
あります。Cloudflare TurnstileとhCaptchaはどちらも無料プランがあり、仕組みも同じです。ページにスクリプトとウィジェットを置き、サーバーからシークレットキーと訪問者のトークンをsiteverifyのアドレスへ送ります。上限は各サービスの最新の料金ページで確認してください。
reCAPTCHA v3ではパズルが表示されますか？
表示されません。Googleのドキュメントによると、v3はスコアを返し、1.0は正当な操作の可能性が非常に高く、0.0はボットの可能性が非常に高いことを示します。しきい値は0.5から始めることが推奨されています。低いスコアをどう扱うかは自分で決めます。
ウィジェットだけでスパムを防げますか？
防げません。Cloudflareのドキュメントにも、クライアント側のウィジェットだけではフォームを保護できないと明記されています。ボットはフォームの送信先に直接投稿できるため、サーバーでトークンを検証する必要があります。
ハニーポットがあるのにスパムが届くのはなぜですか？
本物のブラウザーを動かし、見える欄だけを埋めるボットもいれば、人が手で入力するスパムもあります。タイムトラップを追加し、次にCAPTCHAを導入しましょう。フォームでリンクが不要なら、リンクだらけのメッセージも拒否します。
無料のチェックを先に行う理由
- ハニーポットとタイムトラップは訪問者に負担をかけず、粗雑なスクリプトによるスパムの大部分を捕まえます。CAPTCHAはサードパーティのスクリプト、プライバシーポリシーへの記載、時にはチャレンジが加わるため、必要になったときに取っておきましょう。
トラップを正しく隠す
- 多くのボットは隠し入力欄を無視するため、type="hidden"ではなく、欄を画面外へ移動するCSSを使います。autocomplete="off"で自動入力も無効にします。ブラウザーが値を入れてしまうと、本物の人がボットと判定されるためです。
- MDNによると、ブラウザーはログイン欄のautocomplete="off"を無視することがあるため、トラップの名前をemailやpasswordにしないでください。
CAPTCHAトークンをサーバーで検証する
- どのサービスもフォームにトークンを入れます。サーバーはそのトークンとシークレットキーをプロバイダーのsiteverifyアドレスへ送り、応答のsuccessがtrueの場合のみ処理を続けます。
- Turnstileのトークンは300秒間有効で、検証は1回のみです。reCAPTCHA v3のトークンは2分間有効なので、ページ読み込み時ではなく、訪問者が送信したときに取得します。
ハニーポットとタイムトラップをコピーする
HTMLはフォームに入れます。サーバー側のチェックはNodeとExpressの例ですが、どの言語でもロジックは3行です。
ハニーポット欄付きのフォーム
.hpクラスがトラップを画面外へ移動します。started欄には小さなスクリプトが現在時刻を入れます。
サーバー側のチェック（Node、Express）
ボットにも人と同じ応答を返すので、どのチェックに引っかかったかを学習されません。
Turnstile、reCAPTCHA、hCaptchaの追加
3つとも仕組みは同じです。以下の詳細は各プロバイダーの公式ドキュメントに基づいています。
CAPTCHAサービスの比較
- Turnstile
- reCAPTCHA v3
- hCaptcha
- スクリプト
- サイトキーを付けてGoogleから読み込み
- ウィジェット
- <div class="cf-turnstile" data-sitekey>
- ウィジェットなし、送信時にexecuteを呼ぶ
- <div class="h-captcha" data-sitekey>
- 検証先
- challenges.cloudflare.com/turnstile/v0/siteverify
- Googleの検証エンドポイント
- api.hcaptcha.com/siteverify
- トークンの有効期間
- 300秒、1回限り
- 2分
- プロバイダーのドキュメントを参照
- 結果
- successがtrueまたはfalse
- successと0.0から1.0のスコア
- successがtrueまたはfalse
Turnstileトークンの検証（Node 18以降）
ウィジェットはフォームにcf-turnstile-responseという欄を追加します。シークレットは環境変数に保管してください。
ライブデモ：ハニーポットとタイムトラップ
どこにも送信されません。「送信」を押すと、サーバーと同じチェックがこのブラウザー内で実行されます。
お名前
メッセージ
Webサイト（空欄のままにしてください）
ボットのように振る舞う：隠し欄に入力する
送信
やり直す
フォームに入力して「送信」を押すと、サーバーのチェック結果が表示されます。
受付：トラップは空で、{n}秒が経過しました。実際のフォームならここでメッセージが送信されます。
破棄：隠し欄に値が入っていたため、ボットと判断しました。訪問者にはそれでもお礼のメッセージが表示されます。
破棄：{n}秒で送信され、最低{m}秒より速すぎました。
ボットから見える状態がわかるよう、ここでは隠し欄を枠付きで表示しています。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る