Recipe 7.7. Using a Graphical Character String for Form Authentication

Problem

You need to make sure that bots or automated scripts are not able to abuse your web site's resources.

Solution

Distorted strings of random letters and numbers over an obscuring background of gradients, speckles, and lines (see Figure 7-6) have become an increasingly popular way to ensure that the user of a web form or other server resource is a human, rather than another computer. They even have their own acronymCaptchawhich stands for "completely automated public Turing test to tell computers and humans apart."

Figure 7-6. Hotmail uses a Captcha on its sign-up page to prevent spammers from signing up for throw-away email accounts

In the early days of modern computing. Alan Turing proposed a method for testing a computer's skill at mimicking a human. You can add a human-readable graphical character string that must be retyped correctly for a form submission to be accepted using one of many Captcha generators and validators that are available for a variety of programming languages (refer to the "See Also" section in this Recipe for links to some of them).

You can sign up for a hosted Captcha service (free for non-commercial use) at http://captchas.net by emailing the developer to request a username. You'll receive a confirmation, a secret key, and a link to code samples for implementing the service with PHP (http://captchas.net/sample/php/). When I signed up, I waited only a day for my information.

Download CaptchasDotNet.php and you're ready to go. As an example, this solution creates two filesa form for posting a hypothetical blog comment and a script for processing the commentbased on the provided samples at Captchas.net. At the top of your form page, add these lines:

 <? include("CaptchasDotNet.php"); $captchas = new CaptchasDotNet('…my user name…', '…my secret key…'); $random = $captchas->random(); $url = $captchas->url(); ?>

The first line loads all the custom functions for the Captchas.net service, and the next three lines define variables using some of those functions. The variable $captchas is based on the username and secret key I received from the developer.

The Captchas.net service creates the image and matching text value by concatenating my secret key with the value of $random, and then applying some of PHP's built-in cryptographic functions. The result is a six-character string of lowercase letters.

Your form can contain any fields you want, but it must pass the value that users type in to the text field ($typedpassword) and the value for $random as a hidden form input, like this:

 <input type="text" name="typedpassword" size="6" maxlength="6" value=""> <input type="hidden" name="random" value="<?= $random; ?>">

The value of $url is the unique path to the Captcha image created and stored on the Captchas.net server. I displayed this on my form (see Figure 7-7) with the following code:

 <img src="/books/2/2/1/html/2/<?= $url; ?>" alt="Confirmation password is loading…" width="240" height="80">

Figure 7-7. A Captcha-enabled form using the free service from Captchas.net

The script that receives the form submission also starts with a reference to the custom functions and defines the variable $captchas using your username and secret key:

 include("CaptchasDotNet.php"); $captchas = new CaptchasDotNet('…my user name…', '…my secret key…');

Then the script uses a conditional to validate the $random variable and verify $typedpassword:

 <? if(!$captchas->validate($random)) {  print"A Captcha can only be used once. The current Captcha has already been used. Try again."; } elseif (!$captchas->verify($typedpassword)) {  print"<p><b>The password you entered is not correct. Blog posting is for humans only.</b><br>\n"; } else {  print"<h3>Thank you for submitting your comment</h3>\n";  …other comment-processing code… } ?>

The first condition!$captchas->validate($random)prevents the $random variable from being used more than once. The second condition tests the text the user entered into the form against the text value of the image stored on the Captchas.net server. If the text doesn't match the value from the server, the conditional prints an error message on the page. If the random variable is valid and the password the user typed matches the image value, then the user gets a confirmation that the comment has been accepted and the script processes the comment.

Discussion

Why would a computer want to use a web site? To sign up for a free email account to send spam, of course! Or to post advertisements for cheap Viagra and low mortgage rates in a blog comment. Or to influence the results of an online poll or sweepstakes.

The computers doing the dirty work aren't the evil spammers and prankish ballot box stufferstheir human creators are. But humans have to eat and sleep, and their wrists and eyes get tired after a long day of filling out the same Hotmail new account form over and over again. Automated programs can do the work a lot faster.

Enter Captchas, which first appeared on sign-up forms for free email accounts and have since been adopted by spam-blocking services and others (see Figures 7-8 and 7-9. As inline GIFs, JPGs, or PNGs, the characters in a Captcha can be read and typed into a verification field more easily by a human than by a computer.

The common practice of describing an image in its alt attribute would defeat the purpose of the Captcha.

They also can't be read or used by blind and visually impaired visitors, or by the screen reading software they use to surf the web. For this reason, Captchas have been criticized by web site accessibility advocates. An audio Captcha provides a solution to the problem, but just a minority of the Captcha-protected sites (and software mentioned in the See Also section of this Recipe) offer this alternative.

Finally, Captchas are not impenetrable to computer-assisted "evil doers." As we saw in Recipe 5.5, devious web surfers intent on exploiting something on your site will try to find a way to do so. Spammers can (and have) already found ways to circumvent Captchas, yet they remain a viable tool for preserving online resources for legitimate uses. Consider this and the known accessibility issues when implementing Captchas on your site.

Figure 7-8. Spam Arrest challenges unknown email senders to enter the word shown in a Captcha before it will approve delivery of the message