Home arrow AJAX & Prototype arrow Page 3 - Using Integer Multiplication to Protect Web Forms with Ajax

Extending the use of math: multiplying integer numbers - 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.

TABLE OF CONTENTS:
  1. Using Integer Multiplication to Protect Web Forms with Ajax
  2. Review: elementary sums as challenge strings to protect a web form
  3. Extending the use of math: multiplying integer numbers
  4. The application's full source code
By: Alejandro Gervasio
Rating: starstarstarstarstar / 4
April 01, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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

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


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.



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: