【WordPress】スパム対策でContact Form 7にreCAPTCHAを設定する

ITエンジニアリング
Contact Form 7にreCAPTCHAを設定する

最近、個人で運営しているブログでContact Form7を利用して、お問い合わせフォームを設置しているのですが、フォームを利用したスパムメールが多くなってきました。

一応チェックボックスなどで、bot対策をしているつもりだったのですが、それでも弱いようで、スパムメールがどんどん増えてきました。

と、いうことでもっと頑丈にセキュリティを強化するために、「reCAPTCHA」を設定することにしました。

Contact Form7を利用している方は、無料ですのでreCAPTCHAを導入することをオススメします。

reCAPTCHAはGoogleのサービス

reCAPTCHA(リキャプチャ)とは、メールフォームなどに対するbotのスパム攻撃に対応するために開発されたサービスです。

現在のバージョンはv3となっています。

v1は、表示された文字を入力して判断していました。

ただ、人間もその文字を認識できないくらい複雑になったので、終了したそうです。

v2では、チェックボックス形式で、それでもbotの可能性があると車や信号機などを画像の中から選択させて、botチェックをしていました。

このv2も結構手間でしたよね。

これを導入してしまうと、bot対策になりますが実際お問い合わせしてもらいたいユーザーの使い勝手も手間が増えてしまい、私もめんどくさかった一人です。

その後、チェックボックスを不要にしたInvisible reCAPTCHAが生まれました。

送信ボタンを押した時、botと判定されるとv2と同じ方式の画像選択画面が現れます。

これも、時々出てきたことがありましたが逆にこのポップアップがフィッシング詐欺のようでしたよね。

そこで、現在のv3がリリースされました。

画像認証は完全になくなり、AIがユーザーの行動をスコア化して、botかどうか判別します。

AIなので、ページ内でのユーザーの動きを学習していくことで、利用が増えるごとに精度が高まっていくそうです。

reCAPTCHA概要

https://www.google.com/recaptcha/about/

設定手順

今回は、このreCAPTCHAをWordPressのプラグインContact Form7に導入していきたいと思います。

APIキーの取得

まずは、APIキーの取得が必要です。

以下のURLにアクセスします。

https://www.google.com/recaptcha/about/

右上の「Admin Console」をクリックします。

(Googleにログインしていない場合、ログイン画面が現れます)

※Googleアカウントが必要ですので、利用するGoogleアカウントは準備しておいてください。

サイトの登録画面が現れますので、各項目を入力していきます。

※v3 と v2 を選択することができますが、上記で説明した通り、使い勝手は違うのでv3を選択してください。

「送信」をクリックすると、サイトキーとシークレットキーという2つのキーが表示されますので、2つとも利用するのでコピーしてどこかに保存しておいてください。

Contact Form 7にAPIキーを設定

ここからは、WordPress側での作業です。

ダッシュボードから、「お問い合わせ」→「インテグレーション」をクリックしてください。

インテグレーションページから、reCAPTCHA項目の「インテグレーションのセットアップ」をクリックします。

サイトキーとシークレットキーの入力欄が表示されるので、取得したキーをそれぞれペーストして、「変更を保存」をクリックします。

これで、サイトを確認すると、右下に保護マークが表示されていれば、無事成功です!

保護マーク周りの調整

上記の流れで無事保護された状態になりましたが、右下に常時保護マークが表示されていまいます。

この位置ってページトップボタンに被りませんか?

その場合、きちんとした文言を表示しておけば、こちらのマークを非表示にしておいていいというルールがあります。

まずは、以下のcssを追加すると保護マークは非表示になります。

.grecaptcha-badge { visibility: hidden; }

その後、以下の文言とリンクをお問い合わせページの送信ボタンの上部に設置しておきます。

このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。

以上で、調整完了です。

まとめ

reCAPTCHAの設定をしたことで、今のところスパムメールは全く来ていません。

通知が静かになりました!

良かったです。

Contact From7をお使いの方は、簡単に導入できるのでぜひやっておいた方がいいと思いますので、確認してみてください。