2020/12/10

【無料】Contact Form 7にreCAPTCHAを導入してスパム対策する方法

WordPress

本記事では、Contact Form 7にreCAPTCHAを導入して、スパムなどからお問い合わせフォームを保護する方法を解説します。

本記事の内容

Contact Form 7にreCAPTCHAを導入してスパム対策する方法
Contact Form 7にreCAPTCHAを導入する際の注意点
なぜスパム対策が重要なのか

スパム対策は重要で、特にWebサイト制作をしている場合などは必須の対応となります。

何も対策をしていないく悪意のある第三者に利用されると、自社サイトがスパム認定されてしまう恐れもあります。対策していないサイトはすぐに対応するようにすべきと思います。

この記事を書いている僕は、エンジニア歴が約4年で、WordPressのテーマ作成については、新規作成とメンテナンスを含めると100サイト以上は対応した経験があります。

本記事を読むことによって、reCAPTCHAを使い、Contact Form 7でお問い合わせフォームをスパム行為から守る方法がわかるようになります。

Contact Form 7にreCAPTCHAを導入してスパム対策する方法

前提として、Googleアカウントは持っていて、Contact Form 7をサイトには設置済みとして進めます。

対応手順

reCAPTCHAのAPIキーの取得
WordPress管理画面でContact Form 7のreCAPTCHA設定をする
reCAPTCHAのバッジ表示を規約に違反せずに非表示にする(任意)

それでは順番に解説していきます。

1. reCAPTCHAのAPIキーの取得

My reCAPTCHAにアクセスします

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

reCAPTCHAの設定をします

・ラベル：自分のサイト名などを入力
・reCAPTCHAタイプ：reCAPTCHA v3を選択
・ドメイン：自分のウェブサイトのドメインを入力
・reCAPTCHA利用条件に同意するにチェックを入れる
・アラートをオーナーに送信する：任意

項目を入力したら「送信」をクリックして設定を完了します。

※ドメインについて、メインのドメインを登録すればサブドメインも登録されます。

ここに入力したドメインと、そのサブドメインが登録対象となります。つまり、example.com を登録すると subdomain.example.com も登録されます。ドメインが有効であるためには、ホストを含む必要があります。ドメインにパス、ポート、クエリ、フラグメントを含めてはなりません。

※「アラートをオーナーに送信する」について

設定エラーや不審なトラフィックの増加など、サイトで問題が検出された場合にアラートを受け取ります。

サイトキー(site key)とシークレットキー(secret key)を取得する

サイトキーとシークレットキーをContact Form 7の設定で使うので覚えておきます。

2. WordPress管理画面でContact Form 7のreCAPTCHA設定をする

Contact Form 7のインテグレーション設定

WordPress管理画面で「お問い合わせ」 > 「インテグレーション」を選択します

「reCAPTCHA」項目の「インテグレーションのセットアップ」をクリック

サイトキーとシークレットキーの設定

先ほど取得した、サイトキーとシークレットキーをそれぞれ入力して、「変更を保存」をクリックします。

これで設定完了です。

サイトにアクセスして、reCAPTCHAのバッジが表示されていれば設定できていることになります。

3. reCAPTCHAのバッジ表示を規約に違反せずに非表示にする(任意)

ここの項目は任意です。

Contact Form 7でreCAPTCHAの設定をすると、お問い合わせページ以外にもサイトのすべてのページにてreCAPTCHAのバッジ表示がされるようになります。この表示を規約に違反せずに消す方法を紹介します。

reCAPTCHAのバッジ表示はCSSなどで勝手に非表示にすると規約違反となります。
ただし、公式サイトによると、reCAPTCHAブランドの表示を視覚的に見えるようにすれば、バッジを非表示にすることができるとされています。

I’d like to hide the reCAPTCHA badge. What is allowed?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

以下の表示をサイトに含めるようにします。

This site is protected by reCAPTCHA and the Google
<a href=”https://policies.google.com/privacy”>Privacy Policy</a> and
<a href=”https://policies.google.com/terms”>Terms of Service</a> apply.

↓

翻訳すると以下になるかと。

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

CSSに以下を設定することにより、reCAPTCHAのバッジ表示を非表示にできます。(style.cssなどに追記します)

.grecaptcha-badge { visibility: hidden; }

翻訳してお問い合わせフォーム下とサイトのフッダーに表示するようにしました。

▼お問い合わせフォーム下部

▼フッダー表示

reCAPTCHAバッジの非表示まとめ

プライバシーポリシー・利用規約の表示をGoogleの提示する方法通りに見える位置に表示する
.grecaptcha-badge { visibility: hidden; }のCSSでバッジ表示を消す

Contact Form 7にreCAPTCHAを導入する際の注意点

reCAPTCHA APIの最新バージョンはv3であり、Contact Form 7はバージョン5.1以降ではreCAPTCHA v3 APIを使用しています。
以前にv2のキーを取得しているサイトでは新たにv3用のAPIキーを取得しないと機能しないので注意が必要です。

正常に動作しなければ、v３でAPIキーを取り直すのがよいかもしません。

ちなみに古いバージョンのContact Form 7を使っている場合は逆にv2のAPIキーを使っていないと動作しないようです。

参考：Contact Form 7の公式サイトの記載

なぜスパム対策が重要なのか

お問い合わせフォームを悪用されるケース

お問い合わせフォームでは、問い合わせをしたユーザーのメールアドレスに自動返信メールを送るように設定されていることが多いと思います。
悪意のある第三者がここの宛先に他人のメールアドレスを入力して迷惑メールを送るという迷惑行為が増えています。

お問い合わせフォームが悪用される問題点

自分のサイトが踏み台にされてユーザーへ迷惑をかけることになる
自分のサイトのドメインやサーバがスパム認定される可能性がある

特に２点目の自社サイトがスパム認定されると、スパム判定を解除するのがとても大変だったり、そもそも運次第なのでスパム判定の解除自体ができない場合もあります。

まとめ

お問い合わせフォームのContact Form 7にreCAPTCHAを導入してスパム防止する方法を解説しました。

冒頭でも伝えたとおり、お問い合わせフォームは迷惑行為をするスパマーに自分やクライアントのサイトが踏み台にされたりする可能性があります。

対策をせずにスパム認定をされると、その後、そのドメインやサーバ経由でのメールが正常に届かなくなったりするケースもあります。スパム認定されると解除されるように対応するのも大変ですし、そもそも一度スパム判定されると解除が難しいのが現状です。

お問い合わせフォームを設置していて、自動返信メールの設定をしているサイトなどはしっかりとした対応をすることが必要だと思います。

ご参考になれば幸いです。