はじめに

ホームページのメールフォームは、お客様とのコミュニケーションに欠かせないツールです。しかし、近年ではこのメールフォームがスパム送信の標的となり、多くの企業や組織が対応に追われています。当社にも最近、メールフォームがスパム目的で悪用されているというご相談が増えています。

ホームページのお問い合わせなど

そこで今回は、Googleが提供する「reCAPTCHA v3」を導入することで、ユーザー体験を損なわずにスパムを効果的に防ぐ方法をご紹介します。

ラボスタッフ

最近は、メールフォームを対象にした不正アクセスが大変増えていますので、皆さんお気をつけ下さい。

reCAPTCHA v3とは?

reCAPTCHA v3は、Googleが提供する最新のスパム対策ツールです。従来のreCAPTCHAとは異なり、「私はロボットではありません」のチェックボックスや画像選択などのテストを表示せず、バックグラウンドでユーザーの行動パターンを分析してボットかどうかを判断します。

従来のreCAPTCHAとの違い

  • ユーザー操作不要: ユーザーは何も操作する必要がなく、シームレスな体験を提供
  • スコアベースの判定: 0.0(ボット)から1.0(人間)までのスコアを返し、サイト運営者が閾値を設定可能
  • カスタマイズ性: スコアに応じた対応(拒否・追加認証・許可など)を柔軟に設定可能

reCAPTCHA v3導入のメリット

1. ユーザー体験の向上

従来のreCAPTCHAでは、難読化された文字の入力や特定の画像を選択するなど、ユーザーに負担をかけていました。reCAPTCHA v3では、そのような操作が一切不要となり、ユーザーはスムーズにフォームを送信できます。

2. スパム対策の強化

AIによる高度な判定機能により、ボットによる自動送信を効果的に検出します。また、常に最新のボット対策技術が適用されるため、新種のスパム攻撃にも対応できます。

3. 運用の柔軟性

スコアに基づいて、疑わしい送信をどう扱うかをカスタマイズできます。例えば、スコアが低い場合は追加の認証を求めたり、明らかなボットの場合は送信を自動的に拒否したりすることが可能です。

導入手順

STEP 1: reCAPTCHA v3の登録

  1. Google reCAPTCHA管理コンソールにアクセス
  2. ラベル名(サイト名など)を入力
  3. reCAPTCHA v3を選択
  4. ドメインを登録(例:example.com)
  5. 利用規約に同意して「登録」ボタンをクリック
  6. サイトキーシークレットキーを取得

STEP 2: フロントエンド実装

HTMLフォームにreCAPTCHAスクリプトを追加します。
YOUR_SITE_KEYは取得したサイトキーに置き換えてください。

<!-- reCAPTCHAスクリプトを読み込み -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

<form id="contact-form">
  <!-- フォーム要素 -->
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <textarea name="message" placeholder="お問い合わせ内容"></textarea>
  
  <!-- reCAPTCHAトークン用の隠しフィールド -->
  <input type="hidden" id="recaptcha-token" name="recaptcha-token">
  
  <button type="submit">送信</button>
</form>

<script>
  // フォーム送信時にreCAPTCHAトークンを取得
  document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    grecaptcha.ready(function() {
      grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
        document.getElementById('recaptcha-token').value = token;
        document.getElementById('contact-form').submit();
      });
    });
  });
</script>

STEP 3: バックエンド実装

サーバー側でreCAPTCHAトークンを検証します。以下はPHPでの実装例です。
YOUR_SECRET_KEYは取得したシークレットキーに置き換えてください。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // reCAPTCHAトークンを取得
  $recaptchaToken = $_POST['recaptcha-token'];
  
  // reCAPTCHAトークンを検証
  $url = 'https://www.google.com/recaptcha/api/siteverify';
  $data = [
    'secret' => 'YOUR_SECRET_KEY',
    'response' => $recaptchaToken
  ];
  
  $options = [
    'http' => [
      'header' => "Content-type: application/x-www-form-urlencoded\r\n",
      'method' => 'POST',
      'content' => http_build_query($data)
    ]
  ];
  
  $context = stream_context_create($options);
  $response = file_get_contents($url, false, $context);
  $result = json_decode($response);
  
  // スコアが0.5以上の場合のみ処理を続行
  if ($result->success && $result->score >= 0.5) {
    // フォームの処理を続行
    // メール送信処理など
    echo "送信が完了しました。";
  } else {
    // スパムの可能性がある場合
    echo "スパムの可能性があるため、送信を拒否しました。";
  }
}
?>
ラボスタッフ

WordPressのContact Form7というプラグインなどでは、もっとreCAPTCHAの導入は簡単にできるようになっています。

スコアの見方と対応

reCAPTCHA v3は0.0から1.0までのスコアを返します。一般的な対応方法は以下の通りです:

スコア範囲判断推奨される対応
0.8~1.0人間の可能性が非常に高いそのまま処理を続行
0.5~0.8おそらく人間処理を続行するが、監視を強化
0.3~0.5疑わしい追加の認証を要求またはモデレーション
0.0~0.3ボットの可能性が高い送信を拒否または厳格な検証を実施

注意点とよくある質問

Q
reCAPTCHA v3は無料で使えますか?
A

はい、基本的に無料で利用できます。ただし、「Essentials」プランの場合はであれば毎月 10,000 件まで無料、それを超えるとリクエストをブロックするため、利用状況により有料プランの検討が必要です。

Q
プライバシーへの影響はありますか?
A

reCAPTCHA v3はユーザーの行動パターンを分析するため、プライバシーポリシーにその旨を記載しておくことをお勧めします。

Q
モバイルサイトでも利用できますか?
A

はい、reCAPTCHA v3はモバイルサイトにも対応しています。

まとめ

reCAPTCHA v3は、ユーザー体験を損なうことなくスパムを効果的に防ぐ優れたソリューションです。導入は比較的簡単で、多くのホームぺージですでに採用されています。

当社でも複数のクライアント様に導入をサポートしており、スパム送信の大幅な減少とユーザーからの好評をいただいています。スパムに悩まされているサイト運営者様は、ぜひreCAPTCHA v3の導入をご検討ください。

ラボスタッフ

ご不明な点やサポートが必要な場合は、お気軽に当社までお問い合わせください。専門スタッフが丁寧にサポートいたします。

ホームページ制作のプランはこちらです。