concrete5 のお問い合わせフォームにGoogle reCAPTCHAを設置する

Akiyama Tomomi
Akiyama Tomomi

コンクリートファイブジャパン ディレクターの秋山です。
最近、お客様からお問い合わせフォームを通して送られてくるスパム投稿対策についてのご相談が増えています。


Webサイト上のお問い合わせフォームなどを通して、フィッシングサイトへの誘導URLなどが含まれた内容やコンピュータウィルスなどを送りつけて、サイバー攻撃の入り口として利用されることも多いため、警戒が必要です。
最近では、何ものかがロボット（以下bot）を使って数を打ってくるパターンが増えており、数百〜数万通ものスパム投稿があったという実例も見かけます。怖いですね。

botattacktocontactform.png

このようなスパムへの対策として近年用いられているのがCAPTCHA（キャプチャ）という機能です。

CAPTCHAとは

CAPTCHAとは、サイト上の投稿フォームに、ある判定基準を設けることでこのユーザーが人なのかbotなのかを見分けて、botからの攻撃を防御するというものです。
よく見かけるのは「私はロボットではありません」のチェックボックスや歪んだ難読文字を入力させるフォームですね。これらを入力することで、システムがbotではないということを判断するというわけです。

Google reCAPTCHAについて

もはやCAPTCHAの主流となっているのがGoogleが提供しているreCAPTCHAです。
reCAPTCHAには大きく分けて、v1〜v3までの3つのバージョンと、エンタープライズ版を合わせた4種類が存在しています。v1（難読文字）は既にサービス提供が終了しておりますので、現在、無償で利用が可能なのはv2とv3となっています。
concrete5 の標準機能で使用できるのはv3のみですが、v2とv3の違いについて簡単にご説明しておきたいと思います。それぞれの詳しい説明はGoogle reCAPTCHA公式サイトにあるのでぜひチェックしてみてください。

v2：
先ほどもご紹介した「私はロボットではありません」チェックボックスのタイプと、Invisibleと呼ばれるreCAPTCHAのチェックボックスは表示せず、フォームの送信ボタンなどを押した際の反応がbot疑惑だった時だけチェックボックスを出すというものです。チェックボックスが出るタイプということですね。

v3：
v2のようなユーザーからのアクションは不要で、そのユーザーのGoogleアカウントのスコアを見てbotかどうかを自動で判定してくれるというものです。スコアは0.0~1.0で設定されていて、0がbot、1が優良なアクセスと言われています。

このように、v2では少し面倒だったチェックを入力するという作業がv3では不要となるので、v3の方がユーザーにとって優しい機能となっています。

Google reCAPTCHA v3をお問い合せフォームと連携する方法

今回は、そんなGoogle reCAPTCHA v3をconcrete5のフォームブロックに連携する方法をご紹介します。
普段プログラムやソースコードをあまり触らない方でもとても簡単な方法なので、ぜひご参考にしていただければと思います。
そして、なんとこの機能、アドオンではなく標準で搭載されているんです！いいですね！
お持ちのGoogleアカウントでGoogleにログインした後に設定作業を進めてくださいね。それではスタート〜

1.reCAPTCHA v3を設置するサイトを登録する

Google reCAPTCHAのサイトからアドミンコンソールにアクセスします。https://www.google.com/recaptcha/about/
recaptchaadminconsole.png

 

アクセスするとそのまま「新しいサイトを登録する」画面に遷移します。
この画面では、reCAPTCHAをWebサイトで使用するための情報を入力します。
https://www.google.com/recaptcha/admin/create

  • ラベル：後でどのサイトで利用しているんだっけとならないように容易に識別できるラベルを設定してください。（例：サイト名やドメインなど）

  • reCAPTCHAタイプ：このサイトで使用する reCAPTCHA のタイプを選択します。1つのサイトで1つのreCAPTCHAタイプのみを使用できます。concrete5で標準で使用できるのはv3なのでv3を選択しましょう。

  • ドメイン：reCAPTCHAを設置したいWebサイトのドメインを入力します。

  • オーナー：後述のアラートの送信先になるgmailアドレスです。複数設定することが可能です。

  • reCAPTCHA 利用条件に同意する：GoogleにこのWebサイトに関わる情報提供を許諾します。

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

全ての入力が完了したら、「送信」ボタンをクリックします。

サイトの登録が完了すると、サイトキーとシークレットキーが取得できます。
それぞれあとで設定を行うために必要なキーになります。使用時にはこの画面からコピペするのが良いでしょう。

addarecaptcha.png

以上で、サイトの登録が完了しました。

ここでちょっと豆知識です。
アナリティクスに移動ボタンからreCAPTCHAのアナリティクスを見ることができます。
日々どのようなアクセスがどれくらいあるのかをひと目で確認することができます。さすがGoogle。

recaptchaanalytics.png

2.concrete5でreCAPTCHAを設定する

管理画面 ＞ システムと設定 ＞ 権限とアクセス ＞ Captcha設定 にアクセスします。（メニュー検索した方が早いです）
「有効なCaptcha」プルダウンから、先ほど登録したreCAPTCHA v3を選択します。

captchasetting.png

プルダウンを選択すると入力画面が表示されます。

  • サイトキーとシークレットキー：1.でサイトを登録した際に表示されたキーをコピペします。

  • スコア：そのアカウントがbotである可能性を0.0~1.0までの数値で表したものになります。1.0は良いやりとりである可能性が非常に高く、0.0はボットである可能性が非常に高いとのことです。Googleによるとデフォルトのしきい値は 0.5となっていますので、0.5で設定すれば良いでしょう。

  • reCAPTCHAバッジの位置：バッジをサイト上のどこに配置するのかを設定します。

    • 右下：画面の右下に表示されます。

    • 左下：画面の下に表示されます。

    • インライン：フォーム内の送信ボタン上に表示されます。

  • オプション

    • 失敗したやりとりのスコアをログする：concrete5の管理画面>レポート>ログからエラーログを確認できます。
      recaptchalog.png

    • IPを送信：追加チェックを行うために、クライアントの IP アドレスを reCAPTCHA 側に送信します。 (GDPR コンプライアンスに影響するため実施には注意が必要です。)

全ての入力が完了したら、画面右下の「保存」をクリックして内容を保存します。

3.フォームブロックでCaptcha設定をオンにする

reCAPTCHAを設置したいフォームブロックが置かれているページにアクセスして、該当のフォームブロックを編集モードにしてください。

オプションメニューの中にある「迷惑メール対策のCAPTCHA機能を使用しますか？」で「はい」を選択して、ブロックを保存します。これでこのフォームブロックに設定したreCAPTCHAが適用されました。

recaptchaform.png

 

...と、concrete5にreCAPTCHAを設定する作業は以上となります。簡単ですね！
 

このようにconcrete5では、指定のJava Scriptを読み込んだりJSONを触ったりしなくても、基本的な設定を管理画面上から簡単に設定することができます。
concrete5でお問い合わせフォームなどのフォームブロックをご利用の方がいらっしゃいましたら、サイトのセキュリティ対策の一環としてぜひご利用いただければと思います。

＜ 前へ 一覧へ戻る 次へ ＞