Protecting Web Forms with AJAX - Generating verification codes on the web server (
Page 4 of 4 )
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!
