CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on the websites. So if you use CAPTCHA on your web site forms, this can help in stopping some bots and making life harder for other bots in accessing or using your forms.
In brief the CAPTCHA protection works by generating a random string, writing it to an image, then storing the string inside of a session or by some other method. This is then checked when the form is submitted.
The goal of this tutorial is to demonstrate how to make your own simple CAPTCHA protection using PHP and AJAX technologies.
- The AJAX HTML Page (the Front-end)
- The PHP Server Page (the Backend)
- The Ways to Make It More Secure
The front-end of this tutorial is straight forward. We are going to create a simple HTML form with a textbox for entering the security code, dynamically generated image holding this code, a button for submitting, and a DIV that we will display the CAPTCHA test result. The following example shows how you can do that. Create a new file named captcha_test.htm, and add this code to it.
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.
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 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.
The next step we will create our XmlHttpRequest object that we can use to make the requests.
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.
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.
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.
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.
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-side.
You can see how it is easy to use PHP with Ajax technologies. This is very simple CAPTCHA test you can use but I'm sure you will think how to make it more powerful, robust and secure. In conclusion I just want to suggest some several things you can do to make it more secure:
- Rotate the text randomly
- Add random spaces in between characters
- Use a TTF fonts and change the font randomly every time
- Use a random text and image size every time
- Use more advanced text distortion and colors
- Move the lines randomly
- Store the password in a random cookie