Clever Geek Handbook

PageSpeedインサイトポイントを失うことなく、「目に見えない」Google reCAPTCHAv3スパムからフォームを保護

時々、サイト上のさまざまな形式のボットからの保護について質問がありました：登録、承認、ニュースレターの購読、フィードバック、コメントなど。



標準のCAPTCHAは役に立たず、ボットは「一度に」それを通過し、ユーザーに問題を引き起こします。



最善の解決策は、Google reCAPTCHAv2またはv3を使用することです。GooglereCAPTCHAの両方のバージョンは素晴らしいオプションです。これは、明確で信頼性の高いソリューションから現在市場に出回っている最高のものであり、無料でもあります。



両方のバージョンの主な問題は、接続すると、PageSpeedInsightスコアが20〜30だけ大幅に低下することです。



ReCAPTCHAv2の 例-写真を推測する必要があります



reCAPTCHA v3の 例-ユーザーからのアクションを必要とせず、バックグラウンドでのユーザーの動作を分析します



私にとって重要な点は、実際のユーザーに問題を引き起こさないことです。私自身はreCAPTCHAv2で車両を推測するのが好きではないので、v3を選択します。



したがって、対処する必要がある2つのGoogle reCAPTCHAv3の問題があります。



  • 右下隅にぶら下がっているロゴ。
  • Google PageSpeedInsightで20〜30ポイントの損失。


ハンギングロゴ



Googleでは、ライセンス契約のCSSでロゴを非表示にすることで、ロゴを削除できます。 



.grecaptcha-badge {
	visibility: hidden;
}


代わりに、各フォームの下に、関連するGoogleページへのリンクを記載した「アンチスパムreCAPTCHAプライバシーと利用規約」を記入してください。





Google PageSpeedInsightでのポイントの喪失



reCAPTCHAv3からjavascriptファイルを接続すると、Google PageSpeedInsightでのスコアが大幅に低下します。これは私にとって重要でした。これはユーザーの行動の分析によるものだと思います（Yandex.MetricaでWebバイザーを使用した場合にも同様の減少が発生します）。



適切に最適化されたリソースでは、20〜30ポイントを失う可能性があります。したがって、変更を加えることなく、速度が重要ではない別のページ（連絡先など）で使用できます。サイト全体で使用する場合（たとえば、エンドツーエンドのログインフォームやニュースレターのサブスクリプションを保護するため）、変更を加えることをお勧めします。



フォームフィールドをクリックしてreCAPTCHAv3を初期化するオプションを思いつきました。デフォルトでは、reCAPTCHA v3からjavascriptファイルをロードせず、ユーザーがフォームフィールドの1つにカーソルを置いた場合にのみロードします。ほとんどの場合、この方法では実際のユーザーを判別する精度が低下しますが、問題はありませんでした。この精度は私のタスクには十分です。



この手法は、最初に1C-Bitrix Webフォームに適用され、次にBitrixのないサイトでのエンドツーエンドの認証およびサブスクリプションフォームに適用されました。



1C-BitrixがパブリックCMSであるという事実を考慮して、その例を使用して一般的な用語で説明します-方法論と可能な使用例について。ニーズに合わせて、さらに微調整を行うことができます。



1CでのGooglereCAPTCHAv3の使用-BitrixWebフォーム



1.標準のbitrix：フォームコンポーネントを使用してフォームを呼び出し、2つの追加を行います。



  • ボタンタイプ=送信を通常のボタンタイプ=ボタンに置​​き換えます
  • 非表示フィールド名を追加= g_recaptcha_response


2.フォームフィールドをクリックするときにreCAPTCHA初期化をサイトまたはコンポーネントのjavascriptファイルに追加します（この例では、jQueryを使用していると想定しています）。 



$('body').on('click','form input, form textarea', function() {
	if (typeof(grecaptcha) == 'undefined') {
		var grecaptcha_s = document.createElement('script');
		grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';

		var grecaptcha_h = document.getElementsByTagName('script')[0];
	grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
	}
});


3.フォームのボタンボタンのクリックの追跡を追加します。さらに内部では、Googleのドキュメントで説明されている例を使用します。これは、g_recaptcha_responseフィールドに入力します。これは、最後のステップでユーザーを検証するために使用します。 



$('body').on('click','form button[name="web_form_submit"]', function() {
	grecaptcha.ready(function() {
		grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
			function(token) {
				$('form input[name="g_recaptcha_response"]').val(token);

				var form_obj = $('form');
				var event_obj = form_obj.get(0);

				BX.fireEvent(event_obj,'submit');	
				event_obj.submit();
			}
		);
	});
});


4. init.phpでイベントonBeforeResultAddを追跡するフォーム



の結果を送信する前に、<PRIVATE_KEY>と、フォームの非表示フィールドg_recaptcha_responseの値を使用してGoogleサーバーにアピールします。



それに応じて、このユーザーのポイントを取得します。



  • 1これは間違いなく人です
  • 0まさにロボット
  • 0.5以上は人間と見なすことができます


AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");

function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
	global $APPLICATION;

	$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
	if (!empty($g_recaptcha_response))
	{
		$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
			

		$g_recaptcha_response_check = false;

		if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
		{
			$g_recaptcha_response_check = true;
		}

		if (!$g_recaptcha_response_check)
		{
			$APPLICATION->ThrowException('   Google reCAPTCHA v3.</a>');
		}
	}
	else
	{
		$APPLICATION->ThrowException('   Google reCAPTCHA v3.');
	}
}


最後に



この手法は、CMSに関係なく、あらゆるサイトとフォームで使用できます。私はあなたのプロジェクトに適用できる一般的な作業方法を提供しました。



Google reCAPTCHA v2でも同じことができます。フォームをクリックして初期化し、「私はロボットではありません」チェックボックスをオンにして、必要に応じて写真を推測するようにユーザーに依頼します。この場合、PageSpeed Insightポイントを保存し、ロボットではないことを証明するためのツール（写真を選択）をユーザーに提供します。しかし、上で述べたように、私にとって最も重要なことは、ユーザーに障害物を作らないことです。


More articles:


All Articles