問い合わせフォームからのスパムをGoogle reCAPTCHAを導入で一網打尽!スパム来なくなりました!

2019-07-06 610 1527

▽お問い合わせフォームのBot攻撃が年々増加している
▽reCAPTCHA（リキャプチャ）v3の設置方法
▽[v3]設置手順１「まずはフォームのHTMLにreCAPTCHA設置コードを追加」
▽[v3]設置手順２「次にフォームタグ内にhiddenのinputタグを追加」
▽[v3]設置手順３「PHP側の先頭にコードを追加」
▽[v2]設置手順１「まずはフォームのHTMLにreCAPTCHAのAPIを読み込む」
▽[v2]設置手順２「フォームのボタンの辺りに認証チェックフォームを設置」
▽[v2]設置手順３「PHP側の先頭にコードを追加」
▽reCAPTCHA（リキャプチャ）設置のご依頼

＜お問い合わせフォームのBot攻撃が年々増加している＞

クライアントから、スパムメールが頻繁に届くようになったと連絡があり、
お問い合わせフォームにスパム対策を導入することに。

ロシア、中国、アメリカなどなどの業者が多いと思われるのですが、
フォームのURLを自動でかき集めて、自動で送信させるという悪さを仕掛けてきます。

スパムメールにはURLが記載されており、単なるサイトの宣伝行為が目的であることが多いです。
お問い合わせフォームを狙ったBot攻撃は昔からあることなのですが、年々ひどくなっています。

コンバーション率を測定している注文フォームが攻撃された場合は、コンバージョンのデータが正しく得られません。ビジネスの邪魔にもなってくるので、スパムBot対策は基本として導入しなければいけません。

フォームのBot対策で有名なのは無料で使用ができるgoogle様の「reCAPTCHA（リキャプチャ）」というサービス。設置が比較的簡単なので、システムに詳しくない人でもreCAPTCHAは設置できると思います。

googleのリキャプチャにはバージョン２と３があります。

reCAPTCHA v2（ユーザーに認証のチェックを押させる）

reCAPTCHA v3（画面右下に保護マークが表示されるだけ）

個人的にはリキャプチャv3を導入した方が良いかなと思います。
リキャプチャv2は「信号をクリック」「看板をクリック」など、googleのディープラーニングのお手伝いをさせられる時があるので、ユーザーの問い合わせ率が下がりそうです。

リキャプチャv3とリキャプチャv2は設置コードが全然違います。
まずはオススメのリキャプチャv3の方から見ていきましょう。
「フォームHTML」と「メール送信PHP」の２つのファイルを編集します。

＜reCAPTCHA（リキャプチャ）v3の設置方法＞

reCAPTCHAに登録して管理画面へ
https://www.google.com/recaptcha/intro/v3.html

「＋」のマークをクリックして、設置するサイトのドメインなどを入力してください。

登録ができましたら「サイトキー」と「シークレットキー」が表示されます。
この情報は、管理画面でいつでも見れますので、メモる必要はありません。後ほどコピペで使います。

[v3]設置手順１「まずはフォームのHTMLにreCAPTCHA設置コードを追加」

※2019年7月動作確認済み

//reCAPTCHA v3

<!----><!----><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!----><!----><script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>

<!----><!----><script>

grecaptcha.ready(function () {

    grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {

        var recaptchaResponse = document.getElementById('recaptchaResponse');

        recaptchaResponse.value = token;

    });

});

</script>

私はjquery関連をHTMLコードの一番下に一括で記載することが多いので、上記をそのままコピペしています。
recaptcha/api.jsはjquery本体の次に読み込むなら、どの部分に記載しても問題ありません。

[v3]設置手順２「次にフォームタグ内にhiddenのinputタグを追加」

<!----><!----><form method="post" action="xxxxx.php">

    <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">

    ・

    ・

    ・

</form>

hiddenのinputタグはformタグ内であればどこでもいいです。
これでHTML側の実装は終わりです。

次はformタグのactionに指定しているPHP側のコードを編集します。
下記のコードをコピペするだけで完了するので非常に簡単です。

[v3]設置手順３「PHP側の先頭にコードを追加」

<?php

//reCAPTCHA v3の処理

if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){

    $secret = 'シークレットキー';

    $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']);

    $reCAPTCHA = json_decode($verifyResponse);

        if (!$reCAPTCHA->success){

        echo "送信エラーになりました。ブラウザの戻るボタンを押して、再度ご送信お願いします。";

        exit;

    }

}else{

    echo "送信エラーになりました。ブラウザの戻るボタンを押して、再度ご送信お願いします。";

    exit;

}



//以降はメール送信処理のコード

    ・

    ・

    ・

?>

PHPの先頭に記述すればいいかなと思います。エラー時の処理は、Botではないのにエラーが出る時が度々ありますので、その場合はブラウザの戻るで戻ってもらい、再度送信ボタンを押してもらうようナビゲーションを出しています。この部分はエラー時の処理を自由に改良してください。

以上で設置完了となります。テスト送信をして無事に送信されればもう大丈夫です。
Botによるスパムメールがほとんど届かなくなります。

＜reCAPTCHA（リキャプチャ）v2の設置方法＞

[v2]設置手順１「まずはフォームのHTMLにreCAPTCHAのAPIを読み込む」

<!----><!----><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

//jquery読み込み後にrecaptchaを読み込む

<!----><!----><script src="https://www.google.com/recaptcha/api.js" async defer></script>

[v2]設置手順２「フォームのボタンの辺りに認証チェックフォームを設置」

//認証チェックのフォームが表示されます

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="サイトキー"></div>

設置手順おまけ ※これは必須ではありません。

<!----><!----><script>

//認証にチェックされたら送信ボタンを表示する

function clearcall(code) {

    if(code !== ""){

        $('.submit-btn').fadeIn();

    }

}

</script>

[v2]設置手順３「PHP側の先頭にコードを追加」

<?php

//reCAPTCHA v2の処理

$recaptcha = htmlspecialchars($_POST["g-recaptcha-response"],ENT_QUOTES,'UTF-8');

if(isset($recaptcha)){

    $captcha = $recaptcha;

}else{

    $captcha = "";

    exit;

}

$secretKey = "シークレットキー";

$resp = @file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captcha}");

$resp_result = json_decode($resp,true);

if(intval($resp_result["success"]) !== 1) exit; //認証失敗時はここで終了



//以降はメール送信処理のコード

    ・

    ・

    ・

?>

以上で、テスト送信をして無事に届けばreCAPTCHA（リキャプチャ）v2の設置完了です。

＜reCAPTCHA（リキャプチャ）設置のご依頼＞

法人・個人事業主の方で、お問い合わせフォームからのスパムにお悩み方はご連絡ください。
リーズナブルでかつ、どこよりも早く対応致します。土・日・祝日もメール対応可です。

お問い合わせフォームのスパム対策の料金
お問い合わせフォームスパム対策のみ … 4,000円（税別）
お問い合わせフォームの設置（入力項目10以内） … 12,000円（税別）

私の個人事業サイトの一番下にある問い合わせフォームからお気軽にどうぞ。
お問い合わせフォームのスパム対策