迷惑メール対策でreCAPTCHAを入れた

案件で設置したメールフォームに無茶苦茶たくさん迷惑メールが届いてたまらんからなんとかならんやろか？という相談が来て対応をしたのでその備忘録。

ワードプレスならプラグインで防げる

ワードプレスでフォームを作っているのならプラグインを使えば結構簡単に迷惑メール対策は可能。

迷惑メールの大半は海外からの攻撃で日本語ではない言語の場合がほとんどということで日本語が本文に含まれていないメールは弾くというようなスパムメール対策プラグインを私は使っている。

Throws SPAM Away

他にもたくさんあるので好きなものを導入すればいいだろう。

ただ、今回はワードプレスで作ったフォームではなかったため別のやり方でやることになった。

メーラーで防げる

迷惑メールは基本メーラーで弾くことが出来る。マックやウインドウズ標準のものでも迷惑メールフィルタの設定で防ぐことは出来る。

私はもうgmailのブラウザでメールをずっとやり取りしているがメーラーなんていらないぐらい高性能なので助かっている。

しかし今回はクライアントがどんなメーラーを使っているかとかよくわからないし使い方を説明するほうがめんどくさそうで金にならないのでメーラーで防げるってことは言わずにフォームを変更することにした。

googleのreCAPTCHAを導入

上司からGoogleのreCAPTCHAを導入するのが簡単なんじゃない？みたいに言われてやったことがなかったので調べてみることにした。

これに関してはグーグルのAPIを使ってロボットか人間かを判別する事ができる高性能なシステムが簡単に導入できるものでTwitterなど色々なところで使われている。

ただ、導入はワードプレスならこれもプラグイン入れるだけで簡単に出来るものの普通のフォームに入れるとなると若干手間がかかる。私のイメージでは15分で終わるイメージだったのだが理解するのに時間がかかり、結局30分以上かかってしまった。

導入手順は以下のサイトを参考にした。

WEB担当者の備忘録

Googleの「reCAPTCHA」を5分で実装する

https://liapoc.com/recaptcha.html

公開したサイトについているメールフォームから30分に1度通知が来るようになりました。残念ながら見込客などといったコンバージョンではありません。ロボットによるスパムの投稿です。そのままでも良いのですが、せっかくなのでGoogleの「reCAP

手順としては以下の通りだ。

APIのキーを取得
表側の実装
裏側の実装

APIのキーを取得する方法以下の通り

グーグルのサイトにアクセスして必要事項を入力する。
すると「サイトキー」と「シークレットキー」が表示される。

表側の実装は以下の通り

ヘッドタグの中にグーグルAPI読み込み用のタグを入れる。



<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

そしてreCAPTCHAを表示させたい箇所に以下のコードを入れる。



<div class="g-recaptcha" data-callback="clearcall" data-sitekey="ここでサイトキーを入力"></div>

参考サイトでちょっと悩んだのがボタンのdisableについての箇所で、うちのサイトにはsubmitボタンが無く、JSで確認画面を表示させている。なので参考サイトのコードを使い回せなかった。



<li class="kakunin"><img src="<?php echo $path_local_img; ?>/<?php echo $mainclass; ?>/btn_kakunin.png" alt="確認" /></li>

これが確認画面へのボタンのコードだ。

どうやってdisable化しようか悩んだ結果、ボタン自体を非表示にしてしまうことにした。今の人はreCAPTCHAぐらい普通知っていてこれをクリアすれば送信できる様になるんだなってことぐらいわかると思うのでボタンは最初見えなくてもいいということにした。



<style media="screen">
  .g-recaptcha > div{
    margin:auto;
  }
  main.contact div.form_contact ul li.kakunin{
    display: none;
  }
  main.contact div.form_contact ul li.kakunin.visible{
    display: block;
  }
</style>

CSSでこのように設定する。



<script type="text/javascript">
  function clearcall(code) {
  if(code !== ""){
      $(".kakunin").addClass("visible");
  }
  }
</script>

jsを追加して動くようにする。

これで表側の実装は出来た。

裏側の実装は以下の通り

裏側の実装をしないとreCAPTCHAの威力は発揮できないので裏側も設定する。phpの場合、参考サイトにある以下のコードをそのまま使おう。php以外の言語を使っている場合はそれに合わせてこのソースを作り変える。



<?

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

if(isset($recaptcha)){
    $captcha = $recaptcha;
}else{
    $captcha = "";
    echo "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) {
    //認証失敗時の処理をここに書く
}else{
    //認証成功時の処理をここに書く
    //ここにmailsend等の記述をする。
}

?>