Home arrow AJAX & Prototype arrow Page 4 - Using Division Equations to Make Web Forms Safer with Ajax

Completing the Ajax-based web form protection mechanism - 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.

  1. Using Division Equations to Make Web Forms Safer with Ajax
  2. Review: challenging users with multiplication
  3. Using division equations as challenge strings
  4. Completing the Ajax-based web form protection mechanism
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
April 08, 2009

print this article



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


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

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

<style type="text/css">


padding: 0;

margin: 0;

background: #fff;



font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;



font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;



width: 380px;

text-align: right;

padding: 10px;

background: #eee;



font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;



width: 300px;

border: 1px solid #999;



width: 50px;

border: 1px solid #999;



<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);});





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





(definition of 'get_checkingcode.php' file)





echo $valuea.' % 2';


(definition of 'check_form.php' file)




echo 'Correct verification code!';



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!

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


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