Thursday, October 22, 2009

Creating a simple CAPTCHA tool

CAPTCHA or a reverse Turing test is used to stop bots or automated programs to spam or register for services such as free email services like GMail or Yahoo mail.


There are several types of CAPTCHAs being used. Following is the CAPTCHA being used by Google for it's services. This is a powerful CAPTCHA but not always human solvable. Does it frustrate users? You bet!



Like Google's CAPTCHA Hotmail/Passport's CAPTCHA is also many times not human solvable. An example is shown below.

Another example of CAPTCHA, this time from Yahoo.


The problem with most CAPTCHAs is that if they are strong enough(read unsolvable) for bots, they are then unsolvable by humans too, as various characters used are overlapped, distorted, sometimes characters get merged with their backgrounds and make them hard to decipher by humans too. Such an example of CAPTCHA I found some time back. Here it's for your viewing pleasure !


In this post I'll explain how to implement a simple yet powerful enough CAPTCHA tool. Though I am trying to explain the concept using PHP, any language/platform can be used which knows how to interpret TrueType fonts, create images dynamically and supports (HTTP) session management. This is the first version of my CAPTCHA tool and it was done as a proof of concept.

  • Create a folder on server and save TrueType fonts you want to use for the CAPTCHA tool, in this folder. Ensure PHP has read permissions for the folder/files. The more the better.
  • Define an array $captchaChars, this shall hold all the charcters used in CAPTCHA.
$captchaChars = array("a", "b", "c", "d", "e", "f",
 "g", "h", "i", "j",  "k","l", "m", "n", "o", "p",
 "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ,
"1","2", "3","4", "5", "6", "7", "8", "9", "0",
 "A", "B", "C", "D", "E","F", "G", "H", "I", "J",
 "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
"U", "V", "W", "X", "Y", "Z");
  • Define a variable to hold CAPTCHA text
    $captchaText = "";
  • Define a variable to hold number of characters in the CAPTCHA(the more the better, but there will be a performance hit)
    $numChars = 7;
  • Generate CAPTCHA text by reading characters from "$captchaChars", randomly.
for($i=0; $i < $numChars; $i++){ $captchaCharNum = rand(0, 61);
 $captchaText .= $captchaChars[$captchaCharNum];
}
  • Start web session and save CAPTCHA text for validation later.
session_start();

    $_SESSION['captcha'] = $captchaText;
    • Create an image and then add random lines in the background to confuse bots
    header("Content-type: image/jpeg");
    $im = imagecreate(155,60);
    $white = imagecolorallocate($im, rand(175,255),rand(175,255),rand(175,255));
    $black = imagecolorallocate($im, rand(0,125),rand(0,125),rand(0,125));

    $numLines = 10;

    for($i = 0; $i < $numLines; $i++){     $line_color = imagecolorallocate($im, rand(125,165),rand(0,255),rand(125,165));
     imageline ($im, rand(0,160), rand(0,125), rand(0,125), rand(0,160), $line_color);
    }
    • Choose a font randomly to create CAPTCHA text
      $randFont = rand(0, 45);
    • Finally add the CAPTCHA text to the image and send it to browser
    imagettftext($im, 20, 0, 8, 35, $black, "path_to_capctha_fonts/$randFont".".ttf", $captchaText);
    imagejpeg($im);
    imagedestroy($im);
    • Now create an HTML page with following code

    <html>
     <head>
    </head>
     <body>
     <form action="validate_user.php" method="post">
     <img src="captcha.php" />
     <input type="text" name="captcha_text" maxlength="7" title="Enter text in the image" style="font-size:8;">
     <input type="Submit" name="submit">
     </form>
     </body>
    </html>


    • <img src="captcha.php" /> is what renders the CAPTCHA on browser.
    Now we shall see how server side validation code looks like.

    session_start();
    $captcha = $_SESSION['captcha'];
    $userCaptcha = $_POST['captcha_text'];
    • The code above starts a session and reads the CAPTCHA text's value which was saved earlier in the session
    • The value entered by user in CAPTCHA validation field is read from the HTTP request
    • This CAPTCHA tool forgives users for mistaking i or I for 1, z or Z for 2, o or O for 0 etc
    $processAdvanced = false;

      if(preg_match("/\B[i|I|1|l|s|S|5|2|z|Z|o|0|O|q|9|g]\B/i", $captcha)){

       $processAdvanced = true;
      }
      • First check if there are any characters present which user can easily make mistakes in reading, if there are then replace these characters for validation.
      if($processAdvanced){
      $patterns[0] = '/[i|I|i|l]/';
      $patterns[1] = '/[s|S|5]/';
      $patterns[2] = '/[2|z|Z]/';
      $patterns[3] = '/[o|O|0]/';
      $patterns[4] = '/[q|9|g]/';

      $replacements[0] = 'i';
      $replacements[1] = 's';
      $replacements[2] = 'z';
      $replacements[3] = 'o';
      $replacements[4] = 'q';

      //Replace the chars in both $captcha and $userCaptcha
      $captcha = preg_replace($patterns, $replacements, $captcha);
      $userCaptcha = preg_replace($patterns, $replacements, $userCaptcha);
      }
      • Finally validate and report it to the user/bot that whether validation succeeded or failed
      if(preg_match("/^$captcha$/i", $userCaptcha)){
       echo "<h3 style="'color:green;background-color:ivory'">You are indeed human</h3>
      ";
      } else {
       echo "<h1 style="'color:red;background-color:ivory;font-weight:700'">Looks like either you entered text incorrectly or you are a bot</h1>";
      }
      • You can see a demo of this CAPTCHA tool here.

      Labels: , ,

      posted by Tanveer @ 5:26 PM   0 Comments

      0 Comments:

      Post a Comment

      << Home