DHTML

An Object-Based Approach to Building Noisy Images

Noisy images can be a useful technique for preventing automated submissions of online forms. If you want to learn how to put this approach to work for you, this article provides you with distilled material on the topic. Welcome to the second installment of the series "Building Noisy Images." Over the course of this educational journey, you'll see how to build simple –- yet effective -- noisy images, by using a combination of basic structural markup, CSS styles and a tiny bit of PHP.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

May 15, 2007

TABLE OF CONTENTS:

<?php
class RandomGenerator{
   var $length;
   var $chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
   function RandomGenerator($length=4){
     if(!is_int($length)||$length<1||$length>strlen($this-
>chars)){
       trigger_error('Invalid length for random
string',E_USER_ERROR);
     }
     $this->length=$length;
   }
   function getRandomValue(){
     $rndstr='';$maxvalue=strlen($this->chars)-1;
     for($i=0;$i<$this->length;$i++){
       $rndstr.=substr($this->chars,rand(0,$maxvalue),1);
     }
     return $rndstr;
   }
}
?>
<!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>Example using simple noisy image</title>
<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

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

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

#formcontainer{
   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;
}

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

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

.formbutton{
   width: 80px;
   padding: 3px 0 3px 0;
   font: bold 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
}
</style>
</head>
<body>
   <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">Random string goes
here</span></p>
       <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>
     </form>
   </div>
</body>
</html>

As you can see, the above PHP file now contains the definition of the "RandomGenerator" class that was built previously, but the file in question lacks the ability to save the corresponding random string to a session variable. Don't worry about this issue, because it will be properly addressed in the last article of the series.

Final thoughts

As you saw in this article, the generation of the noisy image that must be included into the respective contact form is still incomplete. We need to implement a session mechanism that is capable of maintaining the value of the random string across different web pages.

Actually, this session mechanism will be developed in the last part of the series, so you don't have any excuses to miss it!

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.