JavaScript Captcha

2 years ago

Captcha's are considered a necessary evil against the ever increasing and clever comment spam which is plaguing our websites and blogs on a daily basis.

Askimet, a provider of a very popular anti comment spam plug-in for WordPress, have released statistics that show 85.5% of comments between the end of 2005 and today, where spam. So only 14.5% are actual comments by actual users... this is a hugely worrying amount.

Most Captcha's are designed so that humans must do something that the computer cannot such as enter the characters shown in the an image, click on the cats or solve a simple equation. All of these require the human to do something and this can be bad from an accessibility point of view, as many have demonstrated previously.

Example of poor captcha design

I suggest a new method which doesn't require the user to do anything and banks on the computer not doing anything either... confused? In order for my new method to work, I must assume the following:

Most users will have JavaScript enabled on their browser
Users will take some time to read the post and provide a comment
Comment spam scripts do not support javascript

Implementing the new captcha method is rather simple. First you must enter a hidden field into your comment form.

<input type="hidden" name="antiSpam" id="antiSpam" value="Please do not alter" />

Users will not be able to see this field as will thus, not edit it's default value. Spam scripts may submit its default value, not submit it or add some random text to it. We must now add some JavaScript to make the magic happen.

var antiSpam = function() {
	if (document.getElementById("antiSpam")) {
		a = document.getElementById("antiSpam");
		if (isNaN(a.value) == true) {
			a.value = 0;
		} else {
			a.value = parseInt(a.value) + 1;
		}
	}
	setTimeout("antiSpam()", 1000);
}

antiSpam();

What this little nugget of JavaScript crudely does is update the hidden form field with the number of seconds that has elapsed since the page was loaded. When the user has finished reading the post and writing a comment, they will submit the form with the new value in the antiSpam field. What happens next is totally up to you, however on my server, I will be doing the following IF statement.

If AntiSpam = An Integer
	If AntiSpam >= 10 Seconds
		Comment = Approved
	Else
		Comment = Spam
	End
Else
	Comment = Spam
End

This finds out if the default value has been turned into a number by the JavaScript function and if it has, see if a certain number of seconds has elapsed. All approved spam will be automatically shown to the public while comments marked as possible spam are held in a pending que which I will review occasionally in-case some comments sneaked through.

As an overview, here are the pros and cons to this approach.

Pros

Doesn't require the user to do anything javascript runs transparently in the background,
The script is written in such a way that the DOM doesn't have to be available straight away and keeps trying until it is,
Most non-attack based comment spam scripts do not support JavaScript and will submit incorrect information,
Any scripts that do support JavaScript will submit the form straight away or within a couple of seconds of the page loading,
All comments marked as possible spam will still be stored for later review.

Cons

Requires that the user's browser supports JavaScript and that it is enabled,
Will not protect the site from targeted attacks.

With these pros and cons in mind a have decided that I will be implementing the JavaScript Captcha on this blog within the next few days.

Updated on 1 August 2008

I have updated the JavaScript function to fix a bug when the form was submitted but not accepted due to an error. If the user forgot to enter a form item, the antiSpam value would reset, this has been fixed. Also, the function now doesn't require any parameters.

Previous Comments

Poppy Friday 29 August 2008 12:41 PM
Useful stuff, nice explanation!

The scheduled blogging idea is a good one also, I wish I could manage it :(
Sean Carpenter Friday 29 August 2008 3:13 PM
Phil Haack came up with a similar approach utilizing JavaScript a while back: http://haacked.com/archive/2006/09/26/Lightweight_Invisible_CAPTCHA_Validator_Control.aspx
Stephen Hill Friday 29 August 2008 4:00 PM
Thanks Dean.

Although it does a similar thing, it doesn't look anywhere as near lightweight as the method I have outlined.

My method is also server language independent.

But cheers for the link, it was a good read.

Stephen
Enrico Thursday 04 September 2008 8:05 PM
Ok, this is what i was looking for.
I will probably start to use this method in the new website i'm building.
I will tell you something if you need to know my results...
Stephen Hill Friday 14 November 2008 4:19 PM
@Enrico:

Glad you want to use this on your new site.

I would be interested to see it implemented.

Cheers
Stephen
santosh Tuesday 23 December 2008 11:15 AM
Cool!
AAA Wednesday 14 January 2009 10:22 AM
A
fgfg Tuesday 28 April 2009 3:07 PM
gfgf
captachaseeker Tuesday 21 July 2009 2:17 PM
Hi,

I like the idea of fooling the spam engines and not hasseling the user.

Thanks for sharing
Ed
captachaseeker Tuesday 21 July 2009 2:20 PM
Didn't see the captcha on this blog....you may as well show your brainchild here and then!
captachaseeker Wednesday 22 July 2009 12:35 PM
Sorry - didn't mean to respond again. Just refreshed the page.
Website Design Tuesday 13 October 2009 12:49 PM
thanks for great post
vladb Wednesday 28 October 2009 11:39 PM
You posted this solution over a year ago,.. checked your page source and doesn't appear like you are using it on your own blog. Why?
Web Directory Saturday 31 October 2009 4:17 AM
Great Share
Not A Fan Thursday 26 November 2009 6:49 AM
A hidden input can be changed (use something like FireBug). What is to stop the spam software from just changing the value of the hidden input?
Stephen Hill Friday 27 November 2009 6:12 PM
ROFL!

I've not really been on my blog for nearly a year now - so I guess I need to tidy up a few comments.

I am using the described Captcha on my blog - check the source code - however it doesn't stop losers from spamming.

Your right, the input value could be changed and spam software could change the value but it's not meant to be a bullet proof system - just to stop the random spam bots.

Lots of new post coming soon :)

Cheers
Stephen
Cannuck Sunday 07 February 2010 4:01 AM
I like this idea a lot. I've tried to implement active Captchas (ones that ask you to do something) with very little success. Besides, they are sort of annoying, although necessary these days. I have put it on a trial page of my website and so far it seems to be working.

Thanks for sharing - these discussions are great.
Cannuck Sunday 07 February 2010 4:02 AM
I like this idea a lot. I've tried to implement active Captchas (ones that ask you to do something) with very little success. Besides, they are sort of annoying, although necessary these days. I have put it on a trial page of my website and so far it seems to be working.

Thanks for sharing - these discussions are great.
sdf Tuesday 16 February 2010 1:41 PM
sdf
dsg Monday 19 April 2010 10:04 PM
dfh
James Wednesday 28 April 2010 2:18 PM
Hey, nice post.

I've done something similar in the past. A way of avoiding JavaScript would be to load the form and set a timestamp in a hidden field, and also maybe multiply it by a secret number like "2.834" and then even encode it if you want, just so the bot can't guess that it's a timestamp. Also include a "honeypot" field called "email_address" or something similar. So your form would look like this;

<input type="hidden" name="requirement" value="3606162539.564" />
<input type="text" class="hide" name="email_address" value="" />

Note: put the following in a CSS file...
.hide{ display: none; }

Then, when you submit the form check whether at least 10 seconds have passed from the current timestamp to the submitted timestamp (after decoding it and dividing it by 2.834 etc etc). You could also check whether your "honeypot" email_address field was still blank.
Ravi Friday 07 May 2010 11:09 AM
Very Good Captcha

Visit www.slpmi.com
xxx Saturday 19 June 2010 2:58 PM
xxx
Nandini Bhatia Friday 25 June 2010 6:07 AM
This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. You've got a Idea here that's not too flashy, but makes a statement as big as what you are saying. Great job, indeed.
saxasx Tuesday 13 July 2010 11:53 AM
sxasxasx
gfhgh Thursday 15 July 2010 11:33 AM
gfhh
Derek Dickson Monday 26 July 2010 4:36 PM
I tried getting the "Anti Spam JavaScript at the top of this page to work and had problems.

I there any one that can show me a finished page with this incorporated

Thank you in advance

Derek
Derek Dickson Monday 26 July 2010 4:36 PM
I tried getting the "Anti Spam JavaScript at the top of this page to work and had problems.

I there any one that can show me a finished page with this incorporated

Thank you in advance

Derek
KevC Sunday 08 August 2010 3:41 AM
Another important item I forgot to mention, is that you can easily offload the client-side timer altogether. Your server knows when the form was presented to the user. The server also knows when it has been submit. These are easy to track and incorporate into an anti-spam system and should be done in order to get away from Client-Side methods that are inherently doomed.