javascript - Phản hồi spam từ biểu mẫu liên hệ trên website bỏ qua các thuộc tính 'required' và 'pattern'

Tôi có một biểu mẫu liên hệ trên một trang web đã nhận được rất nhiều thư rác. Nó được lưu trữ trên Github nên các phương pháp xác thực phía máy chủ/captcha của tôi khá hạn chế. Tất cả các trường luôn có thuộc tính 'required' và tôi đã thêm một số thuộc tính 'pattern' vào trường biểu mẫu và một câu hỏi bảo mật rất cơ bản.

Ban đầu, tôi sẽ nhận được các phản hồi spam với tất cả các trường được điền đầy đủ nhưng các con số ngẫu nhiên xuất hiện ở nơi nên là tên, một tên xuất hiện ở nơi số điện thoại nên có, một email và các URL trong khu vực tin nhắn.

Khi tôi lần đầu thêm chỉ câu hỏi bảo mật được xử lý bởi javascript/jquery, dường như nó không có tác dụng nên tôi đoán rằng bot có thể đọc câu trả lời đúng từ mã?? Điều đáng lo ngại hơn là sau khi gần đây thêm một số thuộc tính 'pattern' vào các trường biểu mẫu, tôi đã bắt đầu nhận được các phản hồi spam vẫn chứa các số ngẫu nhiên nơi tên nên có, và bây giờ trường điện thoại và email không tồn tại (không được gửi/nhập).

Tôi không hiểu làm sao mà trường có thể được gửi đi khi nó không khớp với xác thực mẫu, hoặc làm sao hai trường có thể để trống khi chúng vẫn có thuộc tính 'bắt buộc'. Tôi đã tự mình thử nghiệm biểu mẫu và tất cả các xác thực và các trường bắt buộc đều hoạt động như mong đợi và tất cả các trường đều được nhận giống như trước đây, vì vậy chỉ có kẻ gửi thư rác có vẻ như bỏ qua các quy tắc này.

Nếu ai đó có thể giải thích điều gì có thể đang xảy ra/đã xảy ra ở đây thì xin vui lòng?? Ngoài ra/hoặc nếu ai đó biết một cách tốt hơn và đã được chứng minh để loại bỏ các phản hồi spam mà hoạt động với biểu mẫu tôi có và trong giới hạn việc lưu trữ trang web trên Github thì sẽ RẤT được đánh giá cao!!

Trang web được đề cập là http://orionimportgroup.com/ nếu bạn muốn xem biểu mẫu trong môi trường trực tiếp.

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>

Câu trả lời #1

Một cách để ngăn chặn thư rác là kỹ thuật Honeypot, kỹ thuật này đã được chứng minh hiệu quả và đã ngăn chặn hơn 90% thư rác cho trang web của công ty tôi.

Để triển khai kỹ thuật Honeypot, tất cả những gì cần làm là thêm một trường biểu mẫu ẩn vào biểu mẫu.

Và đó là cách nhận biết xem việc gửi biểu mẫu có phải là spam hay không:
Người dùng thực sẽ không nhìn thấy trường ẩn nên họ sẽ không gửi nó với bất kỳ giá trị nào.
Bot spam, tuy nhiên, vẫn sẽ thấy trường này trong mã của biểu mẫu, tự động điền gì đó vào và gửi cùng với phần còn lại của biểu mẫu.

Vì vậy từ đó tất cả những gì cần làm là kiểm tra xem trường ẩn có được gửi kèm giá trị hay không. Nếu có, việc gửi này có thể bị xem là spam.

Đọc thêm về kỹ thuật Honeypot

Phản hồi các bình luận và thông tin bổ sung (Tôi chưa thể bình luận)

@user7531422, hãy thử như sau:
Thêm một lớp vào một phần tử input bổ sung (phần tử bẫy mật ong) với kiểu CSS để ẩn nó display: none;, và làm cho nó trông giống như trường tên hoặc điện thoại nhưng thay đổi thuộc tính name.
hầu hết các bot sẽ chỉ đọc mã HTML và sẽ không để ý đến các quy tắc CSS, và hầu hết các bot không đủ thông minh để khám phá mọi đoạn mã.

Trước khi gửi biểu mẫu, hãy kiểm tra trực tiếp xem trường ẩn của bạn có dữ liệu không (Kiểm tra giá trị của nó nếu không trống), nếu có thì đừng gửi biểu mẫu.
Đây là một giải pháp phía client.