Main Page Content
Securing Forms - Random Image
Rated 0 (Add your rating)
Log in to add a comment
(8 comments so far)
Olav Alexander Mjelde
User since: December 20, 2004
Last login: May 26, 2006
Articles written: 1
There are several different applications for securing your forms:
When you...
- Don't want someone doubleposting
- Want to protect your pages from computerized registrations (spam)
- want to protect some pages from google or others, without
.htaccess
Considerations
There are some considerations, which actually might block people from your forms!
- People who are visually impaired will not see the image!
- People who use non-GUI browsers will not see the image!
Simple steps to help those with no GUI
Provide an alternative way of input, so that the visual-impaired can contact you. This might include options like:
- Emailing you for manual input
- Some sort of over-ride function, if they type some secret code in the querystring
There are several ways to do this, and I urge you to think about, and consider that not everyone on the www has the same advantages as you and me. Those advantages include that you and me can see images in our web-browsers.
Backend
If you are the one who wants things to be quick and simple, this is a great code-sample for your further reading. While some people might also use mySQL for a system like this, you might agree that it's not needed, after seeing the result.
Functions Used
To make a script like this, there are several functions that one needs to use. Since this script is quite simple constructed, it does not use a great deal of functions.session_start()- Starts the sessionunset()- Unsets a variableheader()- Send a raw HTTP headerimagecreatefrompng()- Create a new image from file or URLimagecolorallocate()- Allocate a color for an imageimagesx()- Returns the width of the imageimagesy()- Returns the height of the imageimagestring()- Draw a string horizontallyimagepng()- Output a PNG image to either the browser or a fileimagedestroy()- Frees any memory associated with imagesubstr()- Return part of a stringmd5()- Calculate the md5 hash of a stringtime()- Return current Unix timestamp
Generating the password, using some of the functions above
As quoted from the manual on www.php.netReturns the current time measured in the number of seconds since the Unix Epoch (January 1 1970 00:00:00 GMT).
What does this mean for us?
We want to generate a random password!
Why not use the time()?
The time() will be unique, since we all know: time passes!
However, one might think that the time() might output in a format which might be un-neccessarily hard for the user to read (due to many digits). You and me both know that when we are paying bills, we have to read the account-numbers often twice or three times, to make sure that we have written them correctly. This is however easier if the key can contain both a-z and 0-9. We all know that time is just presented in 0-9, so how do we do this?
This is why we only want a part of the time() that we will use for a key. To also make the key more readable, we wrap the time() inside md5(). The md5 will then make the key with both integers and letters. (a-z, 0-9).
For this tutorial, the key-length is set to 6 characters, which should be more than enough for securing your forms. If you want to calculate how secure your key is, the formula is:
Your key will have a pattern like: xxxxxx (6 characters).
They might be (a-z, 0-9), which gives 25 possibilities in a-z + 10 possibilities in 0-9.
That is a total of 35 possible characters in each character of the key.
35 ^ 6 = 1 838 265625 combinations for that key-length.
Also remember:
If the user inputs a wrong key, or reloads the page, the next key will be different, as it's based on the time() function. This makes the possibility for guessing a key:
1 / 1 838 265625 ~~ impossible.
Keeping the user on the inside
There are several ways of making a login script. One might use cookies, mysql, flatfiles or other ways. The most simple way of making a login-script, is to use the session variables.
While "regular" variables needs to be passed in the query-string, the session_variable does not. You simply start the session with session_start(), at the very top-most of your script.
After that is done, you set the wanted variables with $_SESSION['variable_name'] = "value";
Backend Code
Check for authentication
This first file, checks if the user is authenticated. Then (if not authenticated), it will generate an random image. If that image is generated, the input by the user must EQUAL the key that the image is based on.
<?php
/* Session must always start at the very top of the php file! */
session_start();
if (isset($submit)) { // if user submitted the form
if ($submit == "logout") { // if user wants to logout
unset($_SESSION['key']); // unset the key
}
}
// if the key is wrong, or not excistant
if ($_SESSION['key'] != $_POST['key'] || (!($_SESSION['key']))) {
$_SESSION['key'] = substr(md5(time()), 0, 6); // make a key
/* Make a form for inputing the key*/
echo "
<form action=\"\" method=\"post\">
<img src=\"img.php\" />
<input type=\"text\" name=\"key\" />
<input type=\"submit\" name=\"submit\" value=\"submit\" />
</form>";
}
else { // if key is set and input is correct
// process the page
echo "
<form action=\"\" method=\"post\">
Access OK
<input type=\"submit\" name=\"submit\" value=\"logout\" />
</form>";
}
?>
The image generator (img.php)
The image-generator simply applies a string (from the session variable 'key') on to an image, which in this script has to be/images/bg.png
<?php
// once again, start the session at the very top!
session_start();
/* if there is a key */
if ($_SESSION['key']) {
/* define that the browser should treat
the output of this file as an image */
header("Content-type: image/png");
// set the string to the key
$string = $_SESSION['key'];
// create an temporary image from a PNG file
$im = imagecreatefrompng("images/bg.png");
// get a color from the image (in this case, yellow)
$orange = imagecolorallocate($im, 220, 210, 60);
/* Now we need to get widh and height of the image, so that we can center the
key on the image, so that it does not go outside of the borders or look strange */
$px = (imagesx($im) - 7.5 * strlen($string)) / 2;
$h = (imagesy($im) - 7.5) / 2;
// here we write the key (the string) on the image
imagestring($im, 3, $px, $h, $string, $orange);
// now create the final image
imagepng($im);
// to free up results, we need to destroy the temporary image.
imagedestroy($im);
}
?>
Improvements that can be made
There are several improvements that can be made, like the ones mentioned above.The most important one of them all, is the one about the visual impaired, as they will not be able to view an image.
