Home arrow DHTML arrow Page 4 - A Basic Method for Building Noisy Images

A Basic Method for Building Noisy Images

Noisy images (used for captchas) are one way to help insure the security of online forms and prevent them from being abused. In this article, the first part of a three-part series, you will learn how to build noisy images with a simple combination of CSS, (X)HTML and a friendly scripting language, such as PHP. This method offers less complexity than the more conventional methods of building noisy images.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
May 14, 2007
  1. · A Basic Method for Building Noisy Images
  2. · Creating a simple contact form
  3. · Defining a simple PHP script
  4. · Completing the creation of a noisy image

print this article

A Basic Method for Building Noisy Images - Completing the creation of a noisy image
(Page 4 of 4 )

As I stated in the previous section, completing the creation of the noisy image is only a matter of linking the already familiar "getChallengeValue()" PHP function to the (X)HTML file responsible for displaying the contact form that I coded in the beginning.

Basically, all these separated pieces can be merged in only one common PHP file. This file is not only capable of displaying a different noisy image each time it is requested, but also stores the pertinent random value onto a session variable for proper verification on the web server.

Having explained that, the signature of this new PHP file could look like this:

// define 'getChallengeValue()' function
function getChallengeValue($length=4){
trigger_error('Invalid length for random
return $rndstr;
// save challenge value to session variable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using simple noisy image</title>
<style type="text/css">
padding: 0;
margin: 0;
background: #fff;

   font: bold 16px Arial, Helvetica, sans-serif;
   color: #000;
text-align: center;

width: 250px;
padding: 2px 0 2px 0;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;

width: 35%;
padding: 10px 100px 10px 10px;
margin-left: auto;
   margin-right: auto;
background: #eee;
border: 1px solid #999;

#formcontainer p{
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   text-align: right;

   display: block;
   float: right;
   width: 230px;
   padding: 7px 9px 7px 10px;
   margin: 10px 0 20px 0;
   background: #fff url(noisy_image.gif) left center repeat-x;
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #039;
   text-align: center;
   border: 1px solid #999;

   width: 250px;
   padding: 3px 0 3px 0;
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   border: 1px solid #999;

   width: 80px;
   padding: 3px 0 3px 0;
   font: bold 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
   <h1>Example using simple noisy image</h1>
   <div id="formcontainer">
     <form action="check_data.php" method="post">
       <p>First Name <input type="text" name="fname" title="Enter
your first name" class="inputbox" /></p>
       <p>Last Name <input type="text" name="lname" title="Enter
your last name" class="inputbox" /></p>
       <p>Email <input type="text" name="email" title="Enter your
email address" class="inputbox" /></p>
       <p>Enter the four-digit code shown below:</p>
       <p><span class="challengevalue"><?php echo $_SESSION
       <p><input type="text" name="challenge" title="Enter the
code shown above" class="inputbox" /></p>
       <p>Enter the text of your message:</p>
       <p><textarea name="message" title="Enter the text of your
message here" rows="10" cols="10"></textarea></p>
       <p><input type="submit" name="send" value="Send Data"
class="formbutton" /></p>

See how easy it is to include a noisy image into the above contact form? I bet you do! Besides, this technique can be quickly improved, if (for example) you want to work with AJAX and generate new random strings without having to reload the whole web page.

In addition, you may have noticed that the sample web form in question is submitted to a PHP file called "check_data.php." This file should contain a simple script that verifies whether the noisy code entered by a user is correct or not. Certainly, this checking process could be easily performed by including the following code snippet into the aforementioned PHP file:

// check if user entered the correct challenge value
echo '<h1>Congratulations! You entered the correct challenge
echo '<h1>Sorry, but the challenge valued you entered is

Overall, this is all the source code required to implement a basic noisy image with your own web forms. As I said before, this approach can be modified with minor hassles to work with AJAX-based applications or even use a different server-side scripting language other than PHP.

Also, if you feel inclined to test this basic application before reading the subsequent articles of the series, you may want to download the corresponding supporting material here or from the beginning of this article. 

Final thoughts

In this first article of the series, I went through the implementation of a simple noisy image that can be easily included into any online form, to help prevent automated and fake form submissions.

However, this isn't the end of the series, since in the next part I'm going to teach you how to create noisy images by following an object-oriented approach instead of using a simple PHP function.

Want to see how this will be done? Don't miss the next article!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials