Using Simple Checksums for Web Form Verification with Ajax

As you know, Ajax is a technology that can be used to perform all sorts of clever tasks; this includes building web forms that are less vulnerable to attacks from malicious web bots. Indeed, it’s pretty simple to develop certain mechanisms that permit the dynamic generation of verification codes via Ajax, which must be entered manually by a user before submitting an HTML form. This is the second part of a four-part series that shows you how to make your web forms safer with Ajax.

Introduction

Actually, building a web form checking system like this can be an instructive experience, particularly for those web developers whom need to code safer online forms without using a server-side graphic library to generate "noisy images" on the fly.

So, if you’re interested in learning how to use Ajax to construct more secure web forms, then you should take a look at this series of articles. It will provide you with an approachable guide to utilizing Ajax to create different types of verification codes, which can be incorporated into any existing HTML form with minor hassles.

Returning to the subject discussed in the previous article, you’ll recall that I used a hands-on approach to explain how to use the functionality of Ajax to build a simple code verification system. This system could be attached to any web form to protect it against automated submissions.

This basic Ajax application was capable of generating different random strings each time a user proceeded to submit a sample online form. This same concept can be easily extended, however, for creating different types of verification codes, not just randomized values.

Keeping this idea in mind, in the next few lines I’m going to explain how to build an Ajax-based program which will be able to display, in a predefined area within a web form, a simple mathematical sum instead of a the typical random string. Logically, users will have to enter the correct result of this operation before submitting the online form, in this way implementing an alternative security method.

Developing this Ajax application will be an educational and fun experience, so let’s get rid of the preliminaries and get started!

{mospagebreak title=Review: code verification system with Ajax}

Before we develop this new application, I will show you the complete source code of the example built in the preceding article. As I mentioned, it dynamically generated a few random values each time a user attempted to submit a contact web form.

The source files that comprised this application looked like this:

(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>



(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’ll possibly recall, the three files shown above are all the source code required to get this web form protection mechanism working correctly. In this  case, the first file is charged with displaying the sample web form that incorporates this protective system, and is also tasked with fetching, via Ajax, the PHP file that actually generates the corresponding random values.

On the server side, there’s one PHP file that echoes to the browser the random strings, while another one simple checks to see if the user entered the correct challenge value or not. Simple to code and read, isn’t it?

So far, so good. At this point, you’re hopefully familiar with the way that the previous Ajax application generates random codes for protecting a targeted web form. Thus, it’s time to see how the same logic can be applied to displaying elemental mathematical sums as challenge strings.

Curious about how this will be achieved? Then click on the link below and read the following section.

{mospagebreak title=Displaying basic mathematical sums as challenge strings}

Another approach that can be used to protect a targeted web form is based upon displaying elemental sums as challenge strings. Of course, in this case, a user must enter the correct result of this mathematical operation before submitting the form, which can be an interesting variation of the example that I showed you in the previous section.

Fortunately, to implement this alternative security mechanism with a specific HTML form, most of the source files already created will remain practically the same. However, it’s necessary to redefine the “get_checkingcode.php” file coded earlier, since it will now be responsible for dynamically displaying the basic sums.

So, first here’s the file that renders the sample web form, and also retrieves these challenge mathematical operations from the web server:


(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 Sums Generator</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 Sums Generator</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="Sum the above digits and enter the result" /></p>

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

</form>

</div>

</body>

</html>


Since this file hasn’t been modified, I won’t spend time explaining how it works. Instead, I’d like you to pay attention to the following one, which is charged with displaying different sums on the browser that must be correctly calculated by users before submitting the web form. Here is its short signature:


<?php

session_start();

$valuea=rand(1,10);

$valueb=rand(1,10);

$_SESSION['checkcode']=$valuea+$valueb;

echo $valuea.’+’.$valueb;

?>


That was extremely simple to code, wasn’t it? As you can see, the above PHP file dynamically generates several mathematical sums, whose results are stored on a session variable to be checked later on. However, the operation itself is sent to the client as a challenge string, meaning that a user will have to enter its correct result before submitting the online form.

At this point, you’ll surely have grasped the logic that stands behind this simple protection mechanism. The best way to understand how this Ajax application really works, however, is by showing its complete source code, including the modifications that you saw before.

Thus, this is precisely what I’m going to do in the following section. So, please jump forward and read the next few lines.

{mospagebreak title=The Ajax application’s full source code}

If you’re like me, you want to study the full source code of the web form protecting mechanism developed in the previous section. Thus, below I listed the signature of its source file, so you can analyze the files in detail, and understand how they link with each other. Here they are:


(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 Sums Generator</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 Sums Generator</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="Sum the above digits and enter the result" /></p>

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

</form>

</div>

</body>

</html>



(definition of ‘get_checkingcode.php’ file)


<?php

session_start();

$valuea=rand(1,10);

$valueb=rand(1,10);

$_SESSION['checkcode']=$valuea+$valueb;

echo $valuea.’+’.$valueb;

?>



(definition of ‘check_form.php’ file)


<?php

session_start();

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

echo ‘Correct verification code!';

}

else{

echo ‘Incorrect verification code!';

}

?>


At this point, you have at your disposal the complete source code of this Ajax-based application, which implements a simple mechanism to make web forms a bit more secure against attacks and bogus submissions. In addition, below I included a couple of complementary images that will help you see more clearly how several basic sums are displayed within the previous online form before submission:




Indeed, the above images show quite accurately the way that these elemental mathematical operations are displayed on screen to protect a targeted online form. Of course, using this approach doesn’t imply that your web forms will be completely protected, but it does help to make them a bit safer.

Final thoughts

In this second chapter of the series, I walked you through developing an Ajax-based mechanism that can protect web forms against automated submissions. In this case, users will be asked to enter the correct result of an elemental sum before submitting the form, which is an interesting alternative to using random strings.

In the forthcoming part, I’ll show how to develop a similar Ajax-driven program that will prompt users to multiply two values when filling in an HTML form. However, to learn how this application will be created, you will have to read the next article!

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

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort