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

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

• 本日
• 週間
• 月間

1. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 7PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

2. 

   マウスの左クリックや右クリックが効かないのでマウス分解して直す方法 6PV

   マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻れませんね。そこで長年使ってきたマウスの右クリックではなく左クリックが効かなかったりジャダー（チャタ…

   もっと読む

3. 

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

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

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

   マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

   画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

   マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 99PV

   画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

   もっと読む

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

目次に行く･戻る

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

• カーメイトのエンジンスターターでエラー15表示と対処方法81
• ブレーキペダル調整ストローク調整方法高さ調整80
• 車のキーナンバー確認方法。キーレス紛失や壊れた時16
• エクストレイルフォグランプが下を向きすぎている光軸調整方法12
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法6
• マウスの左クリックや右クリックが効かないのでマウス分解して直す方法6
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ5
• プッシュスイッチを自動戻り（タクティカルスイッチ化）スイッチ加工方法5
• Windows10で動かないアプリを動かす方法24
• アイドリングストップシステム異常警告灯表示対処方法4

サイトのコメント欄やメールフォームなどにおいて、スパム的なコメントやスパムメールなど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も多くなってくるかもしれません。