Clever Geek Handbook

保护表单免受``不可见''的Google reCAPTCHA v3垃圾邮件的影响而不会丢失PageSpeed的见解

网站上不时出现有关保护机器人免受各种形式攻击的问题：注册，授权，订阅新闻通讯，反馈，评论等。



标准CAPTCHA毫无用处，机器人会“一次”通过它，并给用户带来麻烦。



最好的解决方案是使用Google reCAPTCHA v2或v3。两种版本的Google reCAPTCHA都是不错的选择。这是目前市场上最好的，清晰，可靠的解决方案，并且是免费的。



这两个版本的主要问题是，当连接时，PageSpeed的Insight得分会明显降低20-30。



ReCAPTCHA v2 示例-需要猜测图片



reCAPTCHA v3 示例-不需要用户采取任何措施，而是在后台分析其行为



对我来说，重要的一点是不要为实际用户造成问题，因为 我本人并不喜欢在reCAPTCHA v2中猜测车辆，因此我的选择是v3。



因此，有两个Google reCAPTCHA v3问题需要解决：



  • 在右下角悬挂徽标；
  • 在Google PageSpeed Insight上损失20-30点。


悬挂徽标



Google允许您通过在许可协议中通过CSS隐藏徽标来删除徽标。 



.grecaptcha-badge {
	visibility: hidden;
}


取而代之的是，在每个表格下都写有“反垃圾邮件reCAPTCHA隐私和服务条款”，以及指向相关Google页面的链接。





Google PageSpeed Insight上的分数损失



从reCAPTCHA v3连接javascript文件时，Google PageSpeed Insight上的分数大大降低了。这对我来说至关重要。我认为这是由于对用户行为的分析（在Yandex.Metrica中使用Web遮阳板时发生了类似的下降）。



在优化的资源上，您可能会损失20-30点。因此，您可以在速度不重要的单独页面上使用它（例如，联系人），而无需进行任何修改。为了在整个站点上使用（例如，保护端到端的登录表单或新闻通讯订阅），建议进行修改。



我想出了一个选项，可以通过单击表单字段来初始化reCAPTCHA v3。默认情况下，我不会从reCAPTCHA v3加载javascript文件，并且只有当用户将光标放在表单字段之一上时，我才会加载它。这种方法很可能会降低确定实际用户的准确性，但是没有问题。这种准确性足以满足我的任务。



此技术首先应用于1C-Bitrix Web表单，然后应用于没有Bitrix的站点上的端到端授权和订阅表单。



考虑到1C-Bitrix是一个公共CMS，我将使用其示例概括地介绍您-方法论和可能的用例。可以进行更多的微调以满足您的需求。



在1C-Bitrix网络表单中使用Google reCAPTCHA v3



1.我们使用标准的bitrix：form组件调用表单，并添加2个：



  • 将按钮类型=提交替换为通常的按钮类型=按钮
  • 添加隐藏的字段名称= g_recaptcha_response


2.单击表单字段到站点或组件的javascript文件时，添加reCAPTCHA初始化（在此示例中，我假设您使用的是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的观察点并为用户提供工具（选择图片）以证明它们不是机器人。但是正如我上面所说，对我来说最重要的是不要给用户造成障碍。


More articles:


All Articles