Enabling CAPTCHA using Ajax

CAPTHCA or Completely Automated Public Turing test to tell Computers and Humans Apart is one of the security measures in a website that prevents bots from accessing websites and downloading files automatically and constantly. Bots that automatically download files are bane to our server and traffic as it could extract everything that we have and preventing human users to access files faster. With the help of CAPTCHA, bots will be prevented from reading the website and accessing the information altogether.

Setting up CAPTCHA in an Ajax based website is also possible. Although there are so many ways of doing it, a very light approach is very possible. Using HTML, PHP and JavaScript for Ajax, developers should be able to build an Ajax based CAPTCHA for their website.

The front end of CAPTCHA will be used with HTML. The role of this web development language is to build the box where the image will be loaded. The command for submission of word is also created using HTML. Lastly, HTML also receives the DIV command from JavaScript to display whether the challenge word entered is a success. Since HTML will be a portion of the webpage, HTML is identified by through an ID so that JavaScript could relay the information successfully.

PHP on the other hand, handles the comparison of image with the entered word. PHP also generates the random images to challenge the user.

Ajax strings all these functions altogether. The JavaScript that will be used in the transaction are placed outside HTML and PHP. As an external command, JavaScript will have the ability to control the output of HTML and PHP.

JavaScript receives the information from HTML using XMLHTTPRequest. Using this function, developers are able to provide the response in an asynchronous manner. As soon as it receives the information, it uses the same function to transfer the images to PHP. When the response from PHP is generated, JavaScript’s function POST is used so that the response will be sent back to the front end HTML. But this function alone cannot change the front end of HTML, to enable the front end to update itself. UpdatePage function should be used in JavaScript to complete the transaction.

This function is relatively easy especially the functions in JavaScript are limited to three functions. The challenge here is to provide dynamic challenge words for users.

The answer lies in the back-end language of the webpage. Of all the three languages only PHP has the power to fully function as the server side language so naturally, it is the PHP’s role to randomize the pictures so that CAPTCHA would be effective and secured.

Using these languages, developers should be able to build asynchronous CAPTCHA. Instead of changing the whole webpage to know whether or not the words are actually accepted. The best part is, you will be able to secure your website against bots. It is a little bit complicated compared to simple HTML CAPTCHA which is widely used today but the effort is worth it if you want to have a good looking interface for your users.