Safer Contact Forms Without CAPTCHA's
The Idea
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Make it difficult for spammers to probe our forms for weakness
- Keep it easy for the "good guys" to use our contact forms
- Therefore we need to avoid CAPTCHA's
- There's research that indicates that they're not as effective as once thought
- We'll borrow some concepts from Chris Shiflett, PHP security expert, and improve on them
Specifically...
- When the contact form is loaded we'll make an AJAX call to a PHP file
- The PHP file will grab the current time (according to the server, not the visitor's browser)
- The PHP file will combine the timestamp, plus a secret word, and generate a 32 character 'hash' and store it as a cookie on the visitor's browser
- jQuery will receive the timestamp information from the AJAX call and store the hash or 'token' as a hidden form tag
- When the form is sent for processing, the value of the timestamp will be compared to the 32 character 'token' stored in the cookie
- If the information doesn't match, or is missing, or if the timestamp is too old, we'll kill execution of the form processor and a spammer looking for easy prey will move on to another target
So let's get rolling... first we need a contact form
Simple Contact Form
"If you enjoy my tutorial you're going to love my new software for web designers:"
Next... bring on the jQuery
Grab the jQuery Library
"If you enjoy my tutorial you're going to love my new software for web designers:"
And kick start the rest of the code with $('document').ready()
Next... remove the "javascript required" warning
Consider If Your Visitor Isn't Using Javascript
"If you enjoy my tutorial you're going to love my new software for web designers:"
- One method is to put a warning at the top of the form
- Give the P tag a class name or id
- Use jQuery to remove() the P element containing the "javascript required" message
- If the visitor has javascript off - they will see the warning message
PHP File
"If you enjoy my tutorial you're going to love my new software for web designers:"
- 'token.php' is used to perform four actions:
- Grab the current server time using mktime()
- Combine the server time with a secret word you supply and create a 'hash' using the md5() function
- Store the hash or 'token' value in a cookie
- Send the server time back to jQuery so it can be inserted into the form html on the client side
- Using the server time (via PHP) instead of a javascript call to the current
browser time is more reliable
- Helps us determine how long the visitor took to complete the form
- Makes it much more difficult for an outsider to "monkey" with our token function
AJAX Call
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Our javascript will use jQuery's $.get(file, callbackFunction) for the AJAX
jQuery Appends the Server Time
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Use append() to tell jQuery to add a hidden input to the form just before the closing form tag
Checking The Form
"If you enjoy my tutorial you're going to love my new software for web designers:"
- test.php is the example PHP code used to verify the token
- Is the token present?
- Does it match the timestamp when run through the md5() function?
- Has too much time elapsed?
Prevent Caching
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Internet Explorer has a nasty habit of caching the token.php file
- We want this file run every time the contact form is loaded
- So after the cookie is sent, we're going to send some special headers
So What Makes This Solution "Better"
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Chris Shiflett's code required that the contact form page be written in PHP
- My jQuery adaptation of his code makes it possible to use this solution on any contact form
- No need to change .htm extension to .php
- Could be used on a blog where adding php code to a contact form plugin would require extensive hacking
What Makes This Solution "Worse"
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Chris Shiflett's code required only that cookie be enabled on a visitor's machine
- My jQuery adaptation requires cookies and javascript
- Is this really a huge issue - IMO: "no"
- It's a tradeoff that you, the designer/programmer, must evaluate
Final Analysis
"If you enjoy my tutorial you're going to love my new software for web designers:"
- Pro: Easy to use on any contact form
- Con: a teeny tiny percentage of your audience will either have javascript or cookies disabled
- You just have to weigh this against your alternatives:
- Less security for your forms + spammers probing for weak points
- Annoying CAPTCHA tests that suppress communication with visitors