PHP Screencast: Hidden Captcha

As I was saying in a past–not so documented–article, this is how the Hidden Captcha concept works:

Does the user have JavaScript enabled?

If yes, they’re okay — let’em comment, no annoying captcha required.

No? We’ve got a suspect. Read them their rights and serve them the ultimate “are you human?” test.

I made this 5 minute screencast to earn fame and fortune on Nettuts, but I’m also posting it here along with some textual comments. Figured I’d make it easier for you to copy/paste the whole 2 lines of JavaScript.

Here’s what you start with, the source code from this tutorial.

(Note: be sure to have the Arial font file called arial.ttf in the fonts folder–copy it from your System in there because their archive does not come with it).

This is the JavaScript/PHP I’m pasting in:

<script type="text/javascript">// <![CDATA[
  document.getElementsByName('code')[0].value = '<?php echo $string; ?>';
  document.getElementById('captcha').style.display = 'none';
// ]]></script>

Both lines of JavaScript work on elements from this chunk of HTML:

<div id="captcha">
  <img src="captcha.php" alt="" /><input type="text" name="code" /> Are you human?
</div>

The first line of JavaScript sets the correct value for the code text field.

And the second line of JavaScript sets display:none to the captcha div, thus hiding it from anyone with JavaScript enabled.

Hidden Captcha instead of Akismet?

I use the same Hidden Captcha concept on this site, where I installed a modified version of the Simple Captcha WordPress plugin. But when you try to comment you don’t see any captcha requirement, do you? Not unless you have JavaScript disabled.

Since I’ve installed Simple Captcha, the Akismet spam count remained at 0 (zero).

And this leads me to the Akismet false positives issue. Where innocent comments can sometimes incorrectly show up as spam and get lost in the thousands of real spam comments.

How Spammers can play with Akismet system and get you banned?

Lets take an example of a blogger who wrote a harsh comment on other blogger’s website. Now the other blogger will take his identity (username, email and URL) and put them into a spam script (believe me there are plenty out there) and he will set the script to send out 100’s of comments/trackbacks to other blogs. Of course, most of these blog owners who got the ’spam’ would flag these comments as spam. This would result in your credentials being incorrectly marked as spam comments by hundreds of bloggers, thus ruining your expertise to promote your site.

You can read the rest of that article on Mind Tree.

Akismet is great and all, but man… I don’t want to send innocent people to the spam box.

So this Hidden Captcha system (easily implementable on any existing captcha system as seen in the screencast) can actually allow me to disable Akismet (thus eliminating the possibility of false positives) and keep actual spam comments away.

No usability issues because of hard to read captchas–for most of the readers.

And no accessability problems, because that small percent of humans without JavaScript enabled can still comment after filling in the Captcha code.

Link to the demo–you can also check it out with JavaScript disabled, and have a look at its source code.