1 of 2
1
Invisible CAPTCHA
Posted: 11 October 2006 09:05 AM   [ Ignore ]  
Summer Student
Avatar
Total Posts:  8
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: 850)
Profile
 
 
Posted: 16 October 2006 10:53 AM   [ Ignore ]   [ # 1 ]  
Grad Student
Avatar
Rank
Total Posts:  37
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.

NoticeUninitialized string offset0 in /home/sps/public_html/spsadmin/extensions/ext.invisible_captcha.php on line 74

Notice
Uninitialized string offset0 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 12:31 PM   [ Ignore ]   [ # 2 ]  
Summer Student
Avatar
Total Posts:  8
Joined  05-12-2006

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

Profile
 
 
Posted: 16 October 2006 12:34 PM   [ Ignore ]   [ # 3 ]  
Grad Student
Avatar
Rank
Total Posts:  37
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 12:50 PM   [ Ignore ]   [ # 4 ]  
Grad Student
Avatar
Rank
Total Posts:  37
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 03:35 PM   [ Ignore ]   [ # 5 ]  
Summer Student
Avatar
Total Posts:  8
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 10:08 AM   [ Ignore ]   [ # 6 ]  
Grad Student
Avatar
Rank
Total Posts:  37
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: 11 November 2006 12:02 AM   [ Ignore ]   [ # 7 ]  
Summer Student
Total Posts:  5
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 09:47 AM   [ Ignore ]   [ # 8 ]  
Summer Student
Avatar
Total Posts:  8
Joined  05-12-2006
Mudpuppy - 11 November 2006 05:02 AM

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 05:44 AM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  5
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 06:16 AM   [ Ignore ]   [ # 10 ]  
Summer Student
Total Posts:  5
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
 
 
Posted: 05 September 2009 07:42 PM   [ Ignore ]   [ # 11 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1505
Joined  06-05-2007

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?

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
Posted: 08 October 2009 03:19 AM   [ Ignore ]   [ # 12 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  222
Joined  01-19-2009

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?

 Signature 

moogaloo.com

twitter | facebook | dribbble

Free Agent - invoicing, time tracking & accounting made easy - 10% off for life.

Profile
 
 
Posted: 16 November 2009 09:53 AM   [ Ignore ]   [ # 13 ]  
Lab Assistant
RankRank
Total Posts:  117
Joined  10-07-2007

What happens if the user has js off?  Will they see the form and be able to answer it themselves?

Profile
 
 
Posted: 17 December 2009 03:48 PM   [ Ignore ]   [ # 14 ]  
Grad Student
Avatar
Rank
Total Posts:  45
Joined  02-10-2008

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

Profile
 
 
Posted: 18 January 2010 07:17 AM   [ Ignore ]   [ # 15 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  222
Joined  01-19-2009

tried the invisible captcha on a new site and get the same problem as before.
the Captcha is set up fine as normal.
I add the code specified above (directly copy and pasted, using the default “captcha” IDs etc) and the page loads fine - i see the question briefly before the JS hides it, but upon trying to submit a comment, I get the error message asking me to answer the question.

any ideas?

 Signature 

moogaloo.com

twitter | facebook | dribbble

Free Agent - invoicing, time tracking & accounting made easy - 10% off for life.

Profile
 
 
Posted: 18 January 2010 07:21 AM   [ Ignore ]   [ # 16 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  222
Joined  01-19-2009

Interestingly, if I remove the code above that hides the question and use it as an alternative Captcha to the image based one, it still doesn’t work (the product of 9 and 1 is 10 right?!!).

Which makes me wonder if its not so much the JS completing the question thats not working but the actual extension itself thats not working…

 Signature 

moogaloo.com

twitter | facebook | dribbble

Free Agent - invoicing, time tracking & accounting made easy - 10% off for life.

Profile
 
 
Posted: 25 January 2010 01:41 PM   [ Ignore ]   [ # 17 ]  
Lab Assistant
RankRank
Total Posts:  117
Joined  10-07-2007

I just installed this and got it to work, following Mudpuppy’s instructions.  I had forgotten that I have to submit the settings even if I don’t want to change the default settings.

Moogaloo, try loading a page with the captcha, with js disabled to see the question.  Then look at the exp_captcha table in your database.  Look for your ip… does the answer its looking for match the question?  If not, or if there is no row for your ip, then yes something is failing in the extension.

I remember we ran into captcha problems when browser session information would get confused.  Try clearing user data from your browser, restarting the browser, and load the captcha page again.

Profile
 
 
Posted: 10 February 2010 01:03 PM   [ Ignore ]   [ # 18 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1420
Joined  03-05-2008

experiencing the same as Moogaloo here - did anyone find a fix… going to test the result stored in the table and see what happens…

 Signature 

ModeTen Designs - @ModeTen - Stock Photos & Vectors

Profile
 
 
   
1 of 2
1