or, The Hitchhiker’s Guide to Fear and Loathing at a Public Library Reference Desk


Trying CAPTCHA Word Verification

   October 25th, 2007 Brian Herzog
no spam CAPTCHA imageMy library's website has the standard "contact us" forms - one for general comments, one for purchase suggestions, one for reference questions, etc. Lately, we've seen an increase in spam comments coming through these forms, and I wanted to see if I could put a stop to it.

On the library's blog (and mine), I'd been using the "Challenge" plugin for WordPress, which requires someone to solve a simple math problem. This seemed to work pretty well, but 1) didn't look high tech, and 2) it only worked with WordPress.

For the forms on our html pages, I searched around the internet for an easy-to-install client-side CAPTCHA (read more) solution. What I found was a javascript solution called "jcap" provided by Archreality.

I didn't really see anything on the internet about this jcap thing, other than someone having trouble installing it. I installed it and got it to work, but unfortunately it didn't seem to cut down on spam at all. When I installed it on this blog's comment form, the number of spam comments actually increased. With the math challenge, I'd get maybe two or three a week. With this jcap, I'm up to maybe fifty a week.

Here's what it looks like:

To prove you're human, please enter the word seen below:


I'm going to leave it on for awhile longer, just to see what happens. I think I'll end up switching back to the math challenge, but I sure do like the way jcap looks. Oh, and another advantage of the math challenge is that I think it is ADA-compliant, in that it can be read by screen reading software - the CAPTCHA images (at least in this version) cannot.

If you want to try installing and testing yourself, here's the steps I used:

1. Download the zip file from http://www.archreality.com/jcap/jcap.zip

2. Unzip the file (two .js files and one image directory) to your webserver where ever you want them - just remember, because you'll need to reference this location later

3. Modify jcap.js

  • line 10: change the imgdir variable path (to the cimg/ directory) to reflect where it will be on your webserver (be sure to keep the trailing slash after the cimg)
    Note: I used absolute path (http://www.domain.com/cimg/) instead of a relative path (../cimg/) because this lets you put the captcha on various pages that may be on different levels within your directory structure
  • line 91: optional: you can edit the text that appears in the alert box here (follow standard javascript syntax so as not to break the script)

4. Modify your html page on which you are including the captcha word verification

  • Include in the <head></head> tags these two lines (be sure to modify the path to reflect where ever you put these files on your server:
    <script type="text/javascript" src="http://www.domain.com/md5.js"></script>
    <script type="text/javascript" src="http://www.domain.com/jcap.js"></script>
  • Include the attribute below to your <form> tag that processes your script:
    onsubmit="return jcap();"
    (for example, yours might read <form action="http://www.domain.com/cgi-bin/email_ref.cgi" method="post" onsubmit="return jcap();">)
  • Include the lines below within your form where you want the word verification to display:
    Enter the word seen below:
    <input type="text" name="uword" id="uword" value="" size="20">
    <input type="hidden" id="required" name="required" value="uword">
    <script language="javascript" type="text/javascript">cimg()</script>

    Note: I ended up changing the "uword" field name (be sure to also change the field name on lines 84 and 92 of the jcap.js file). My logic was that, since this was the only script out there I could find, spammers probably already know to look for a field named "uword." But even with using a different field name, spam still comes through

Optional Extra Error Checking
This has nothing to do with this particular script, but I added it just for error-checking convenience. This is totally optional. The line below can be added to your submit button tag to make sure people fill in all the right fields - you'll have to edit it to reflect the fields you want to make "required"
onClick="javascript:if(document.commentform.author.value == ''){alert('You must provide your Name to sumbit a comment.');document.commentform.author.focus();return false;}else if(document.commentform.comment.value == ''){alert('You must type some sort of comment to sumbit a comment.');document.commentform.comment.focus();return false;}"

Good luck. If anyone has a better solution, please share.

update: After a two month trial period, I found this method was letting a lot of spam comments through. It was pointed out to me that javascript, being client-side, is easy to defeat, and that I should modify this to run in the php code of my site. I did not do this, but instead went back to using the WordPress Challenege plugin, but a programmer I know did, and he said his php code works well and that this javascript version was a great place to start.



Tags: , , , , , , , , ,