A CAPTCHA Example

* generateSecret
* Generate a random string $len chars long and set it to $this->secret
*
* @param string $len Length of string to generate (default 6)
*
* @return mixed False if $len is not a number, otherwise the secret string
*/
function generateSecret($len=6)
{
if (!is_numeric($len)) {
return false;
}

// Get a list of all the possible chars to use
$allChars = array_merge(range('a', 'z'), range('0', '9'));

// Which characters do we want to exclude because they are too easy
// to mistake for other chars
$bannedChars = array (
'o', 'O', '0',
'i', 'l', '1', 'I',
'g', '9',
'5', 's',
);

// Work out our secret

$allowedChars = array_diff($allChars, $bannedChars);
$secretChars = array_rand($allowedChars, $len);
$secret = '';
foreach ($secretChars as $key) {
$secret .= $allowedChars[$key];
}

return $secret;
}

$_SESSION['captcha'] = generateSecret();
$_SESSION['captchaLoads'] = 0;

This PHP script will dynamically generate our image for us and also increment a counter in the session. Why keep a counter? Well, without a counter it would be easy to work out the code once and then submit it with different details but the same code over and over again.

By checking to make sure this counter isn't over 1 (assuming we set it to 0 when we generate the secret) when we generate the image, we can be sure that this type of attack can't happen.

if ($_SESSION['captchaLoads'] > 1) {
return '';
} else {
// Generate our captcha image
}

We also append a random string or code to the image url as part of a get string. Your script can easily ignore this but by adding it we can avoid the problem where the web browser might cache the captcha image.

The last thing to take into account is that you don't really want the web browser to autocomplete on the captcha field so we need to disable autocompletion for that field.

Your normal input field would look like

<input type="text" name="captcha" id="captcha" value="" />

We can disable autocomplete easily by adding the autocomplete=”off” property

<input type=”text” name=”captcha” id=”captcha” value=”” autocomplete="off" />

This method however causes the HTML to not validate completely since autocomplete is a non w3c approved property. To get around this we can disable it with javascript.

<script type="text/javascript">
window.onload = function()
{
	f = document.getElementById('captcha');
	if (f) {
		f.setAttribute("autocomplete","off");
	}
}
</script>