お問い合わせフォームの攻撃対策
企業の情報システム担当者さんを悩ます、お問い合わせフォームへの攻撃（意味不明な単語を機械で打ち込んで、何度も送信）
→まともなお問い合わせが、攻撃に埋もれてしまい、非常に厄介です。
Googleのロボット/人間判定プログラムで、攻撃をブロック
ついこの間までは、下記のようにイラストを選択して、送信することで、人間と機械を見分けていました。
難易度が高い
しかし、上記の写真判定って分かりにくいし、人間でも間違えちゃいますよね。しかもお問い合わせフォームで間違えると、せっかく自社に興味を持っていただいたのが、台無しになることも。（写真判定が面倒だから、問い合わせもいいやって、諦められちゃうことも）
最新版
最新版では、こうした煩雑な判定動作が無くなり、フォームに文字を入力する時間間隔やパターン認識で、ロボットか人間かを判定することが出来るようになりました。これによって、フォーム入力者のストレスが一気に軽減されました。
自社サイトのお問い合わせフォームにも設置
こうして、いざ設置という段になりますが、きちんと動作させるためにはフロントエンドとバックエンドの両方の知識が必要です。特に中小企業の一人情シスの方の頭を意外と悩ませます。
かくいう私も、メイン業務と並行で自社の一人情シスを担っているのですが、実装までに四苦八苦しました。今回は四苦八苦した結果を踏まえて、一人情報シスの方になるべく分かりやすく実装方法を伝授したいと思います。
Googleアカウントの取得
とりあえず、Googleアカウントを保持していないと何も始まりません。アカウントを持っていない人は下記のサイトを参考にアカウントを取得して下さい。
gmotech.jp
Google recapcha管理画面でサイトキーとシークレットキーを取得
Google reCAPCHA管理画面にアクセスして、Googleからサイトキーとシークレットキーを入手して、ページに埋め込む必要があります。それについては下記のサイトの（１）の項目を参照して下さい。
入手したサイトキーとシークレットキーはメモ帳にコピペして、大切に保存して下さい。
お問い合わせフォーム（フロントエンド）に実装
項目最後にフロントエンドのコード全文を掲載しているので、必要な部分をコピペして下さい。
ヘッダー
まずはヘッダーと言われる部分
<head>～</head>
に
<script src="https://www.google.com/recaptcha/api.js"></script>
を追記します。
（下記の赤枠部分 7行目）
フォームメソッド
idを追記します。ここでは、id="myform"としました。（下記の赤枠24行目）
送信ボタン
フォームメソッドでid="myform"と設定した人は下記43行目～53行目までを丸ごとコピペします。44行目のdata-sitekeyを各自が入手したサイトキーに書き換えて下さい。ここではダミーのaaaaaaaaaaaaaaaaaaaaaaaを入力しています。
また、idを別の名前で設定した人は、51行目の"myform"を各自で設定した名前に書き換えて下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>セミナー申し込み</title> <link rel="stylesheet" href="css/style.css"> <script src="https://www.google.com/recaptcha/api.js"></script> </head> <body> <div class="wrapper"> <header class="header"> <nav class="nav"> <ul> <li><img src="../_img/Logo_A.png" alt="company"width="25%" height="auto" min-width="10%"></a></li> </ul> </nav> </header> <form method="post" action="seminar_apply_check5.php" id="myform"> 会社名の入力をお願いします。（必須）<br/> <input name="company_name" type="text" required style="width:200px" ><br/> 部署名の入力をお願いします。<br/> <input name="company_department" type="text" required style="width:100px"><br/> お名前の入力をお願いします。（必須）<br/> <input name="nick_name" type="text" required style="width:100px"><br/> メールアドレスの入力をお願いします。（必須）<br/> <input name="email" type="text" required style="width:200px"><br/> 電話番号の入力をお願いします。（必須）<br/> <input name="tel" type="text" required style="width:200px"><br/> ご住所をの入力をお願いします。（必須）<br/> <input name="address" type="text" required style="width:200px"><br/> <br/> <button class="g-recaptcha" data-sitekey="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" data-callback='onSubmit' style="width:100px;height:50px" data-action='submit'>送信</button> <script> function onSubmit(token) { document.getElementById("myform").submit(); } </script> <br/> </form> <footer class="footer"> <p>All Right Reserved.</p> </footer> </div> </body> </html>
バックエンドに実装
php文の冒頭に以下のコードをコピペして下さい。bbbbbbbbbbbbbbbbbbbはダミーなので各自で入手したシークレットキーに書き換えて下さい。
$recap_response = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&response=' . $_POST['g-recaptcha-response']);
$recap_response = json_decode($recap_response);
判定の結果、ロボットでは無い場合（if($recap_response->success == true)）の処理の処理とそうでない場合の処理を以下のif分をコピペして、それぞれ記載して下さい。
if($recap_response->success == true)
{
// 判定がOKの場合の処理を記載
}
else
{
//判定がNGの場合の処理を記載
}
まとめ
うまく実装出来れば、下記の絵がサイトの右下に表示されるはずです。今回0から1の間のスコアで、0.5より大きければ人間(true)、それより小さければロボットと判定(false)しています。もちろんスコアの閾値を調整して、判定条件を厳しくすることも可能です。興味がある人は他の資料やサイトを調べてみてください。
