blog

Contact Form7を利用してお問い合わせページにreCAPTCHA v3を導入する方法

先日僕のblogのお問い合わせページからbotによる不正アクセスがあり、メールが大量に送られてくるという事件がありました。

「ついにbotに目をつけられるほどこのblogも認知されたのか…」と、ちょっとうれしかった反面、いざメールが大量に送られてくるととても困りますね…

ほそぼそとやっているblogなので今まで特に不正アクセス対策などは特に考えていなかったのですが、ついにreCAPTCHAを導入しようと思い立ちました!

Contact Form7のプラグインを利用したreCAPTCHAの導入自体はとても簡単だったのですが、ちょっとした手順を踏まないと「全ページでreCAPTCHAが読み込まれる」という仕様となっていたため「必要なページでのみreCAPTCHAを読み込む」方法も記載しています。

自分用の備忘録として、また同じ様に悩む方のために書き留めておきます。

reCAPTCHAとは何か?

参考:reCAPTCHA公式サイト

reCAPTCHAはbotなどからの不正なアクセスを防いでくれるGoogleのサービスになります。

利用料も必要ないのでありがたいです

2020年12月現在reCAPTCHA v3(バージョン3)までがリリースされていますが、選択できるのはv2 or v3のいずれかです。

reCAPTCHAのバージョンによる違いは

reCAPTCHAのバージョンは下記の通り大きく分けて3つあります。

  • reCAPTCHA v1
  • reCAPTCHA v2
  • reCAPTCHA v3

reCAPTCHA v1

reCAPTCHA v1はぐにゃっと曲がった英数字を入力するパターンのやつです。

恐らくみなさんも一度は見たことがあるのではないでしょうか?…ただよくよく見てみても「0(ゼロ)」なのか「o(オー)」なのかなど、文字が認識しづらい場合もあり、何回かリロードしてやっと認証を突破したりしていました。

手間に感じていたのは自分だけでは無いようで、みんな不評だったので無くなったのでしょうね(´-`).。oO

reCAPTCHA v2

reCAPTCHA v2は「私はロボットではありません」と書いたチェックボックスにチェックを入れるだけという簡単仕様に変更となりました!

ただ…たまーに画像の中から【自動車】や【信号機】を選択することを問われる時もあります。

これがまた場合によっては難しく、例えばほんの少しだけ自動車がかかっている画像があってその画像を選択するのかしないのか微妙だったり、そもそも指定された画像がどれか分からない、など…

v1よりもだいぶ利用しやすくはなったものの、使い勝手的にはまだ不便なものでした。

reCAPTCHA v3

reCAPTCHA v3は現在のところ、最新バージョンになりますが、とてもユーザーライクなものになりました!

というのも、ユーザーは特に操作を求められることがなく普通にwebを閲覧するだけでOKで、正常な人間の操作かbotによる不正アクセスなのかを勝手に判断してくれるという優れたバージョンです。

どういう仕組かというと、ユーザーの画面の操作を元に0.0〜1.0のスコアを算出し、0.0に近いほど不正アクセスと判断してくれるというものです。

閾値(スコアが○○以下だったらという設定)も自由に設定できるようですね。

とにかく文字入力や画像選択が無くなったのは嬉しいですね!

Contact Form7を利用したreCAPTCHAの導入手順

それではreCAPTCHAの導入手順を説明しますね。

まずWordPress管理画面の「お問い合わせ」→「インテグレーション」ページの【CAPTCHA】と書かれた部分のURLをクリックします。

後からまたWordPressの管理画面に戻ってきてサイトキー・シークレットキーというものを入力するので上記URLをクリックする時は「別タブ」で開いた方が便利です!

するとreCAPTCHAを設定するページに遷移するので右上の「Admin Console」をクリックします。

※この時Googleアカウントにログインした状態でページを閲覧する必要があります。Googleアカウントを持っていない方は先にGoogleアカウントを取得しておいてください。

すると新しいサイトにreCAPTCHAを登録する画面に遷移しますので必要事項を入力していきます。

  • ラベル:サイトの名前などを入力します。任意の名前で大丈夫です。
  • reCAPTCHA タイプ:v2もしくはv3から選択できます。特にこだわりが無ければv3でOKです。
  • ドメイン:今回reCAPTCHAを導入するサイトのドメインを入力します。
  • オーナー:基本は今ログインしているGoogleアカウントだけでOKです。他のアカウントを追加する場合は追記します。
  • reCAPTCHA 利用条件に同意する:こちらにはチェックを入れましょう。
  •     

  • アラートをオーナーに送信する:こちらはチェックを入れなくていいと思います。

※最後の「アラートをオーナーに送信する」の項目ですが、意外と不審なアクセスとしてカウントされる回数が多いので、チェックを入れるとけっこうメール通知が来ます。管理画面を見に行けばいつでも状況の確認ができるので基本は外しておいた方が良いかと思います。

すべて必要事項を入力したらページ下部の「送信する」をクリックしましょう。

送信するをクリックすると【サイトキー】と【シークレットキー】が表示されるのでそれぞれコピーをしてWordPress管理画面に戻ります。

「お問い合わせ」→「インテグレーション」→「インテグレーションのセットアップ」をクリックします。

【サイトキー】と【シークレットキー】を入力するテキストボックスがあるので、そちらに先程コピーしたキーをそれぞれ入力します。

キーを入力したら左下の「変更を保存」ボタンをクリックして完了です!

※僕は一度登録した後の画面なのでボタンの名称が違います!

以上でreCAPTCHAの導入自体は完了となります。登録が完了したので実際に導入した自分のサイトを見てみましょう!

ページ右下にreCAPTCHAのアイコンが表示されていたら導入完了です!

指定したページのみreCAPTCHAを読み込む方法

簡単に導入できて良かったなーと思ったのも束の間、僕はあることに気づいたのでした…

あれ、全ページにアイコンが表示されてる…

まぁ全ページでreCAPTCHAが表示されていても良いかなと最初は思っていたのですが、

・元々ページ右下に上に戻るボタンがあり、それとreCAPTCHAのアイコンが重なって表示されていたので不便

・全ページでJSファイルが読み込まれるとページの表示速度に影響がありそう(体感ではわずかかもしれないですが)

という部分が気になり「お問い合わせページのみ」reCAPTCHAを読み込むよう調整しようと思ったのでした。

functions.phpにプログラムを追記する方法にて対応

僕と同じ様に指定のページのみreCAPTCHAを読み込ませたいという方は多かったみたいでいろいろ調べるとプラグインを導入する方法でも対応ができるようでしたが、個人的にあまりプラグインは増やしたくないのでfunctions.phpに追記する方法で対応することにしました。

functions.phpとは

functions.phpとは何か良く分からないという方もいるかも知れないのでサラッと説明すると、WordPressの各テーマで使う関数が記述されているファイルのことで、カスタマイズを加えたい時にけっこうこのfunctions.phpというファイルにソースコードを記述する機会があります。

このfunctions.phpへの記述を間違うとサイトが閲覧できなくなるだけでなく、管理画面自体にもアクセスできなくなる場合もあるので記述する時はバックアップを取ることを忘れずに!

functions.phpのファイルはどこにあるのか

僕も普段からカスタマイズを頻繁に行う訳では無いので、つい「functions.phpってどこにあったかなー」なんてことがあります。

functions.phpは

【WordPressが設置されている場所】/wp-content/【テーマ名】/functions.php

こちらにあります!

あまりサーバの中を見たことが無い方だとこの【WordPressが設置されている場所】ってどこよ?って場合もあるかと思いますが、自分が契約しているレンタルサーバの管理画面からファイルを探したり、WordPressの管理画面からファイルを探したり、FTPソフトを利用してサーバにアクセスしてファイルを探したり…という方法あたりがメジャーだと思います。

functions.phpにソースコードを追記する

functions.phpのファイルを見つけたら早速「指定したページのみ」reCAPTCHAが読み込まれるよう下記ソースコードを追記しましょう。

// お問い合わせページを除き、「reCAPTCHA」を読み込ませない

function load_recaptcha_js() {
if ( ! is_page( ‘contact-foam’ ) ) {
wp_deregister_script( ‘google-recaptcha’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘load_recaptcha_js’ );

1箇所だけ、「contact-foam」と記載している箇所ですが、こちらはそれぞれのblogでURLが違うと思うので書き換えをお願いします。

僕の場合、お問い合わせページのURLが「https://takatechblog.com/contact-foam」ですので、「contact-foam」となります。

functions.phpに上記プログラムを追記してサイトを見てみると…

お問い合わせページ以外では「reCAPTCHA」のアイコンが消えていました!

reCAPTCHAは導入しておいたほうが良いよ

今回は「Contact Form7を利用した【reCAPTCHA】の導入方法」と、「指定したページのみ【reCAPTCHA】を読み込む」方法について書きました。

僕の本職でもお客さんから不正アタックの相談がけっこうあるのですが、reCAPTCHAを導入することでその後は落ち着くので効果は高いのだと思います。

導入にコストがかかるわけではなく、慣れている人なら5分程度で導入できるので、まだ導入していない方はぜひ導入してみてください!

まだそんなにアクセス無いから対応しなくてもいいかな

という方もいるかも知れませんが、先に対応しておいて損は無いですよ!