If a part of your life is to be a web developer and you did some work with web contact forms or something similar, you probably noticed how eager to get in touch can be those automated spambots. And blocking those spambots can be a lot of fun.
In some of my personal projects I like to go along and do a bare minimum about preventing spam bots from submitting web forms. So just to see when they evolve and get around the current challenge.
Last time I just added a simple calculation challenge to the contact form. A field where users had to calculate “1+1” and write result in a form input to confirm they are human. And for my surprise I had peace from spam for a couple of years.
Well recently I noticed that some spam bots were upgraded and that some new spam messages did come through. And I started thinking what is the bare minimum that I can do to prevent this. Well reCAPTCHA and similar solutions are just not fun, because they solve the problem to efficiently. Something more primitive to mock those bots would be more fun. So because all of those automated spam bots are not executing website scripts, or are just too eager to get in touch that they can’t wait more than a few milliseconds before submitting a form, they are very different from normal users.
So I just decided to add some javascript script that would wait for a website to load, wait for a second or two, and automatically fill a form hidden field with a predefined text which would be required for validating form submission on the server side. Nothing fancy. Far from secure and robust solution. But just enough to test if those bots will sometime in the future be able to overcome such simple obstacle and become more similar to normal users.
The client side solution looked like this:
<!-- Spambots prevention script -->
<script type="text/javascript">
// Wait for website "onload" event
window.addEventListener('load', function() {
// Wait for 2 seconds
setTimeout(function() {
// Get the form element
const form = document.getElementById('contactform');
// Create a new hidden input element
var tokenInput = document.createElement('input');
tokenInput.type = 'hidden';
tokenInput.name = 'validate_token';
tokenInput.value = 'sRe3Y4zeR5zDWZEUwpf9S8F';
// Add the new input element to the form
form.appendChild(tokenInput);
}, 2000)
});
</script>And of course on the server side we must verify that submit request has input ‘validate_token’ with text value ‘sRe3Y4zeR5zDWZEUwpf9S8F’.
And just as a note … as probably we all know … this is not a good production ready spam prevention. If your form gets intentionally targeted than this is no obstacle at all. For a more robust solution you should be thinking about generating some pictures on the server side, that are user session based, and then prompt users based on that … like reCAPTCHA do. Or something similar. Or, even better, just implement reCAPTCHA or some similar already made solution.
