Protecting Web Forms with AJAX

Are you looking for a new way to protect your web forms from malicious hackers and spam bots? Then you’ve come to the right place. In this four-part article series, you’ll learn how to use Ajax to protect those forms. Keep reading to learn how to build an Ajax-based verification code mechanism that you can use on your own web site.

Introduction

With the Web being widely inundated by spam bots these days, it’s not surprising that many conscientious web developers have started creating different mechanisms aimed at protecting HTML forms against fake submissions.

Ranging from generating the so-called noisy images to including simple verification codes, there are plenty of solutions available today that can be implemented to prevent (at least partially) web forms from being hacked by a robot program.

However, with the huge proliferation of Ajax-driven applications, new approaches have emerged in the last few months which have contributed to making web forms a bit better protected against potential attacks from spam bots.

Are you interested in learning how a simple Ajax-based program can be used to increase the security of online forms? In this series of articles I’ll be demonstrating, with numerous hands-on examples, how to create different kinds of verification codes to include in any HTML form. Quite possibly the most interesting facet in developing these mechanisms will rest on the ability to generate the checking codes via Ajax, instead of using conventional HTTP requests.

As you’ll see shortly, utilizing Ajax to build a verification code generator for a selected web form will permit us to control more easily certain aspects of the application, such as when to display the codes or even what type of code to show. This includes not only the typical random digits, but a few simple mathematical operations as well.

It’s time to get rid of the preliminaries and start learning how to make web forms a bit safer with Ajax. Let’s get going!

{mospagebreak title=Developing a verification code mechanism}

Since my plan here will consist of demonstrating how to build a verification code generator with Ajax, which can be easily coupled to an existing HTML form, the first step we must be take is creating the form in question.

Thus, with that idea in mind, below I included the signature of a simple (X)HTML file. It contains a basic web form for implementing the checking code generator. Here’s how this brand new sample file looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax-based Random Code Generator System</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#formbox{

width: 380px;

text-align: right;

padding: 10px;

background: #eee;

}

#codebox{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;

}

.inputbox,textarea{

width: 300px;

border: 1px solid #999;

}

.checkingcode{

width: 50px;

border: 1px solid #999;

}

</style>

</head>

<body>

<h1>Ajax-based Random Code Generator System</h1>

<div id="formbox">

<form action="check_form.php" method="post">

<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>

<p>Last Name <input type="text" class="inputbox" title="Enter your last name" /></p>

<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>

<p>Enter your comments below:</p>

<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>

<div id="codebox"></div>

<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Enter the above four-digit verification code" /></p>

<p><input type="submit" value="Send Data"></p>

</form>

</div>

</body>

</html>


As you can see, the above (X)HTML file includes a typical HTML contact form, where users will be able to enter their first and last names, and their email addresses. Also, there are a few additional CSS styles that are useful for improving the look and feel of the web form.

As you may have noticed, there’s another input box labeled “code,” which will let users manually enter the corresponding verification code. As I said in the introduction, this code will be generated via an HTTP request triggered with Ajax. But in fact I’m getting ahead of myself, since the details of this process will be discussed in the next section.

All in all, at this point I’ve created a primitive web form that, in its current state, is pretty vulnerable to attacks from any spam robot. Thus, it’s time to make it a bit safer by means of the code checking generator mentioned previously.

Thus, to see how this Ajax-driven program will be developed, please click on the link that appears below and keep reading.

{mospagebreak title=Generating verification codes with Ajax}

In the section that you just read, I coded a simple HTML form for demonstrating how an Ajax-driven program can make it a bit safer against attacks and fake submissions. In this case, I’m going to develop a random code generator that will be coupled to the form, so each time a users tries to submit it, they will be asked to enter this checking code. So far, nothing unexpected, right?

However — and here’s where things will get really interesting — the verification code will be generated on the fly via an Ajax-based HTTP request. Therefore, to perform this task, I’m going to use the assistance of the Ajax module bundled with the jQuery library, in this way saving time and effort.

Basically, the Ajax application that will be charged with generating verification codes dynamically for the previous HTML form looks like this:

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

$(document).ready(function(){

// get verification code with Ajax

$.get(‘get_checkingcode.php’,{data:’getting code’},function(checkingcode){$(‘#codebox’).html(checkingcode);});

});

</script>


Even if you’re not familiar with the API of the jQuery library, it’s pretty easy to understand how the above script works. In simple terms, it will request with Ajax a PHP file called “get_checkingcode.php,” which will be responsible for generating a random verification code.

Then, this string will be sent back to the client, where it will be displayed within the HTML form before the form is submitted. You can see how this implements a simple mechanism that will protect the form against automated submissions. Of course, this isn’t a bullet-proof approach, and certainly can be improved. But it can be quite useful for making web forms more secure, without having to deal directly with a server-side graphic library.

Now that you hopefully grasped how verification codes will be generated via Ajax-based HTTP requests, it’s time to build the PHP file that actually sends this random string to the client.

The full details of how this PHP file will be created will be discussed in the course of the following section. Thus, click on the link below and read the next few lines.

{mospagebreak title=Generating verification codes on the web server}

In the previous section, you learned how to create a simple Ajax application which would fetch a PHP file from the web server to generate verification codes each time a user attempts to submit the web form coded previously.

Therefore, it’s time to create the PHP file. As you’ll see in a moment, it’s pretty easy to follow. Here it is:

<?php

function RandomGenerator($length=4){

$chars="ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";

if(!is_int($length)||$length<1){

$length=4;

}

$rndstr=”;

$maxvalue=strlen($chars)-1;

for($i=0;$i<$length;$i++){

$rndstr.=substr($chars,rand(0,$maxvalue),1);

}

return $rndstr;

}

session_start();

$_SESSION['checkcode']=RandomGenerator();

echo $_SESSION['checkcode'];

?>


As shown above, all that this PHP file does is generate a four-digit random string by using a function defined for that specific purpose, called “RandomGenerator.” Once this verification string has been created in the web server, it’s sent back to the client to be displayed within the web form. Not too difficult to understand, right?

Well, having demonstrated how to build a PHP file that generates the randomized verification codes, it’s time to put all the pieces together and show the full source code for this web application that lets us create a safer HTML form. So, first, here’s the client-side module:

(definition of ‘sample_form.htm’ file)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax-based Random Code Generator System</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;

}

#formbox{

width: 380px;

text-align: right;

padding: 10px;

background: #eee;

}

#codebox{

font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;

}

.inputbox,textarea{

width: 300px;

border: 1px solid #999;

}

.checkingcode{

width: 50px;

border: 1px solid #999;

}

</style>

<script language="javascript" src="jquery.js"></script>

<script language="javascript">

$(document).ready(function(){

// get verification code with Ajax

$.get(‘get_checkingcode.php’,{data:’getting code’},function(checkingcode){$(‘#codebox’).html(checkingcode);});

});

</script>

</head>

<body>

<h1>Ajax-based Random Code Generator System</h1>

<div id="formbox">

<form action="check_form.php" method="post">

<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>

<p>Last Name <input type="text" class="inputbox" title="Enter your last name" /></p>

<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>

<p>Enter your comments below:</p>

<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>

<div id="codebox"></div>

<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Enter the above four-digit verification code" /></p>

<p><input type="submit" value="Send Data"></p>

</form>

</div>

</body>

</html>


Now that I’ve listed the complete client-side code for this web application, it’s time to show the corresponding signatures of the PHP files that comprise its server-side module. These look like this:


(definition of ‘get_checkingcode.php’ file)


<?php

function RandomGenerator($length=4){

$chars="ABCDEFGHIJKLMNPQRSTUVWXYZ123456789";

if(!is_int($length)||$length<1){

$length=4;

}

$rndstr=”;

$maxvalue=strlen($chars)-1;

for($i=0;$i<$length;$i++){

$rndstr.=substr($chars,rand(0,$maxvalue),1);

}

return $rndstr;

}

session_start();

$_SESSION['checkcode']=RandomGenerator();

echo $_SESSION['checkcode'];

?>



(definition of ‘check_form.php’ file)


<?php

session_start();

if($_SESSION['checkcode']==$_POST['code']){

echo ‘Correct verification code!';

}

else{

echo ‘Incorrect verification code!';

}

?>


As you can see, the server-side module of this web application is composed of two PHP files. The first one, as I explained before, is tasked with generating the corresponding verification codes that will be displayed within the web form, before being submitted. The second one simply checks to see whether or not the code entered in the form is correct.

In each case, an indicative message will be displayed on the browser, informing the user of the result of this checking process.

Finally, to complement the previous explanation, below I included a couple of screen shots that shows how the verification codes are generated when a fictional user is filling in the web form coded before:




Now that you hopefully grasped how easy it is to use an Ajax application to create safer web forms, feel free to introduce your own improvements to all of the sample files shown in this tutorial. The experience will be really instructive, believe me.

Final thoughts

In this first installment of the series I explained how to build a simple Ajax-based program and how to build a simple code verification mechanism. These can be easily incorporated into any web form to make it more secure against attacks.

As I stated in the beginning, this isn’t a bullet-proof approach, since its has some evident vulnerabilities. However, it’s really easy to develop, and best of all, does not require the use of a server-side graphic library.

In the upcoming part, I’ll be demonstrating how to use some simple mathematical operations to implement a code verification system similar to the one discussed previously. Want to see how this mechanism will be developed? Then don’t miss the next article!

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort