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:
<?php
// define 'getChallengeValue()' function
function getChallengeValue($length=4){
$chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
if(!is_int($length)||$length<1||$length>strlen($chars)){
trigger_error('Invalid length for random
string',E_USER_ERROR);
}
$rndstr='';
$maxvalue=strlen($chars)-1;
for($i=0;$i<$length;$i++){
$rndstr.=substr($chars,rand(0,$maxvalue),1);
}
return $rndstr;
}
session_start();
// save challenge value to session variable
$_SESSION['challenge']=getChallengeValue();
?>
<!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_image.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"><?php echo $_SESSION
['challenge'];?></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>
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:
<?php
session_start();
// check if user entered the correct challenge value
if(trim($_POST['challenge'])==$_SESSION['challenge']){
echo '<h1>Congratulations! You entered the correct challenge
value!</h1>';
}
else{
echo '<h1>Sorry, but the challenge valued you entered is
incorrect.</h1>';
}
?>
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. |
/ 3 
