Form Security Images

[mididelight]

Hello,

I have only found one tutorial on creating security images and it was at devshed.com, it was good but seemed like a lot of overhead. Does anyone know of any simple form security image scripts. I got robots galore hitting up my site, I need to squash them.

Thanks,
Seth

[jogol]

google for CAPTCHA

[bokeh]

creating security imagesThese images, named CAPTCHAs add absolutely no extra security to your site. They do one job and one job alone and that is to attempt to differenciate between humans and machines using web forms. Every day that passes their effectiveness is reduced due to enhanced OCR capabilities. They also cause accessiblity problems which in particular hinder blind and visually impaired users. If after knowing this you still want one of these you can download one (with audio back-up) from my site. Check out the link in my signature below.

[mididelight]

i didnt mean security i just meant stopping robots from filling out my forms. i get 50 undeliverable message alerts a day from my server cause robots are messing with my web forms. i will look at your script and see if its what i need. thanks

[mididelight]

so check out my page that i am testing...

http://www.mididelight.com/guestbook/index2.php

In firefox, netscape and opera it works great. but in IE if you forget to enter a field and have to go back to the script, the info that you had entered is gone. In the other browsers the form data is still there. Does this have anything to do with the fact I am using session() at the top or is this a setting in IE or a bug that makes the data disappear.

This would be annoying to a user that types the wrong verification in the box then goes back and their data is gone.

Does anyone know?

Thanks

[bokeh]

You need to make the form sticky. Post the form and I'll show you how.

[mididelight]

heres the form:

==================================


<form method="post" action="index2.php">
<ul style="border-top: #ccc solid 1px; padding-top: 5px; list-style-type: none;">

<li><h3>Sign the Guestbook Here:</h3></li>
<li>Name*: <br /><input type="text" name="name" size="30" maxlength="50" tabindex="3" /></li>
<li>Email*: <br /><input type="text" name="email" size="30" maxlength="50" tabindex="4" /></li>
<li>Message*:<br /><textarea name="message" cols="55" rows="7" tabindex="5"></textarea></li>

<?php
print '<li>Cannot read the image? <a href="#" onclick="document.getElementById(\'mainimage\').src=\'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?image=\' + new Date; return false;" >Swap It!</a></li>';
//print '<li><a href="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?audio">Try audio format</a></li>'."\n";
print '<li><img style="border: 1px solid #555;" src="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?image" width="170" height="84" alt="CAPCHA image" id="mainimage"></li>'."\n";
?>
<li>Type the image letters below (case sensitive)*: <a href="/misc/captcha.php" title="Captcha Details" onclick="MM_openBrWindow('/misc/captcha.php','newsletterWindow','width=350,height=170,scrollbars=yes,status=no'); return false">What is this?<img src="/img/nw.gif" alt="New Window" width="10" height="10" /></a><br /><input type="text" name="captcha"></li>

<li><input type="checkbox" name="join" tabindex="6" /> Join our Newsletter? <a href="/newsletter/" title="Newsletter Details" onclick="MM_openBrWindow('/misc/newsletter_details.php','newsletterWindow','width=350,height=270,scrollbars=yes,status=no'); return false">More Details<img src="/img/nw.gif" alt="New Window" width="10" height="10" /></a></li>
<li style="padding-top: 10px;"><input type="submit" value="submit" name="action" tabindex="7" class="clickbutton" /><input type="reset" value="reset" style="margin-left: 5px;" tabindex="8" class="clickbutton" /></li>
<li>* denotes required field</li>
</ul>

</form>

==================================

[bokeh]

<?php ?>


<form method="post" action="http://<?php print $_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; ?>">
<ul style="border-top: #ccc solid 1px; padding-top: 5px; list-style-type: none;">

<li><h3>Sign the Guestbook Here:</h3></li>
<li>Name*: <br /><input type="text" name="name" size="30" maxlength="50" tabindex="3" value="<?php print @$_POST['name']; ?>" /></li>
<li>Email*: <br /><input type="text" name="email" size="30" maxlength="50" tabindex="4" value="<?php print @$_POST['email']; ?>" /></li>
<li>Message*:<br /><textarea name="message" cols="55" rows="7" tabindex="5"><?php print @$_POST['message']; ?></textarea></li>

<?php
print '<li>Cannot read the image? <a href="#" onclick="document.getElementById(\'mainimage\').src=\'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?image=\' + new Date; return false;" >Swap It!</a></li>';
//print '<li><a href="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?audio">Try audio format</a></li>'."\n";
print '<li><img style="border: 1px solid #555;" src="http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?image" width="170" height="84" alt="CAPCHA image" id="mainimage"></li>'."\n";
?>
<li>Type the image letters below (case sensitive)*: <a href="/misc/captcha.php" title="Captcha Details" onclick="MM_openBrWindow('/misc/captcha.php','newsletterWindow','width=350,height=170,scrollbars=yes,status=no'); return false">What is this?<img src="/img/nw.gif" alt="New Window" width="10" height="10" /></a><br /><input type="text" name="captcha"></li>

<li><input type="checkbox" name="join" tabindex="6" /> Join our Newsletter? <a href="/newsletter/" title="Newsletter Details" onclick="MM_openBrWindow('/misc/newsletter_details.php','newsletterWindow','width=350,height=270,scrollbars=yes,status=no'); return false">More Details<img src="/img/nw.gif" alt="New Window" width="10" height="10" /></a></li>
<li style="padding-top: 10px;"><input type="submit" value="submit" name="action" tabindex="7" class="clickbutton" /><input type="reset" value="reset" style="margin-left: 5px;" tabindex="8" class="clickbutton" /></li>
<li>* denotes required field</li>
</ul>

</form>

[mididelight]

I tried implementing your fixes but now firefox does not retain the form information. hmmm seems to not be working...

[bokeh]

That's strange because I tested it on firefox.

[mididelight]

i dont know if you need to know this but i do once the user submits the form, it checks to verify that the fields have been filled in. if not then a javascript alert box displays and tells the user, they press OK and then a i use a javascript history.back function to show the form again. In IE the form data is removed, in FF it is there.

[bokeh]

Yes that is the trouble. If you are going to have javascript validation it should be done before submission to the server. The whole point of javascript validation is the form is only submitted if the details are good. Once the form has been posed to the server it should be reloaded by PHP if it coontains errors. If you want to include alerts just include them in the page that is reloaded. But going backwards is the reason you are loosing the data.

[mididelight]

ya that makes sense, i will have to do it that way.

[mididelight]

so i am now validating on the client end and server end but that problem of still have the form data disappear when I click back to get back to the form is still happening. Why do you have to go back you ask? Cause the CAPTCHA input field is server side and if the letters do not match the image then the user has to go back and reenter the right letters. Unfortunately when they go back, they lose the form data they previously typed. Any help out there?

[bokeh]

Why do you have to go back you ask? You do not need to go back. Just reload the form and tell them the problem. Do everything with php, no javascript at all. When it works without javascript that is the time to start adding javascript validation extras. The thing is it should work 100% properly if javascript is disabled.

Also the captcha imagen should be changed if a mistake was made.

[mididelight]

ok so say the user enters their name, email and the guestbook message but then gets the captcha image wrong, if i reload the form, wont they lose the form data that they already typed in? maybe i am thinking about this the wrong way...i feel like i am making this harder then it should be.

[bokeh]

In my previous post I modified the form so it would reload with the user's data already loaded.