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

The application's full source code - 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 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">

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

}

?>


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!



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