javascript - 来自网站联系表单的垃圾邮件响应绕过 'required' 和 'pattern' 属性

Question

我在一个收到大量垃圾邮件的网站上有一个联系表。它托管在 Github 上，所以我的服务器端验证/验证码方法非常有限。所有字段始终具有“必填”属性，我在表单字段中添加了一些“模式”属性和一个非常基本的安全问题。

最初，我会收到所有字段都已填写的垃圾邮件回复，但在消息区域中应填写姓名的随机数字、应填写电话号码的姓名、电子邮件和 URL。

当我第一次添加仅由 javascript/jquery 处理的安全问题时，它似乎没有任何效果，所以我假设机器人可以从代码中读取正确答案？更令人担忧的是，在最近向表单字段添加一些“模式”属性后，我开始收到垃圾邮件回复，其中仍然包含随机数字，而现在电话和电子邮件字段不存在(未提交)/输入)。

我不明白当字段与模式验证不匹配时如何提交该字段，或者当两个字段仍然具有“必需”属性时如何将它们留空。我自己测试了表单，所有验证和必填字段都按预期运行，所有字段都像以前一样收到，所以似乎只是垃圾邮件发送者忽略了这些规则。

如果有人能解释一下这里可能发生/已经发生了什么？？另外/或者，如果有人知道一种更好且经过验证的清除垃圾邮件响应的方法，该方法适用于我拥有的表格并且在 Github 上托管网站的限制范围内，将不胜感激!!

有问题的网站是http://orionimportgroup.com/如果您想在实时环境中查看表格。

var n1 = Math.round(Math.random() * 10 + 1);
var n2 = Math.round(Math.random() * 10 + 1);

$('document').ready(function(){
	$("#a").val(n1 + " + " + n2);
	document.getElementsByName('captcha')[0].placeholder=("CAPTCHA CODE: " + n1 + "+" + n2);
});

$('form').submit(function(e) {
	if (eval($("#captcha").val()) == (parseInt(n1) + parseInt(n2))) {
		e.preventDefault();
		$.ajax({
			url: "https://docs.google.com/a/blakedavies.net/forms/d/e/1FAIpQLSfHdHMJePTJ3R5JOtBrH8zdPdX74eXQ8TDFIGjgkbIbGNdpnQ/formResponse",
			data: $(this).serialize(),
			type: "POST",
			dataType: "xml",
			success: function(data) {
				console.log('Submission successful');
			},
			error: function(xhr, status, error) {
				console.log('Submission failed: ' + error);
			}
		});
		$('#gform *').fadeOut(0);
		$('#contact-box *').fadeOut(0);
		$('#gform').prepend(
			'<div class="thank-you-box"><p class="thank-you">Hi, thanks for reaching out! We will get back to you within 24 hours.</p><p class="thank-you">If your issue cannot wait, you can also reach us via our <a href="https://www.facebook.com/Orion-Import-Group-110501569627947/">Facebook Page</a> or call 0429-105-580.</p></div>'
		);
		return true;
	}
	else{
		alert('You have not entered the correct captcha code value');
		return false;
	}
});

<form name="gform" id="gform" enctype="text/plain" action="https://docs.google.com/a/blakedavies.net/forms/d/e/1FAIpQLSfHdHMJePTJ3R5JOtBrH8zdPdX74eXQ8TDFIGjgkbIbGNdpnQ/formResponse">
  <div class="inner">
	  <input name="entry.1683926249" id="entry.1683926249" placeholder="Name" required pattern="[A-Za-z' -]+" oninvalid="setCustomValidity('Please enter a valid name using letters only.')" onchange="try{setCustomValidity('')}catch(e){}" />
		<input name="entry.189066148" id="entry.189066148" placeholder="Phone" required pattern="[0-9 -]+" oninvalid="setCustomValidity('Please enter a valid phone number using numbers only.')" onchange="try{setCustomValidity('')}catch(e){}" />
		<input name="entry.429019481" id="entry.429019481" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" oninvalid="setCustomValidity('Please enter a valid email making sure to include an @ sign and the domain suffix (.com .net etc.).')" onchange="try{setCustomValidity('')}catch(e){}" />
	</div>
	<div class="inner">
		<textarea name="entry.2094840737" id="entry.2094840737" placeholder="Message" required></textarea>
		<input name="captcha" id="captcha" placeholder="CAPTCHA CODE: 5+7" required />
	</div>
  <input class="submit" name="submit" type="submit" value="Send Message" />
</form>
<script src="js/contactform.js" type="text/javascript"></script>

Answer 1

防止垃圾邮件的一种方法是蜜 jar 技术，它被证明行之有效，并为我公司的网站防止了 90% 以上的垃圾邮件。

要实现蜜 jar 技术，只需在表单中添加一个隐藏的表单字段即可。

这就是表单提交是否是垃圾邮件的原因:
真实用户看不到隐藏字段，因此他们不会提交任何值。
但是，垃圾邮件机器人仍会看到表单标记中的字段，自动填充一些内容，然后与表单的其余部分一起提交。

因此，从那里开始，所需要做的就是测试隐藏字段是否提交了值。如果是，则提交可以被视为垃圾邮件。

阅读更多关于 Honeypot technique 的信息

对评论和附加信息的回应(我还不能评论)

@user7531422，试试这样:
添加一个类到一个额外的输入元素(honeypot element)，用CSS样式来隐藏它display: none;，并让它看起来和name或phone字段一样但是改变名称属性。
大多数机器人只会读取 HTML 标记，不会注意到 CSS 规则，而且大多数机器人不会聪明到深入研究每一段代码。

在提交表单之前直接检查你的隐藏字段是否有数据(如果不为空则检查它的值)，如果有则不要发送表单。
这是一个客户端解决方案。