# Using Integer Multiplication to Protect Web Forms with Ajax

If youâ€™re a web developer who builds Ajax-driven applications and wants to learn how to use this technology for creating more secure web forms, then look no further. Welcome to the third part of a series focused on making web forms safer with Ajax. Made up of four comprehensive tutorials, this series explains how to generate different types of challenge strings via Ajax, which can be incorporated into any existing HTML form with the purpose of protecting it against attacks.

Introduction

Now that you’ve been introduced to the main subject of this series of articles, it’s time to recall the topics we discussed in the last article. In that tutorial I went through the development of a simple Ajax-based application that could dynamically generate a bunch of elementary addition problems to be displayed within a targeted web form.

The logic that drove this approach was quite easy to understand.Each time a user attempted to submit an HTML form, they were asked to enter the correct sum, in this way implementing a basic mechanism aimed at making the form in question more secure against spam web bots and other malicious programs.

Of course, using this approach doesn’t mean that a web form will be completely invulnerable to those attacks. However, its simplicity and minimal requirements turn it into a viable option for making an online form slightly more secure.

Now that you’ve recalled how to develop an Ajax-driven program to generate dynamic sums as challenge strings, you might like to hear that the concept can be extended to work with other mathematical operations as well. Therefore, in this third installment of the series, I’ll be explaining how to build a web form protection system where users will be asked to multiply two integers before submitting the form in question.

This is a variation of the example created in the preceding article, but it does deserve a closer look. So start reading now!

{mospagebreak title=Review: elementary sums as challenge strings to protect a web form}

Before I proceed to explain how to protect a targeted HTML form simply by multiplying two integers, it would first be convenient to list the source files corresponding to the practical example created in the previous article, so you can see how this same functionality was achieved by means of basic sums.

Having said that, here are all of the files that comprised this Ajax-driven application:

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

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

<title>Ajax-based Random Sums Generator</title>

<style type="text/css">

body{

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;

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

// get verification code with Ajax

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

});

</script>

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

<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!’;

}

?>

As show above, the previous sample files contain all of the source code required to build an Ajax-driven program that generates challenge sums to protect an HTML form against possible attacks. In this case, users will be asked to enter the correct result of the sum before submitting the form, and naturally this value will be properly checked on the web server with a basic PHP script.

Despite its flaws and weaknesses, this approach can be a valid alternative to using more conventional random strings, and it introduces a refreshing touch when it comes to implementing a system for making an online form safer.

At this point, everything looks good, since you learned how to take advantage of the functionality of Ajax to generate challenge sums. However, as I anticipated in the beginning, it’s perfectly possible to apply this same concept to work with different mathematical operations.

So, based on this idea, in the following section I’m going to show you how to protect a sample web form by making users multiply two integers, where each of these will be retrieved from the web server via Ajax.

To learn how this brand new example will be developed, please click on the link below and keep reading.

{mospagebreak title=Extending the use of math: multiplying integer numbers}

As I stated in the section that you just read, it’s also possible to use different mathematical operations as challenge strings when protecting a web form from attacks. In this particular situation, I’m going to demonstrate how to apply this concept specifically to multiplication.

As this article’s title suggests, before a user submits a targeted web form, he/she will be asked to enter the correct result of a challenge multiplication, which will be constructed dynamically with Ajax. Thus, I am first going to list the signature of the (X)HTML file that renders a sample HTML form, and that also performs HTTP requests through Ajax. Here it is:

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

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

<title>Ajax-based challenge strings generator</title>

<style type="text/css">

body{

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;

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

// get verification code with Ajax

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

});

</script>

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

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

As you can see, the above (X)HTML file looks nearly identical to what I coded in the previous section, except for some "title" attributes, which have been properly modified. Since you shouldn’t have major problems understanding how this file works, it’s time to code a new one, which will be responsible for dynamically generating the integer numbers that must be multiplied by users before submitting the web form. Here is the corresponding signature of this file:

<?php

session_start();

\$valuea=rand(1,10);

\$valueb=rand(1,10);

\$_SESSION['checkcode']=\$valuea*\$valueb;

echo \$valuea.’ x ‘.\$valueb;

?>

See how simple it is to create a PHP script that generates multiplication challenges? I bet you do! In this case, the above PHP file will send to the client a couple of random integers, and naturally users will be asked to enter the correct product of the pair before submitting the web form. Pretty simple to understand, right?

Now that you’ve grasped the logic that drives the previous PHP script, it’s time to move on and list the full source code of this simple web form protection system, which generates multiplication equations as challenge strings via Ajax.

Jump ahead and read the section to come. It’s only one click away.

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

As I said in the section that you just read, below I listed all of the source code that corresponds to this Ajax-based application, which implements a simple mathematical mechanism that protects a web form from possible hacks. Here are all of the files that comprise the 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">

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

<title>Ajax-based challenge strings generator</title>

<style type="text/css">

body{

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;

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

// get verification code with Ajax

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

});

</script>

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

<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!’;

}

?>

Undoubtedly, the set of source files shown above demonstrates how easy it is to build an Ajax application that generates a multiplication problems to make a targeted web form a bit more secure.

Below I’ve included a couple of complementary images that show how these challenge calculations are displayed when the previous sample form is being filled in with some trivial data:

Of course, there’s plenty of room for enhancing this Ajax-driven program, for instance, by embedding these operations directly into an image generated dynamically. But this improvement, and others, will be left as homework for you. In this case one thing is for sure: fun is already guaranteed!

Final thoughts

In this third episode of the series, I walked you through the development of an Ajax-driven application, which was capable of displaying multiplication problems within a targeted web form to protect it against malicious, automated submissions.

In the last chapter, I’ll be building a similar program for protecting HTML forms, but this time it’ll generate divisions as challenge strings. Thus, now that you’ve been warned about the subject of the next part, you won’t want to miss it!