Protection du formulaire contre le spam "invisible" Google reCAPTCHA v3 sans perdre de points PageSpeed ​​Insight

De temps en temps, la question se posait de la protection contre les bots de différentes formes sur le site: inscription, autorisation, abonnement à des newsletters, retour d'expérience, commentaire, etc.



Le CAPTCHA standard est inutile, les bots le traversent "à la fois" et créent des problèmes pour les utilisateurs.



La meilleure solution est d'utiliser Google reCAPTCHA v2 ou v3. Les deux versions de Google reCAPTCHA sont d'excellentes options. C'est le meilleur qui soit désormais disponible sur le marché à partir de solutions claires et fiables et gratuites.



Le principal problème avec les deux versions est que lorsqu'elles sont connectées, les scores de PageSpeed ​​Insight sont considérablement réduits de 20 à 30.



ReCAPTCHA de l'exemple - nécessite des images devinettes



Exemple reCAPTCHA v3 - ne nécessite aucune action de l'utilisateur, analyse son comportement en arrière-plan



Un point important pour moi est de ne pas créer de problèmes pour les vrais utilisateurs, car Je ne suis pas moi-même un grand fan de deviner les véhicules dans reCAPTCHA v2, donc mon choix est v3.



Il y a donc deux problèmes de Google reCAPTCHA v3 qui doivent être résolus:

• logo suspendu dans le coin inférieur droit;
• perte de 20 à 30 points sur Google PageSpeed ​​Insight.

Hanging logo



Google vous permet de supprimer le logo en le cachant via CSS dans son contrat de licence.

.grecaptcha-badge {
	visibility: hidden;
}

À la place, sous chaque formulaire, écrivez «Anti-spam reCAPTCHA Privacy & Terms of Service» avec des liens vers les pages Google pertinentes.



Perte de points sur Google PageSpeed ​​Insight



Lors de la connexion d'un fichier javascript depuis reCAPTCHA v3, les scores sur Google PageSpeed ​​Insight sont considérablement réduits. C'était essentiel pour moi. Je pense que cela est dû à l'analyse du comportement des utilisateurs (une diminution similaire se produit lors de l'utilisation de la visière Web dans Yandex.Metrica).



Sur des ressources bien optimisées, vous pouvez perdre 20 à 30 points. Par conséquent, vous pouvez l'utiliser sur des pages séparées où la vitesse n'est pas importante (par exemple, les contacts) sans aucune modification. Pour une utilisation sur l'ensemble du site (par exemple, pour protéger un formulaire de connexion de bout en bout ou un abonnement à la newsletter), il est conseillé d'effectuer une modification.



J'ai proposé une option pour initialiser reCAPTCHA v3 en cliquant sur les champs du formulaire. Par défaut, je ne charge pas le fichier javascript de reCAPTCHA v3, et ce n'est que si l'utilisateur place le curseur sur l'un des champs du formulaire que je le charge. Très probablement, cette méthode réduit la précision de la détermination des utilisateurs réels, mais il n'y a eu aucun problème. Cette précision est suffisante pour mes tâches.



Il a commencé à utiliser cette technique d'abord sur les formulaires Web 1C-Bitrix, puis pour les formulaires d'autorisation et d'abonnement de bout en bout sur les sites sans Bitrix.



Compte tenu du fait que 1C-Bitrix est un CMS public, je vais vous parler en termes généraux en utilisant son exemple - sur la méthodologie et le cas d'utilisation possible. Des réglages plus fins peuvent être effectués pour répondre à vos besoins.

Utilisation de Google reCAPTCHA v3 dans les formulaires Web 1C-Bitrix

1. Appelez le formulaire avec le composant standard bitrix: form et effectuez 2 ajouts:

• Remplacez le type de bouton = soumettre par le type de bouton habituel = bouton
• ajouter le nom du champ caché = g_recaptcha_response

2. Ajoutez l'initialisation reCAPTCHA lorsque vous cliquez sur les champs du formulaire dans le fichier javascript du site ou du composant (dans cet exemple, je suppose que vous utilisez 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. Ajoutez le suivi du clic sur le bouton bouton dans le formulaire. Plus loin à l'intérieur, nous utilisons l'exemple décrit dans la documentation Google. Il remplit le champ g_recaptcha_response, que nous utiliserons dans la dernière étape pour valider l'utilisateur.

$('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. Suivi de l'événement onBeforeResultAdd dans init.php



Avant de soumettre les résultats du formulaire, faites appel au serveur Google avec votre <PRIVATE_KEY>, et la valeur du champ caché g_recaptcha_response du formulaire.



En réponse, nous obtenons les points de cet utilisateur:

• 1 c'est définitivement une personne
• 0 exactement un robot
• Plus de 0,5 peut être considéré comme humain

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.');
	}
}

finalement

Cette technique peut être utilisée sur tous les sites et formulaires, quel que soit le CMS. J'ai donné des méthodes de travail générales qui peuvent être appliquées dans votre projet.



Vous pouvez faire de même avec Google reCAPTCHA v2, initialiser en cliquant sur le formulaire et demander à l'utilisateur de cocher la case "Je ne suis pas un robot" et deviner les images, si nécessaire. Dans ce cas, il enregistrera également des points PageSpeed ​​Insight et donnera à l'utilisateur un outil (sélectionner des images) pour prouver qu'il ne s'agit pas d'un robot. Mais comme je l'ai dit plus haut, le plus important pour moi est de ne pas créer d'obstacles pour l'utilisateur.