The typical solution to avoiding spam bots from abusing your online forms is to use a CAPTCHA test. You know – the hard to read, wavy text that you must type in correctly to prove to the web page that you are human and capable of making sense out of the non-sense. Well, spammers have used OCR (optical character recognition) algorithms to have their bots read the messy text and complete the test. Since then, there have been lots of alternatives to the text CAPTCHA test. Some involve selecting an image from a list given its name or description, or answering simple math problems. However, I didn’t find one that I really liked. So we started to build our own on the assumption that spam bots don’t use mice.
The idea is that if you can trace the path with your mouse, you must be human. This solution is still new, so it’s not bullet proof. But it should be enough of a deterrent to keep the spammers away. They’ll likely move on to sites with cracked security or no security than to customize their bots to crack this test.
Here’s how it works: When the page loads, a random “path” image is picked from a list of 20 images. Then, when the user traces the path with the mouse, it checks that the user passes through all the checkpoints on the path and in the correct order. When the form is submitted, the order of checkpoints is compared on the server with the path that was used. If it’s correct, it can continue processing the form.
This mouse gesture test is built as a jQuery plugin, which makes it very easy to set up on any form. For the test shown above, the code looks something like this:
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.gestureTest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#myTest').gestureTest(); }); </script> <form><input type="hidden" name="phpMyAdmin" value="h1cjFojtxzm4Mfa3dkNBgxO52Fe" /> <!-- form elements here --> <div id="myTest"></div> </form> |
Line 1: load jquery.
Line 2: load the plugin.
Line 11: add a div that will receive the test.
Line 5: apply the plugin to the div.
Of course there is some server-side stuff to be done. Assuming you’re using PHP, the code would look something like this:
1 2 3 4 5 6 7 8 9 10 | $code = $_POST['GT_gestureCode']; $i = $_POST['GT_gestureIndex']; $solutions = array(147896325, 789632145, 963214785, 321478965, 369874125, 987412365, 741236985, 123698745, 147852369, 321456987, 741258963, 123654789, 147896523, 145236987, 785412369, 321478569, 125478963, 365214789, 741236589, 123698547); $codeReversed = strrev($code); if($solutions[$i] == $code || $solutions[$i] == $codeReversed){ //correct code - process the submitted form } else{ //incorrect code - return error to user } |
Here is the latest version: gestureTest 0.1
Use it any way you like. There is plenty of room for improvements. Just let me know how you put it to use!
