セキュリティ対策としてreCAPTCHAプラグインなしで導入方法代替としてはCloudflareTurnstile

2024年12月26日 (木曜日)↓における週間月間人気記事トップ３は？↓

• 本日
• 週間
• 月間

1. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 3PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

2. 

   エクストレイルフォグランプが下を向きすぎている光軸調整方法 2PV

   人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

   もっと読む

3. 

   エクストレイルT32でブレーキを踏まずにエンジンスタートする方法 1PV

   今や国産自動車メーカー車のみならず外車と言われるものも、ほとんどの車種にてエンジンプッシュスタート式になってきています。エンジン始動時に昔のように鍵（キー）を回すという動作がなくなってきています。もし…

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 146PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   エクストレイルでカーテシランプ新設、増設取り付け方法 119PV

   現行型のNISSANエクストレイルNT32・T32型には、カーテシランプが付いていません。前期型、後期型共にです。そこで、カーテシランプの意味としてはドアを開けた時の足元を照らしてくれる意味役割と、後…

   もっと読む

3. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 102PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

1. 

   カーメイトのエンジンスターターでエラー15表示と対処方法 146PV

   夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

   もっと読む

2. 

   エクストレイルでカーテシランプ新設、増設取り付け方法 119PV

   現行型のNISSANエクストレイルNT32・T32型には、カーテシランプが付いていません。前期型、後期型共にです。そこで、カーテシランプの意味としてはドアを開けた時の足元を照らしてくれる意味役割と、後…

   もっと読む

3. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 102PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

今日は2024年12月26日です。

目次に行く･戻る

2024年12月26日 (木曜日)本日の人気記事トップ１０

• カーメイトのエンジンスターターでエラー15表示と対処方法9
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法9
• エクストレイルフォグランプが下を向きすぎている光軸調整方法4
• 新型デイズプロパイロットのステアリングをエクストレイルT32に取り付ける3
• エクストレイルリアワイパー交換方法と純正部品番号2
• 車のキーナンバー確認方法。キーレス紛失や壊れた時2
• Windows11 24H2不具合エクスプローラーのツールバー詳細 (…)が下に表示でなく上に表示解決方法2
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく2
• アイドリングストップシステム異常警告灯表示対処方法1
• エンジンスターターTE-W9000のリモコンの電池交換1

サイトのコメント欄やメールフォームなどにおいて、スパム的なコメントやスパムメールなどbot（機械的）と思われる投稿などの対策として有名なのがGoogleのreCAPTCHAがあります。他にもCloudflareのTurnstileなどもあります。今回はこれまでにバージョンをv1からv2そして現在ではv3（バージョン3）になっているreCAPTCHAの導入方法です。

reCAPTCHA とは、

reCAPTCHA は、bot、アカウントの乗っ取り、不正なトランザクションからウェブサイトやモバイルアプリを保護する、最新の不正行為防止プラットフォームです。reCAPTCHA は、数兆のトランザクション、数十億のユーザーとデバイス、数百万のウェブサイトから収集された Google 規模の不正行為情報テレメトリーを活用して、不正行為に対するグローバルな分析情報を提供し、カスタマー ジャーニー全体であらゆるエンドポイントを保護します。さらに、カスタムの AI モデルにより、エンドユーザーに負担をかけることなく、高度な脅威から組織を保護できます。https://cloud.google.com/security/products/recaptcha?hl=ja

もう少し簡単にしますと、reCAPTCHAとは、

簡単に追加できる高度なセキュリティ
reCAPTCHA は、スパムや不正行為からサイトを保護する無料のサービスです。高度なリスク分析手法を使用して、人間と bot を区別します。

reCAPTCHAv3の詳細は以下にある通りになります。

reCAPTCHA v3  |  Google for Developers

URL: https://developers.google.com/recaptcha/docs/v3?hl=ja

プラグインを使うのは簡単ですが、何かと不具合やサイトの重さ（軽さ）やプラグインを導入することによるさらなるセキュリティの懸念などからプラグインを使わずにfunctionにコードを追加することによりreCAPTCHAを導入することができることを以下サイトにおいて解説つきで紹介されています。

MW WP FormにプラグインなしでreCAPTCHA v3を設定するメモ - Qiita

プラグインなしで自作する背景MW WP Formでスパムメール対応をする場合、以前はMW WP Formの本家のアドオン「MW WP Form reCAPTCHA」がありましたが、今は配布停止して…

URL: https://qiita.com/soundweaver/items/6f3c9d6847f1502d80f5

上記サイトを拝見させていただくまでは、プラグインにてreCAPTCHAを導入することにするのかやめるのか考えていましたが、上記サイトの詳細丁寧な解説付きのコードをfunctionにコードを追加することによりreCAPTCHAが導入可能です。

reCAPTCHAのfunctionに記載するコードは以下になります。（上記サイトにもあります。）

/*
 * MW WP Formの自作バリテーション
 */
function mwform_validation_recaptcha( $validation_rules ) {

    if(! class_exists('MW_Validation_Recaptcha')) {

        
        class MW_Validation_Recaptcha extends MW_WP_Form_Abstract_Validation_Rule {
            /*
             * 独自のバリデーションルール名を設定します。
             * 他のバリテーションを被らない名前が良いです。
             */
            protected $name = 'mwformrecaptcha';

             public function rule( $item_name, array $options = array() ) {

               //データが送信されていない（最初にフォームページが表示された）時は以下の処理をしない設定
                if( strtoupper($_SERVER['REQUEST_METHOD']) !== 'POST' ) return '';
                
                /*
                 * 取得したトークンを取得
                 */
                $token = $this->Data->get($item_name);
                $token = !empty($token) ? $token : '';
                
                /*
                 * 管理画面のreCAPTCHAのバリテーションが設定されているかのチェックして変数にいれる
                 */
                $is_reCAPTCHA = isset($options['is_reCAPTCHA']) ? $options['is_reCAPTCHA'] : false;
                
                $secret_key = 'XXXXXXXXXX';//ここには取得したシークレットキーを記載します
                $threshold_score = 0.5;//閾値の設定
                
                //管理画面にてreCAPTCHAバリテーションのチェックがあった時の処理
                if($is_reCAPTCHA !== false) {
                    
                    if($item_name === 'recaptchaToken' && !isset($_POST['submitBack'])) {
                        
                        if(!isset($secret_key) || $secret_key === '') {
                            $defaults = array(
                                'message' => __('No reCAPTCHA Secret Key','efc-theme')
                            );
                            $options = array_merge($defaults,$options);
                            return $options['message'];
                        }
                        //Google reCAPTCHA APIに投げて判定してもらう設定
                        $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secret_key . '&response=' . $token;
                        $response = wp_remote_get($url);
                            if (!is_wp_error($response) && $response["response"]["code"] === 200) {
                                
                                $reCAPTCHA = json_decode($response["body"]);

                                if($reCAPTCHA->success) {
                                    if( $reCAPTCHA->score < $threshold_score) {
                                        
                                        $defaults = array(
                                            'message' => 'reCAPTCHAがスパムロボットと判断しましたので送信できませんでした!!'
                                        );
                                        $options = array_merge($defaults,$options);
                                        return $options['message'];
                                    }
                                } else {

                                    $defaults = array(
                                        'message' =>'reCAPTCHAがスパムロボットと判断しましたので送信できませんでした'
                                    );
                                    $options = array_merge($defaults, $options);
                                    return $options['message'];                                    
                                    
                                }
                                // \$reCAPTCHA->success
                                
                            } else {

                                $defaults = array(
                                    'message' => __('Faild reCAPtCHA Access','efc-theme')
                                );
                                $options = array_merge($defaults,$options);
                                return $options['message'];

                            }

                    }
                }
             }

            /*
             * フォーム編集画面の「バリデーションルール」に設定を追加する
             */
            public function admin($key, $value) {
                $is_reCAPTCHA = false;
                if (is_array($value[$this->getName()]) && isset($value[$this->getName()]['is_reCAPTCHA'])) {
                    $is_reCAPTCHA = $value[$this->getName()]['is_reCAPTCHA'];
                }
        ?>      
                <table>
                    <tr>
                        <td>reCAPTCHA V3</td>
                        <td><input type="checkbox" value="1" name="<?php echo MWF_Config::NAME; ?>[validation][<?php echo $key; ?>][<?php echo esc_attr($this->getName()); ?>][is_reCAPTCHA]" <?php if ($is_reCAPTCHA) : ?>checked<?php endif; ?> /></td>
                    </tr>
                </table>
        <?php
            }
        }
    }

    //上記ルールのインスタンスを作って返す
    if(!isset($instance)) {
        $instance = new MW_Validation_Recaptcha();
        $validation_rules[$instance->getName()] = $instance;
        return $validation_rules;
    }
}

add_filter('mwform_validation_rules','mwform_validation_recaptcha',20,1);

$siteKey = 'XXXXXXXXXX';//サイトキー
$loadReCaptcha = 'https://www.google.com/recaptcha/api.js?render=' . $siteKey;
wp_enqueue_script('reCAPTCHv3',$loadReCaptcha,array(),'v3',true);


$addTokenUsePreventDefault = '
if(document.querySelector(".mw_wp_form_input form")) {
    const myForm = document.querySelector(".mw_wp_form_input form");
    let preventEvent = true;
    const getToken =  (e) => {
        const target = e.target;
        if(preventEvent) {
            e.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute("'. $siteKey .'", {action: "homepage"})
                .then(function(token) {
                    preventEvent = false;
                    if(document.querySelector("[name=recaptchaToken]")) {
                        const recaptchaToken = document.querySelector("[name=recaptchaToken]");
                        recaptchaToken.value = token;
                    }
                    if(myForm.querySelector("[name=submitConfirm]")) {
                        const confirmButtonValue = myForm.querySelector("[name=submitConfirm]").value;
                        const myComfirmButton = document.createElement("input");
                        myComfirmButton.type = "hidden";
                        myComfirmButton.value = confirmButtonValue;
                        myComfirmButton.name = "submitConfirm";
                        myForm.appendChild(myComfirmButton);
                    }

                    myForm.submit();
                })
                .catch(function(e) {
                    alert("reCAPTCHA token取得時にエラーが発生したためフォームデータを送信できません");
                    return false;
                });
            });

        }

    }
    myForm.addEventListener("submit",getToken);

} else if(document.querySelector(".mw_wp_form_confirm form")){

    let count=0;
    const timer = 60 * 1000 * 2;
    getToken = () => {
        grecaptcha.ready(function(){
            grecaptcha.execute("'. $siteKey .'",{action:"homepage"})
            .then(function(token){
                const recaptchaToken=document.querySelector("[name=recaptchaToken]");
                recaptchaToken.value=token;
                if(count<4){
                    setTimeout(getToken,timer)
                }
                    count++
            })
            .catch(function(e){
                alert("reCAPTCHA token取得時にエラーが発生したためフォームデータを送信できません");
                return false
            });
        });
    }
    document.addEventListener("DOMContentLoaded",getToken);

}';

wp_add_inline_script('reCAPTCHv3',$addTokenUsePreventDefault);

上記コードのサイトキー部分とシークレットキー部分をご自分のキーに書き換えてご自分のサイト用のreCAPTCHAを導入してください。

• $siteKey = 'XXXXXXXXXX'→XXXXXXXXXXの部分をご自分のサイトキーに書き換えてください。
• $secret_key = 'XXXXXXXXXX'→XXXXXXXXXXの部分をご自分のシークレットキーに書き換えてください。

すると、管理画面においても通常のサイト表示時においても管理画面ログイン画面においても、すべての画面にてreCAPTCHAが表示されるようになっています。

プラグインを使用すればもっと簡単にGooglereCAPTCHA設定と導入ができると思います。

GooglereCAPTCHA設定方法自体は他のサイトなどでも解説されています。以下サイトなどです。現在ではv3ですがv2の解説のサイトなどもありますね。

URL: https://support.qubo.jp/hc/ja/articles/4414958598297-reCAPTCHA%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95

今後はGooglereCAPTCHAのみではなく、代替のサービスとしてCloudflareのTurnstileも多くなってくるかもしれません。