こんにちは、まっさん(@Tera_Msaki)です。
この記事はSIベンダーで28年あまりシステムエンジニアとして、いろいろなシステムのインフラを構築してきた経験をもとにセキュリティについてまとめたものです。
Webサイトを立ち上げて、1年あまり経ちました。
インターネットに直接接続しているWEBサイトは、不正アクセスなど、日々何かしらの脅威に晒されている状況です。
今回は、Webサイトを運用する中で身近な脅威となる問い合わせフォームを踏み台とした迷惑メールの対策(スパム対策)について、お話したいと思います。
・Webサイトを公開している人
・Webサイトの運用に興味がある人
・Webサイトのスパム対策について知りたい人
この記事を読めば、Webサイトのスパム対策がわかります。
Webサイトを管理するうえで、必ずといいほど使うGoogleのアナリティクス。
2023年までにGA4に切り替える必要があるのですが、GA4で目的のレポートを表示するのにひと苦労、、、
GA4に対応したアクセス解析レポートが出力できるのはかなり魅力的♪

問い合わせフォームに対する脅威
Webサイトの窓口となるのが、問い合わせフォームです。
問い合わせフォームに入力した内容をWebサイトの管理者と入力したメールアドレスにメールを送ります。
入力するのが人であれば、それほど脅威になりませんが、Botを使用して機械的に大量の迷惑メールを送ることが可能です。
問い合わせフォームに入力したメールアドレスにメールが送られることで、迷惑メールの加害者になります。

スパム対策
スパム対策として、人間かBotを判別する仕組みをもつGoogle社のreCAPTCHAが有効な対策のひとつです。
reCAPTCHAには、大きくわけてreCAPTCHA v2とreCAPTCHA v3があり、reCAPTCHA v2では、人間かBotを判断するために、チェックボックスのチェックをユーザに要求します。
reCAPTCHA v3では、チェックボックスのチェックなどユーザ側の操作が不要で、人間かBotを判断するのために、Webサイトに訪れてからの行動で判断します。
ユーザビリティの観点で、reCAPTCHA v3が優れていますが、人間をBotとして誤判定されることもあるので、問い合わせでの利用を考えた場合、reCAPTCHA v2のほうが良いと考えています。
reCAPTCHA v2でも、Webサイトに訪れてからの行動も考慮されており、Botとして疑われた場合、拒否するのではなく、複数の画像を表示して、特定の画像を選択させて判断を行いますので、誤判定に対して、考慮されてます。
このサイトの問い合わせは、reCAPTCHA v2を使用しています。
reCAPTCHAの適用
reCAPTCHAを使用するには、Google社の公式サイトにある管理コンソール(v3 Admin Console)でreCAPTCHAを使用するためのサイトキーとシークレットキーを発行する必要があります。
発行したキーを使って、WebサイトにreCAPTCHAを適用します。

サイトキーとシークレットキーの取得
管理コンソールにログインすると、画面右上に「+」が表示されていますので、これをクリックするとreCAPTCHAを使用するサイト登録の画面が表示されます。

ラベル、reCAPTCHAタイプ、ドメインを入力して保存します。

reCAPTCHAのキーをクリックすると、サイトキーとシークレットキーが確認できます。

問い合わせフォームの設定
問い合わせフォームでプラグインのContact Form7を使用している場合は、Contact Form7のインテグレーションでreCAPTCHAを設定できます。
別のプラグインや使用していない場合でも、reCAPTCHAを使用することが可能ですが、クライアント(JavaScript)とサーバ(PHP)の両方にコーディングが必要になります。
ここでは、Contact Form7にreCAPTCHA v2を設定する方法を紹介します。

reCAPTCHA v3を使用する場合は、インテグレーションのセットアップで、サイトキーとシークレットキーを設定するだけで使用できるようになります。

このサイトもreCAPTCHA v3を使用する予定でしたが、JavaScriptのエラーで問い合わせフォームが送信できない現象が発生しました。おそらくですが、Adsense広告の遅延読み込みが影響しているものと判断しています。
最新版のContact Form7は、reCAPTCHA v2に対応していません。
ReCaptcha v2 for Contact Form 7を使用します。

「reCaptchaの使い方を選択」でreCaptcha バージョン2、「reCaptchaソースを選択」でgoogle.comを選択して、送信をクリックします。
Contact Form7のインテグレーションは、reCaptcha v2のサイトキーとシークレットキーを設定します。
Contact Form7のフォームで、チェックボックスを表示する場所に[rechapcha]を設定します。

reCAPTCHAの適用後の問い合わせフォーム
ReCaptcha v3では全ページにReCaptchaのロゴが表示されるようになりますが、ReCaptcha v2ではReCaptchaを適用した問い合わせフォームだけの表示となります。

今回はここまでです。
問い合わせフォームにチェックする欄を設けたり、メッセージ本文にひらがなが含まれているかチェックする方法などもありますが、フォーム送信だけで実現できる対策はあまり効果がありません。
人間かBotの判断をreCAPTCHAを利用することで、格段に効果があがりますので、reCAPTCHAの利用をおススメします。
このサイトが稼働しているレンタルサーバです。
この記事で紹介している Webサイトのセキュリティ対策がそのまま適用できます。
レンタルサーバを選ぶなら、価格やブログサイトとしてサーバ性能など総合的にみて、オススメです。

誤字脱字、意味不明でわかりづらい、
もっと詳しく知りたいなどのご意見は、
このページの最後にあるコメントか、
こちらから、お願いいたします♪
ポチッとして頂けると、
次のコンテンツを作成する励みになります♪

参考になったら、💛をポッチとしてね♪
コメント欄