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

Review: elementary sums as challenge strings to protect a web form - 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

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

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

}

?>


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.



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