How to Create CAPTCHA Protection using PHP and AJAX
CAPTCHA is a basic test to confirm if a user is a machine or a human. It is utilized to forestall spam misuse on the sites. So depending on if you utilize CAPTCHA on your network locale frames, this can assist in stopping some bots and making essence harder for alternate bots in entering or utilizing your frames.
In a nutshell the CAPTCHA insurance works by producing a haphazard string, composing it to a picture, then saving the string within of a session or by some different technique. This is then checked when the shape is submitted.
The objective of this excercise is to exhibit how to produce your particular basic CAPTCHA assurance utilizing PHP and AJAX mechanics.
This excercise is absolutely effortless, but in the event that you are unfamiliar with PHP and AJAX this is a stupendous put to begin. The excercise comprises of a HTML page for introducing an effortless shape that will send the information, a JavaScript record for taking care of the Ajax usefulness, and an effortless PHP page that makes the genuine observation of the what is in the words box contrasted with what express was saved in the picture.
- The AJAX HTML Page (the Front-finish)
- The JavaScript
- The PHP Server Page (the Backend)
- The Gameplans to Make It More Secure
- The AJAX HTML Page (the Front-closure)
The front-closure of this excercise is straight forward. We are determined to make a basic HTML structure with a textbox for dropping in the security code, rapidly created representation keeping this code, a bind for submitting, and a DIV that we will showcase the CAPTCHA test outcome. The emulating illustration demonstrates how you would be able to do that. Make a unique index named captcha_test.htm, and put this code in it.
<table>
<tr>
<td align=”left”>
<label for=”captcha”>Captcha</label>
</td>
<td>
<input id=”txtCaptcha” type=”text” name=”txtCaptcha” value=”” maxlength=”10″ size=”32″ />
</td>
<td>
<img id=”imgCaptcha” src=”create_image.php” />
</td>
</tr>
<tr>
<td> </td>
<td>
<input id=”btnCaptcha” type=”button” value=”Captcha Test” name=”btnCaptcha”
onclick=”getParam(document.frmCaptcha)” />
</td>
</tr>
</table><div id=”result”> </div>
</form>
After the textbox and the button we have added the result DIV. We have given it an ID so we can address it through the DOM in our JavaScript. It can easily be a SPAN or any other HTML element that can contain text. The button onclick event will start the AJAX request to the server to make the comparison.
Below is a php script that generates the CAPTCHA image and set a session that stores the security code. Create a new file named create_image.php, and add this code to it.
//Start the session so we can store what the security code actually is
session_start();//Send a generated image to the browser
create_image();
exit();function create_image()
{
//Let’s generate a totally random string using md5
$md5_hash = md5(rand(0,999));
//We don’t need a 32 character long string so we trim it down to 5
$security_code = substr($md5_hash, 15, 5);
//Set the session to store the security code
$_SESSION[“security_code”] = $security_code;
//Set the image width and height
$width = 100;
$height = 20;
//Create the image resource
$image = ImageCreate($width, $height);
//We are making three colors, white, black and gray
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);
//Make the background black
ImageFill($image, 0, 0, $black);
//Add randomly generated string in white to the image
ImageString($image, 3, 30, 3, $security_code, $white);
//Throw in some lines to make it a little bit harder for any bots to break
ImageRectangle($image,0,0,$width-1,$height-1,$grey);
imageline($image, 0, $height/2, $width, $height/2, $grey);
imageline($image, $width/2, 0, $width/2, $height, $grey);
//Tell the browser what kind of file is come in
header(“Content-Type: image/jpeg”);
//Output the newly created image in jpeg format
ImageJpeg($image);
//Free up resources
ImageDestroy($image);
}
?>
If you view create_image.php in a browser, you should see a new JPEG image every time you refresh the page. You should see the black box with some letters and numbers on it. For more details how to create images on the fly read our tutorial Dynamic Image Generation.
The last we have to do is to include the JavaScript file that we will create on the next step.
The JavaScript
The JavaScript will be placed in an external file called ajax_captcha.js. Let’s look into the JavaScript code.
The first function simply returns a browser specific XmlHttpRequest object. Unfortunately AJAX is supported slightly differently in IE than it is Safari, Opera and Mozilla-based browsers like Firefox. Microsoft Internet Explorer uses an Active X object while Mozilla and Safari use a native object.
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Mozilla, Safari …
} else if (window.ActiveXObject) {
return new ActiveXObject(“Microsoft.XMLHTTP”); //IE
} else {
//Display our error message
alert(“Your browser doesn’t support the XmlHttpRequest object.”);
}
}
The next step we will create our XmlHttpRequest object that we can use to make the requests.
var receiveReq = getXmlHttpRequestObject();
After that we create a function that will make the AJAX request. This function gets two parameters: the url to send to the server and a parameter to the url with the content of the input field.
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Set up the connection to captcha_test.html. True sets the request to asyncronous(default)
receiveReq.open(“POST”, url, true);
//Set the function that will be called when the XmlHttpRequest objects state changes
receiveReq.onreadystatechange = updatePage;//Add HTTP headers to the request
receiveReq.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
receiveReq.setRequestHeader(“Content-length”, param.length);
receiveReq.setRequestHeader(“Connection”, “close”);//Make the request
receiveReq.send(param);
}
}
At first we check if our XmlHttpRequest object is ready to make a request. If our readystate is either not started or finished then we initiate a new request. Next we open the connection to our server PHP page with the appended querystring and mark it as a “POST” request. After that we add HTTP headers to the request so that the server processes the request correctly. The next line defines the updatePage() function that will be called when we recieve the AJAX response. Finally, we actually send the request to the server.
The updatePage() function executes every time the state of the XmlHttpRequest object changes.
function updatePage() {
//Check if our response is ready
if (receiveReq.readyState == 4) {
//Set the content of the DIV element with the response text
document.getElementById(‘result’).innerHTML = receiveReq.responseText;
//Get a reference to CAPTCHA image
img = document.getElementById(‘imgCaptcha’);
//Change the image
img.src = ‘create_image.php?’ + Math.random();
}
}
At first we need to make sure our response is ready. If it is, then the content of the DIV element is filled with the response text and the CAPTCHA image is changed. One other thing you must remember you must have different names for each image. For that purpose we use the random() function.
The last function will be called every time the form is submitted. It gets the value from the text box, sets the url and passes them as a parameters to makeRequest() function.
function getParam(theForm) {
//Set the URL
var url = ‘captcha.php’;
//Set up the parameters of our AJAX call
var postStr = theForm.txtCaptcha.name + “=” + encodeURIComponent( theForm.txtCaptcha.value );
//Call the function that initiate the AJAX request
makeRequest(url, postStr);
}
That’s all. If we open our page, type the security code into the text box and click the button, our DIV element will read the CAPTCHA test result without having to refresh the page.
The PHP Server Page (the Backend)
The server-side PHP file will make the actual comparison and return the result. This is very simple PHP page that only prints the result of the CAPTCHA test. You can add needed functionality yourselves. For example, if your HTML form will contain some other fields, you can send their data using the POST method and then output the data on the screen or add it into the database for further use.
//Continue the session
session_start();//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER[“REQUEST_METHOD”] <> “POST”)
die(“You can only reach this page by posting from the html form”);//Check if the security code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST[“txtCaptcha”] == $_SESSION[“security_code”]) &&
(!empty($_REQUEST[“txtCaptcha”]) && !empty($_SESSION[“security_code”])) ) {
echo “<h1>Test successful!</h1>”;
} else {
echo “<h1>Test failed! Try again!</h1>”;
}
?>
The session_start() simply continues the session. Then it’s just a simple text matching which is done by the if statement. If the input text matches the stored text then the success message displayed, otherwise error message. If someone is trying to outwit you, then you should probably use a more secure way besides storing the security code in a session or a cookie that always has the same name. As an example you can store this data in MySQL database.
Create a new file named captcha.php, and add the code from the preceding example to it. And that’s all for the server-sideThe Approaches to Make It More Secure
You could probably see how it is simple to utilize PHP with Ajax mechanics. This is quite basic CAPTCHA test you could probably utilize but I’m certain you will think how to make it more weighty, hearty and secure. In finish I actually would like to infer some things you could probably do to make it more secure:
- Turn the words irregularly
- Join irregular spaces in the middle of elements
- Utilize a TTF fonts and update the font erratically without fail
- Utilize an erratic message and picture size inevitably
- Utilize more progressed message twisting and colors
- Move the lines haphazardly
- Store the watchword in an irregular treat.
You may also like
32 of the Best PHP Practices for Beginners
Basics Of Javascript