Invisible CAPTCHA
Development and Programming
Finding myself in full agreement with a post about how captcha can go to hell, and inspired by the ideas put forth in Lightweight Invisible CAPTCHA Validator Control, I’ve developed an invisible captcha for EE for use on the site I am developing.
It asks a simple math question: the addition of 2 random single digit positive integers. If a user has javascript enabled, the question will answer itself and be hidden from view. SPAM bots are generally known to not be able to parse javascript. The javascript is also slightly obfuscated and randomized, so that if someone wants to write a SPAM bot that uses screen scraping to figure out the correct answer, they’ll have to work for it a bit.
This is pretty much a drop in replacement for the image captcha. Although the image CAPTCHA in EE is better than many of the CAPTCHAs you see today that are impossible to read, they still suffer from being inaccessible and a slight (or large) annoyance to users. Yes indeed, image CAPTCHAs can go straight to hell 😉
*Remember, good SPAM prevention involves deploying and utilizing a whole set of tools, each of which adds a piece to the puzzle. This is not an end solution that will or possible can stop all SPAM. It is merely one tool among many that you can utilize in combination to combat SPAM.
The extension is attached as a ZIP archive.
Usage Usage is very similar to the standard CAPTCHA, with a few key exceptions:
- You must give the CAPTCHA input an ID.
- You must wrap the CAPTCHA “input block” in a DIV with a ID that is the concatenation of the input ID + “-container”. (don’t get too caught up on that. The example will make it more clear if you didn’t quite catch that.) This allows it to be invisible to users with Javascript enabled.
- The {captcha} tag outputs the input label (set in the settings) + some javascript.
Here is the example CAPTCHA code from eedocs:
{if captcha}
Please enter the word you see in the image below:
{captcha}
<input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" />
{/if}With Invisible CAPTCHA, the example would go:
{if captcha}
<div id="captcha-container">
{captcha}
<input id="captcha" type="text" name="captcha" value="" size="20" maxlength="2" style="width:140px;" />
</div>
{/if}Settings There are only 2 settings, which are pretty straightforward.
- Captcha input label - This is the label to output. Use the tags {first} and {second} to mark where the numbers should go.
- ID of the captcha input field - This is the ID on the captcha input field. Defaults to “captcha”
Installation Standard extension installation. Copy ext.invisible_captcha.php to the extensions directory and lang.invisible_captcha.php to the language directory. Then enable it from the EE admin, edit the settings, and setup (or re-setup) the templates with the forms that use CAPTCHA.
![Steve [at] Gleam.'s avatar](https://pagingstaging.expressionengine.com/asset/images/avatars/avatar_25657.jpg){kind=avatar}
Hi there,
Great idea btw! I am getting the following errors when trying to run in on the page it’s on.
Notice: Uninitialized string offset: 0 in /home/sps/public_html/spsadmin/extensions/ext.invisible_captcha.php on line 74
Notice: Uninitialized string offset: 0 in /home/sps/public_html/spsadmin/extensions/ext.invisible_captcha.php on line 92EDIT: Only seems to be in Firefox
Any ideas?
Cheers!
Try going to the extensions settings & saving them and see if that does the trick.
Yup!
It fixed it just fine. Thanks for your help.
Having said that…
The text field is shown even wih js enabled in Firefox on the mac. See attached.
I developed it on OS X and tested in both Safari 2 and Firefox 1.5 and 2 beta.
What is your “ID of the captcha input field” setting for the extension?
Do you have the input wrapped in a container with the id “{ID of the captcha input field}-container” ?
It is important that the ID is set correctly in the settings and the input is wrapped in a container so that the field can not only be filled in, which it appear is working, but also can then be hidden. The field itself can’t just be hidden because then there would be an orphaned label hanging around, so you have to wrap everything you want hidden in a container and give it the correct ID so the script can find it.
Hiya,
Now works like a charm, I had removed the wrapping div tag. I have now wrapped with a p tag with the correct id.
Thanks for your hard work on this extension!
Sorry to be dimwitted, but what do you mean by “Use the tags {first} and {second} to mark where the numbers should go. “?
Could you give an example of an entire code snippet that should be dropped into a template? I don’t understand where I’m supposed to put the {first} and {second} tags.
Thanks!
Sorry to be dimwitted, but what do you mean by “Use the tags {first} and {second} to mark where the numbers should go. “? Could you give an example of an entire code snippet that should be dropped into a template? I don’t understand where I’m supposed to put the {first} and {second} tags. Thanks!
It means exactly what it means. Also they don’t go in the template, they go in the one setting. Look at the default value for that setting, and you should understand.
The captcha adds two numbers, {first} is the 1st number and {second} is the 2nd number, understand?
I do not know what/where “the settings” are. All this thread has said is “The {captcha} tag outputs the input label (set in the settings)”. It doesn’t say where I find the settings, and all I know at this point is that they aren’t in a template. Are they in an EE file on my server? Are they in one of the two files used in your script? Are they configured via my control panel somehow? It would help me narrow it down if I at least knew what file I should be editing (if indeed I should be editing a file at all). I understand what your script does, but I don’t know how to find the mysterious “settings” which need to be, um, set.
I’ve eventually figured this out, so these are my step-by-step instructions for anyone else who is confused by this thread:
Download the invisible_captcha.zip file to your computer and and unzip it.
Upload the unzipped files to your server: ext.invisible_captcha goes in the system/extensions folder, and lang.invisible_captcha goes in the system/language/english folder.
Log into your EE control panel. Go to Admin >> Utilities >> Extensions manager
You should see “Invisible CAPTCHA” in the extentions manager, but it will be greyed out. Find the tab which says, “Enable Extensions” and click it, then confirm you want to perform this action. You’ll then see the word “Enable?” in the Invisible CAPTCHA status area. Click the word Enable to confirm. You’ll then see the word “settings” available as a hyperlink, and you can click this to see the default setup of the variables {first} and {second}. You can probably leave these settings as-is, but at least you’ll know where they are.
Click Submit to finish the setup of the extension.
Now you can edit your comments and comments_preview templates to use the Invisible Captcha feature. Replace your current captcha code with the example snippet of code in the first post in this thread.
I hope that might help someone else who’s never worked with extensions, had no idea they needed to be enabled, and had no idea there was an extensions manager area in the EE control panel.
This seems to be a bit on the slow side when the browser loads. Makes my page jump once the script is parsed. http://maizebreak.com/sports/article/272/
Anybody able to speed up the script a bit?
OK - I’ve installed it all correctly - on the page as it loads I briefly see the question before the js kicks in and hides it. When I then try and submit a comment, its giving an error message: “You did not submit the word exactly as it appears in the image” which obviously confuses me somewhat!
I’ve since disabled the extension, and put it back to the normal image captcha and its working fine (albeit needing an image captcha!).
Any thoughts?
What happens if the user has js off? Will they see the form and be able to answer it themselves?
Dreamscape,
Fantastic extension! I am trying to use the captcha inside a modal window and I can’t seem to get it working. The form is in a separate template that is pulled into the modal window via ajax. When I view the page that the form is in the captcha works as expected, but when I pull it into the modal it displays the question and text field. Any suggestions on how to get it working inside the modal?
Thanks