hCaptchaをメールフォームに導入してスパム対策を強化する方法

2024.11.30

hCaptchaをメールフォームに導入してスパム対策を強化する方法

ウェブサイトのメールフォームがスパムボットによって不正利用されるのを防ぐためには、適切な対策が必要です。この記事では、無料かつ効果的なスパム対策ツール「hCaptcha」を導入する方法を詳しく解説します。

hCaptchaとは？

hCaptchaは、Google reCAPTCHAの代替となるセキュリティツールです。hCaptchaを使用することで、ボットによるフォーム送信を防ぎつつ、ユーザーエクスペリエンスを維持できます。また、プライバシーに配慮して設計されているため、ユーザーデータの取り扱いに敏感な場合にも安心して利用できます。
hCaptchaの利点は、Googleが利用できない地域（中国本土）などでも同様に利用できる点です。

導入手順

ステップ1: hCaptchaアカウントを作成

hCaptcha公式サイトにアクセスして、無料のアカウントを作成します。
ダッシュボードから新しいサイトを登録し、「サイトキー」と「シークレットキー」を取得します。

ステップ2: HTMLフォームにhCaptchaを追加

フォームに以下のコードを追加します：

<form action="submit_form.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- hCaptchaウィジェット -->
    <div class="h-captcha" data-sitekey="あなたのサイトキー"></div>
    
    <button type="submit">送信</button>
</form>

<!-- hCaptchaスクリプト -->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

ここで、data-sitekeyには取得した「サイトキー」を設定します。

フロントエンドだけでhCaptchaをチェックする方法

フォーム送信をフロントエンド（クライアント側）で制御する場合、JavaScriptでhCaptchaのトークンが正しく生成されたかどうかを確認します。この方法ではサーバー側のAPI検証が省略されるため、軽いフォーム用途に適していますが、完全なセキュリティは保証されません。

以下のコードで実装できます：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hCaptcha連携フォーム</title>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    <script>
        function validateForm(event) {
            const hcaptchaResponse = document.querySelector('[name="h-captcha-response"]').value;

            if (!hcaptchaResponse) {
                event.preventDefault();
                alert("hCaptchaを完了してください。");
            }
        }
    </script>
</head>
<body>
    <form action="submit_form.php" method="post" onsubmit="validateForm(event)">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        
        <!-- hCaptchaウィジェット -->
        <div class="h-captcha" data-sitekey="あなたのサイトキー"></div>
        
        <button type="submit">送信</button>
    </form>
</body>
</html>

ポイント

onsubmit="validateForm(event)" で、送信時にhCaptchaトークン（h-captcha-response）をチェック。
hCaptchaが未完了の場合、event.preventDefault() を使用して送信を停止し、警告を表示します。

注意: フロントエンドだけでのチェックは簡易的な方法です。悪意のあるユーザーがチェックを回避する可能性があるため、セキュリティが重要なフォームではバックエンド側での検証を併用してください。

サーバー側での検証も併用する場合

以下は、PHPを使用してhCaptchaトークンを検証するコードの例です：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $secret_key = 'あなたのシークレットキー';
    $hcaptcha_response = $_POST['h-captcha-response'];

    $response = file_get_contents(
        "https://hcaptcha.com/siteverify?secret=$secret_key&response=$hcaptcha_response"
    );
    $response_data = json_decode($response);

    if ($response_data->success) {
        echo "フォーム送信が成功しました！";
    } else {
        echo "hCaptchaの検証に失敗しました。もう一度お試しください。";
    }
}
?>

まとめ

hCaptchaは簡単に導入でき、スパム対策として非常に効果的です。フロントエンドだけでのチェックも可能ですが、セキュリティを強化するためにはサーバー側での検証を併用することをおすすめします。

どちらの方法でも、hCaptchaを使用することで、ボットからの攻撃を防ぎ、ユーザー体験を維持することができます。

More View