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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax-based challenge strings generator</title>
font: bold 16pt Arial, Helvetica, sans-serif;
font: bold 9pt Arial, Helvetica, sans-serif;
font: bold 18pt Arial, Helvetica, sans-serif;
border: 1px solid #999;
border: 1px solid #999;
// get verification code with Ajax
<h1>Ajax-based challenge strings generator</h1>
<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>
<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!
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!
blog comments powered by Disqus