Invisible CAPTCHA
Posted: 11 October 2006 08:05 AM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  78
Joined  05-12-2006

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 wink

*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:

1. You must give the CAPTCHA input an ID.
2. 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.
3. The {captcha} tag outputs the input label (set in the settings) + some javascript.

Here is the example CAPTCHA code from eedocs:

{if captcha}

<p>Please enter the word you see in the image below:</p>

<
p>{captcha}<br />
<
input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p>

{/if}

With Invisible CAPTCHA, the example would go:

{if captcha}

<div id="captcha-container">

    <
p>{captcha}</p>

    <
p><input id="captcha" type="text" name="captcha" value="" size="20" maxlength="2" style="width:140px;" /></p>

</
div>

{/if}


Settings
There are only 2 settings, which are pretty straightforward.

1. Captcha input label - This is the label to output.  Use the tags {first} and {second} to mark where the numbers should go.
2. 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.

Image Attachments
IC_JS_enabled.pngIC_JS_disabled.png
Click thumbnail to see full-size image
File Attachments
invisible_captcha.zip  (File Size: 4KB - Downloads: 355)
Profile
 
 
Posted: 16 October 2006 09:53 AM   [ Ignore ]   [ # 1 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  178
Joined  12-20-2005

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 92

EDIT: Only seems to be in Firefox

Any ideas?

Cheers!

 Signature 

Steve P. Sharpe
Creative Director @ Gleam.

http://madebygleam.com

Profile
 
 
Posted: 16 October 2006 11:31 AM   [ Ignore ]   [ # 2 ]  
Grad Student
Avatar
Rank
Total Posts:  78
Joined  05-12-2006

Try going to the extensions settings & saving them and see if that does the trick.

Profile
 
 
Posted: 16 October 2006 11:34 AM   [ Ignore ]   [ # 3 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  178
Joined  12-20-2005

Yup!

It fixed it just fine. Thanks for your help.

 Signature 

Steve P. Sharpe
Creative Director @ Gleam.

http://madebygleam.com

Profile
 
 
Posted: 16 October 2006 11:50 AM   [ Ignore ]   [ # 4 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  178
Joined  12-20-2005

Having said that…

The text field is shown even wih js enabled in Firefox on the mac. See attached.

Image Attachments
Picture 32.png
Click thumbnail to see full-size image
 Signature 

Steve P. Sharpe
Creative Director @ Gleam.

http://madebygleam.com

Profile
 
 
Posted: 16 October 2006 02:35 PM   [ Ignore ]   [ # 5 ]  
Grad Student
Avatar
Rank
Total Posts:  78
Joined  05-12-2006

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.

Profile
 
 
Posted: 17 October 2006 09:08 AM   [ Ignore ]   [ # 6 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  178
Joined  12-20-2005

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!

 Signature 

Steve P. Sharpe
Creative Director @ Gleam.

http://madebygleam.com

Profile
 
 
Posted: 10 November 2006 11:02 PM   [ Ignore ]   [ # 7 ]  
Summer Student
Total Posts:  25
Joined  07-13-2003

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!

Profile
 
 
Posted: 11 November 2006 08:47 AM   [ Ignore ]   [ # 8 ]  
Grad Student
Avatar
Rank
Total Posts:  78
Joined  05-12-2006
Mudpuppy - 10 November 2006 11:02 PM

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?

Profile
 
 
Posted: 12 November 2006 04:44 AM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  25
Joined  07-13-2003

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.

Profile
 
 
Posted: 12 November 2006 05:16 AM   [ Ignore ]   [ # 10 ]  
Summer Student
Total Posts:  25
Joined  07-13-2003

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.

Profile
 
 
   
 
 
‹‹ Multi Text      Field Maths 101 ››
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 64905 Total Logged-in Users: 46
Total Topics: 81848 Total Anonymous Users: 33
Total Replies: 440048 Total Guests: 237
Total Posts: 521896    
Members ( View Memberlist )