Using Division Equations to Make Web Forms Safer with Ajax

From a web developer’s point of view, building a mechanism that permits you to protect online forms against attacks by spam bots, malicious automated submissions, and so forth, can be challenging. Developing such an application often requires using a server-side graphic library to generate the so-called noisy images. However, it’s possible to quickly create a similar mechanism with Ajax, without having to work directly with images generated in the web server. This is the fourth part of a four-part series that explains how to do just that.

Introduction

Therefore, if you’re interested in learning how to build a basic Ajax-driven program that makes your web forms a bit more secure, then in this group of articles you’ll have at your disposal a comprehensive guide on how to achieve this with minor efforts. Additionally, you’ll learn how to provide the program in question with the capacity for generating different types of mathematical operations in the form of challenge strings.

And speaking of mathematical operations, you’ll probably recall that during the previous article of the series, I demonstrated how to develop a simple Ajax-based system that could display multiplication equations within a targeted online form. 

In this particular case, before submitting the online form, users were asked to enter the correct result of this operation, which was properly checked in the web server at a later time. Of course, as you may guess, this approach has some disadvantages, since those dynamic operations are embedded into the web form as plain text, which can be pretty easy to digest for some web bots. However, this protecting mechanism is extremely simple to implement, and it can be also used when working with online forms that don’t collect critical data.

In this fourth part of the series, I’m going to teach you how to adapt the Ajax application developed in the previous article, so it can display division equations as challenge strings into a selected online form.

Thus, with the preliminaries out of our way, it’s time to learn how to create the aforementioned Ajax program in a few simple steps. Let’s begin now!

{mospagebreak title=Review: challenging users with multiplication}

In case you haven’t had the chance to read the preceding article, below I included the complete source code of the Ajax-based application built in that tutorial. The application is capable of displaying a succession of multiplication equations within a targeted web form, whose results must be entered manually by users before submitting the form in question.

Here are all of the source files that comprise this Ajax-driven program:


(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 challenge strings 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 challenge strings 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="Multiply 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.’ x ‘.$valueb;

?>



(definition of ‘check_form.php’ file)


<?php

session_start();

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

echo ‘Correct verification code!';

}

else{

echo ‘Incorrect verification code!';

}

?>


As I mentioned before, if you test the previous Ajax program in your own machine, you’ll see that each time the previous sample HTML form is displayed on screen, it will include a challenge multiplication equation, which must be correctly calculated prior to submitting it. Indeed, this approach can be an interesting alternative to displaying typical random values, and as you saw for yourself, it’s quite simple to code as well.

Due to its intrinsic versatility, the application can be easily modified to work with different mathematical operations. This process would only require modifying the “get_checkingcode.php” file that you saw before, and nothing else.

Therefore, in the section to come I’ll be redefining this PHP file so it can be used to generate dynamic division equations in the form of challenge strings.

To learn the full details on how this will be done, please click on the link that appears below and keep  reading.

{mospagebreak title=Using division equations as challenge strings}

In order to modify the Ajax application shown in the previous segment, and make it capable of generating division equations within a specific web form, I’m going to redefine one of its source files — specifically, the one called “get_checkingcode.php.” Once modified, this file will be charged with generating the proper division equations, in this way implementing a simple protection system.

That being said, here’s the brand new definition of this PHP file. Have a look at it, please:


<?php

session_start();

$valuea=rand(1,10)*2;

$_SESSION['checkcode']=$valuea/2;

echo $valuea.’ % 2′;

?>


Indeed, the above file is extremely easy to follow. It simply generates challenge division equations, where the dividend will always be a random pair of integers. In this case, I decided to divide this number by 2, in order to construct simple operations, but naturally this option can be modified to fit other requirements.

So far, so good. Having modified the signature of the “get_checkingcode.php” PHP file, the Ajax program that you saw before now has the capacity to generate division equations in the form of challenge strings. Thus, provided that you’ve grasped how this file functions, it’s time to see how it can be directly coupled to an HTML form to turn this protection mechanism into a fully-functional application.

Therefore, go ahead and read the next section. It’s only one click away.

{mospagebreak title=Completing the Ajax-based web form protection mechanism}

Definitely, the best way to understand how this Ajax-driven application can be used to make a web form more secure is by showing all the source files that comprise it. With that idea in mind, below I included the complete signatures of these files, so you can study them in detail. 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 challenge strings 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 challenge strings 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="Divide 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)*2;

$_SESSION['checkcode']=$valuea/2;

echo $valuea.’ % 2′;

?>



(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, having listed the full source code corresponding to this Ajax-based web form protection application, it’s time to test its real functionality, right? Well, if you try it out in your own web server, you’ll see that each time the previous HTML form is shown on screen, it’ll display a simple  division equation, whose result should be correctly calculated before submitting the form.

Finally, this value will be properly checked in the server by the “check_form.php” PHP file listed a few lines above. Now, do you realize how easy is to build a mechanism for protecting web forms against attacks? I guess you do!

In addition, to complement the prior explanation, below I included two illustrative images that demonstrate how these challenge divisions are displayed each time a user fills in the sample HTML form. Here they are:




And now that you saw how this Ajax application works in a concrete situation, it’s time to play around with its source files. From this point on, feel free to modify them and incorporate your own improvements into the program. You’ll have a great time, that’s already guaranteed!

Final thoughts

It’s hard to believe, but we’ve come to the end of this series. Hopefully, this journey has been instructive, since you learned how to build a bunch of Ajax-based applications for protecting web forms against  attacks.

Again, I’d like to stress that this approach isn’t as effective as the ones that use a server-side image library to generate challenge strings, but due to its simplicity to implement, it’s worth a look. 

See you in the next web development tutorial!

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

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort