Simple Effective Captcha => the Honeypot

Captcha now a days are starting to become a pain in the neck.. many a times the images are so skewed up that even after multiple attempts you never get it right .. making you feel less human.
or the new maths or general knowledge based questions can get so annoying that they make you feel like a fool.. In our war against the bots we seem to have taken our site visitors for granted !!

I’ve always hated CAPTCHA and yesterday while generally loitering around sitepoint.com I came across this very interesting article on CAPTCHA and the Honeypot technique, which is so simple and unobtrusive to the user.. that you’d feel like a lemming to have been following those image based CAPTCHA techniques.

The Honeypot technique is really simple.
Create a form with regular form fields and add an additional field and disguise it with a field name something like “fname”.. We hide that extra field called fname using basic CSS.. so that regular visitors can’t see it but is seen to spam bots who will interpret it as one of the Necessary fields. You could also put in an asterisk sign to fox the bot into thinking that the fname is a mandatory field.
The next step is .. on submit simply to check if the fname field is blank, if so then do whats needed, but if the fname field contains some post data then ignore any further processing.

Here is a simple code I came up with to explain this concept

This is the form:

<form action="submit.php" method="post">
<p>Name* :
<input name="name" type="text" id="name">
</p>
<p>Email * :
<input name="email" type="text" id="email">
</p>
<p class="honey">Fname* :
<input name="fname" type="text" id="fname"> <!--  The extra field -->
</p>
<p>Phone* :
<input name="phone" type="text" id="phone">
</p>
<p> <input type="submit" name="Submit" value="Submit"></p>
</form>

This is the CSS that hides the extra field from regular site visitors

<style type="text/css">
.honey {
display:none;
}
</style>


and here is a basic PHP script that checks to see if the fname field contains any post data and shoo away bots incase it does.

if($_POST['fname']==''){
echo 'Welcome to Humanity';
}else{
echo 'Shoo away bots';
}
?>


This technique has already been documented before by Ned Batchelder and Phil Haack and they claim significant success in stopping automated comments  submissions.

Well this technique does have it draw backs.. for one screen readers, would read your additional field and the user would fill it in unless you put in a clear description explaining them not to fill in that field.. However I’m told now that the latest versions of JAWS and other screen readers ignore content that has a CSS display:none applied to it so hopefully they would ignore that field.

The other drawback is if someone is specifically targeting your site, and spends a bit of time and energy trying to see whats happening here.. they could write a custom bot that would ignore the additional field and get past it easily.

Well agreed this is not bullet proof, but at least for the majority of the time it would keep your users happy and keep the bots away.