Adding a Picture Captcha to your register Page

[UKBusinessLive]

Seen these on some forums and looks a good idea to share it here with you guys, its easy to program and you can add your own pictures, use it along side your existing captcha setup, any further ideas on its improvement, welcomed.

Pic-Capture



Pic-Capture is a photo CAPTCHA system whereby a website visitor has to identify a picture to proceed. A human can identify a picture, a spambot cannot.

The web is awash with spambots that attack contact forms, guestbooks, forums etc. Up until now, the main line of defence against them was the CAPTCHA. A CAPTCHA is a test to tell humans apart from computers (spambots in this case) that relies on the user entering a string of characters presented to them in an image. This worked well for a while until the bots began to overcome them by reading them with OCR (optical character recognition) programs. Another problem with the traditional CAPTCHA is that they are sometimes difficult to read. The advantage of the Pic-Capture system is that a computer cannot tell what a picture is of but a human can clearly see what it is.

Using this system means that spam on your site will be drastically reduced, with the minimum inconvenience to genuine users.

This site demonstrates some photo CAPTCHA ideas and shows you how to implement them on your website. The code for this system is written in PHP and that is what is shown on this site but you could write a similar system in other languages. Its up to you.

To make your own photo CAPTCHA like the Picture above, put this HTML code on your Register page:...

<table border="0">
<tr><td colspan="3">Security test.  Please identify the pictures:</td></tr>
<tr><td><img src="pic-capture_1.jpg" alt=""></td><td><img src="pic-capture_2.jpg" alt=""></td><td><img src="pic-capture_3.jpg" alt=""></td></tr>
<tr><td>
<select name="pic-capture_selected[1]">
<option value="">Click to identify</option>
<option>Apple</option>
<option>Cat</option>
<option>Clock</option>
<option>Dog</option>
<option>Flower</option>
<option>Fork</option>
<option>Hammer</option>
<option>Key</option>
<option>Ship</option>
<option>Tree</option>
</select></td><td>

<select name="pic-capture_selected[2]">
<option value="">Click to identify</option>
<option>Apple</option>
<option>Cat</option>
<option>Clock</option>
<option>Dog</option>
<option>Flower</option>
<option>Fork</option>
<option>Hammer</option>
<option>Key</option>
<option>Ship</option>
<option>Tree</option>
</select></td><td>

<select name="pic-capture_selected[3]">
<option value="">Click to identify</option>
<option>Apple</option>
<option>Cat</option>
<option>Clock</option>
<option>Dog</option>
<option>Flower</option>
<option>Fork</option>
<option>Hammer</option>
<option>Key</option>
<option>Ship</option>
<option>Tree</option>
</select></td></tr></table>

Put this code in the PHP script that handles your registration form:

PHP Code:

<?php

if(!isset($_REQUEST['pic-capture_selected'])){exit;}

$pic-capture[1] = "Apple";
$pic-capture[2] = "Flower";
$pic-capture[3] = "Fork";

if($_REQUEST['pic-capture_selected'] !== $pic-capture){print "You have failed to identify the pictures correctly.  Please try again.";  exit;}

?>

You will need a photo of the 3 items shown in the picture above download them from google and size them all the correct size for your forum

In the code above, the input has to match exactly the identity of your pictures AND the order of the pictures. Call each one like this pic-capture_1.jpg,pic-capture_2.jpg etc..

Some points.

The drop-down options giving the potential solutions to the identity of the pictures contain ten possible solutions. You can make as many options here as you wish but you have to balance bamboozling the bots with inconveniencing the visitor.

If you make the lists too long, it could be counter productive. You can see that the lists are all the same but they don't need to be. You can put anything you like in there so long as the correct solution is included for the picture in question. Try not to put conflicting options in the list. You can see from the list that I have made, that the solution is quite obvious. If you were to put "animal" and "dog" (for example) in the same list, this would be confusing.

There are ten selection options above for each picture. This means that the chances of guessing the correct solution, if a bot were to try this (debatable?) would be 1,000:1 (10 x 10 x 10).

You can lengthen the odds by adding more pictures or more selection options. Adding more pictures would be the best way to lengthen the odds. Showing four pictures with ten options for each makes the odds 10,000:1 (10 to the power of 4: 10 x 10 x 10 x 10) for guessing the correct solution.

Having say, 15 solutions for four pictures would give odds of 50,625:1. Eight pictures with ten options each gives odds of 100,000,000 (one hundred million):1!

You are strongly urged to customize your photo CAPTCHA system. If everyone uses the same pictures with the same solutions then it wouldn't take long for spammers to take advantage of this

So there you have it a little something to ponder on this weekend

enjoy



--------------- Added [DATE]1225618928[/DATE] at [TIME]1225618928[/TIME] ---------------

Single Picture Captcha

A different type of Pic-Captcha system is the use of one or more pictures where the visitor types an answer to identify a picture and is not given a list to choose from.

The advantage of this is that a bot is not presented with the solution somewhere in a list (although it would have to be a very persistent bot that would make thousands (or millions) of attempts to get into each site it visits). The disadvantage of this method is that it is more work for the visitor and handling the input is trickier because you are relying on the user to spell the solution correctly or give it in a way that you expect.



To make your own Pic-Captcha photo CAPTCHA like the picture above, put this HTML code on your form:

<table>
<tr><td>Security test.  Please identify the picture:</td></tr>
<tr><td><img src="Pic-captcha_4.jpg" alt=""></td></tr>
<tr><td><input type="text" name="Pic-Captcha_answer"></td></tr>
</table>

Put this code in the PHP script that handles your form:

PHP Code:

<?php

if(!isset($_REQUEST['Pic-captcha_answer']) || strlen($_REQUEST['Pic-captcha_answer']) > 15){exit;}

$Pic-captcha_solutions = array('bicycle','bike');

foreach($Pic-captcha_solutions as $value)
{

if(stristr($_REQUEST['Pic-captcha_answer'],$value)){$set = 1; break;}

}

if(!$set){print "You have failed to identify the picture correctly.  Please try again.";  exit;}


?>

In the code above, the line shown below limits the length of the input to 15 characters, this is to stop bots throwing dictionaries at it:

PHP Code:

strlen($_REQUEST['Pic-captcha_answer']) > 15 


The array shown below contains the values that you check against the input:

PHP Code:

$Pic-captcha_solutions = array('bicycle','bike'); 


If any of these values appear anywhere in the input, then the answer is correct. So "bike" would be a correct answer and "it's a bike!" would also be correct. You have to be mindful when using this version of Pic-captcha that you could get various answers that would be correct.

Instead of asking a visitor to identify a picture, you could ask them a question about a picture. You could have a picture of a man laughing, and ask "what is this man doing?". Use your imagination!

Things to consider. Random display of pictures. Limit number of attempts. Showing larger pictures for visually impaired people.

This one is small enough to place on individual pages, like the contact us.

Enjoy