javascript-来自网站联系表单的垃圾邮件回复绕过了“必需”和“模式”属性

我在一个收到大量垃圾邮件的网站上有一个联系表.它托管在Github上,因此我的服务器端验证/验证码方法非常有限.所有字段始终具有“ required”属性,并且我向表单字段添加了一些“ pattern”属性以及一个非常基本的安全性问题.

最初,我会收到垃圾邮件回复,其中所有字段均已填写,但名称应为随机数字,电话应为名称,电子邮件以及消息区域中的URL.

当我第一次只添加由javascript / jquery处理的安全性问题时,它似乎没有任何作用,因此我假设该机器人可以从代码中读取正确的答案？更令人担忧的是,最近在表单字段中添加了一些“模式”属性后,我开始收到垃圾邮件响应,该响应仍包含应包含名称的随机数字,现在电话和电子邮件字段不存在(不提交) /输入).

我不知道当字段与模式验证不匹配时如何提交字段,或者当两个字段仍具有’required’属性时如何将其留空.我已经亲自测试了表单,所有验证和必填字段均按预期运行,并且像以前一样接收所有字段,因此似乎垃圾邮件发送者似乎忽略了这些规则.

如果有人可以解释在这里发生了什么？同样,或者,如果有人知道有一种更好的行之有效的方式来消除垃圾邮件回复,该方式可与我拥有的表单一起使用,并且在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>

解决方法:

防止垃圾邮件的一种方法是Honeypot技术,事实证明它可以正常工作,并且可以防止我公司站点上90％以上的垃圾邮件.

要实施Honeypot技术,所需要做的就是向表单添加一个隐藏的表单字段.

这就是表单提交是否为垃圾邮件的原因：
 实际用户看不到隐藏字段,因此他们不会提交任何值.
但是,垃圾邮件漫游器仍会在表单的标记中看到该字段,并使用某些内容自动填充该字段,然后将其与表单的其余部分一起提交.

因此,从那里开始,只需测试隐藏字段是否带有值即可提交.如果是这样,则可以将提交视为垃圾邮件.

阅读有关Honeypot technique的更多信息

对评论和其他信息的回应(我目前无法评论)

@ user7531422,像这样尝试：
将一个类添加到具有CSS样式的其他输入元素(蜜罐元素)以隐藏其显示：none ;,并使它看起来与名称或电话字段相同,但更改名称属性.
大多数机器人只会读取HTML标记,不会注意到CSS规则,而且大多数机器人也不聪明,无法深入到每段代码中.

在直接提交表单之前,请先检查您的隐藏字段中是否有数据(如果不为空,请检查其值),如果是,甚至不要发送该表单.
这是一个客户端解决方案.

标签：spam-prevention,validation,html,javascript,jquery
来源： https://codeday.me/bug/20191109/2012579.html