Home arrow AJAX & Prototype arrow Page 4 - Using Simple Checksums for Web Form Verification with Ajax

The Ajax application's full source code - AJAX

As you know, Ajax is a technology that can be used to perform all sorts of clever tasks; this includes building web forms that are less vulnerable to attacks from malicious web bots. Indeed, itís pretty simple to develop certain mechanisms that permit the dynamic generation of verification codes via Ajax, which must be entered manually by a user before submitting an HTML form. This is the second part of a four-part series that shows you how to make your web forms safer with Ajax.

TABLE OF CONTENTS:
  1. Using Simple Checksums for Web Form Verification with Ajax
  2. Review: code verification system with Ajax
  3. Displaying basic mathematical sums as challenge strings
  4. The Ajax application's full source code
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
March 25, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

If you're like me, you want to study the full source code of the web form protecting mechanism developed in the previous section. Thus, below I listed the signature of its source file, so you can analyze the files in detail, and understand how they link with each other. 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">

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

}

?>


At this point, you have at your disposal the complete source code of this Ajax-based application, which implements a simple mechanism to make web forms a bit more secure against attacks and bogus submissions. In addition, below I included a couple of complementary images that will help you see more clearly how several basic sums are displayed within the previous online form before submission:




Indeed, the above images show quite accurately the way that these elemental mathematical operations are displayed on screen to protect a targeted online form. Of course, using this approach doesn't imply that your web forms will be completely protected, but it does help to make them a bit safer.

Final thoughts

In this second chapter of the series, I walked you through developing an Ajax-based mechanism that can protect web forms against automated submissions. In this case, users will be asked to enter the correct result of an elemental sum before submitting the form, which is an interesting alternative to using random strings.

In the forthcoming part, I'll show how to develop a similar Ajax-driven program that will prompt users to multiply two values when filling in an HTML form. However, to learn how this application will be created, you will have to read the next article!



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