WebAppers

/ best free open source web resources /

Shopify

Drag and Drop Ajax Fancy Captcha jQuery Plugin

Posted · Category: Forms, License Free

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from spammers. It is a new intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.

jQuery Fancy Captcha

Requirements: jQuery Framework
Demo: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha…
License: License Free

38 Comments
  • flux

    incredible… it’s awesome idea

  • http://www.cluboholic.com kyriakos

    is it just me or this would be ‘extremely’ easy to crack?

  • http://www.danhbaweb20.com Danh ba web 2.0

    Thanks for post. It’s great
    Good luck to you !

  • Pingback: Captcha genom drag and drop -snyggt - Devsol

  • Pingback: Drag and Drop Ajax Fancy Captcha jQuery Plugin | Web Resources | WebAppers | Helgi Hrafn Halldórsson

  • Pingback: Un captcha en Drag n' Drop avec jQuery | LoïcG

  • Pingback: Lenguajes X » Ajax Fancy Captcha: ajax interactivo con jQuery

  • http://www.webappers.com/ Ryan Williams

    Seems a bit unnecessary to me. If you’re going to require JavaScript to post a form, haven’t you pretty much stopped comment bots right there? Why have the puzzle too?

  • http://jpscaletti.com JpScaletti

    With this “captcha” a comment both has a 20% (1 in 5) chance of success… How is this “medium” security? How is “security” at all?

  • http://www.typoblog.ch typoman

    I like the new way of programming a captcha.
    cool!

  • http://KyleFarris.com Kyle

    Yeah, this seems like it would be very easy to work around if you were a comment bot seeing as you have a one in 5 chance of getting it right.

  • http://KyleFarris.com Kyle

    Oh… and there’s only ONE draggable element. I seems like it would be quite easy to simply trigger the “dropped” event for the drag-able element. It’s really pretty and very user friendly (trust me I don’t really like those ‘type out what you see’ things either…), but, again, this just seems to easy to work around.

  • Pingback: Ajax Fancy Captcha: ajax interactivo con jQuery | dominios, diseño web, ecommerce - Mantis Technology Solutions Blog

  • http://www.evanbot.com Evan Byrne

    I agree with kyriakos, this looks like it would be very easy to crack. Captcha pretty much has to be done with a server-side script like PHP in order to be secure.

  • http://www.fedmich.com fedmich

    Cool, I love it ^_^

  • http://www.brutallegend.net/ Ryan Williams

    Like I said above, the fact that it’s entirely produced with JavaScript negates the whole problem of crackability because the bot won’t even see the form.

    The form is unnecessary because the JavaScript requirement in itself will stop pretty much any bot. This is just an exercise in superfluity, to be honest.

  • http://www.evanbot.com Evan Byrne

    @Ryan: The ‘hackers’ script can simply submit straight to the back-end script, it doesn’t have to read the form on the web page at all to do that.

  • http://www.brutallegend.net/ Ryan Williams

    Oh. I assumed there’d be something in the back-end that’d actually check for the passed variable, but obviously I’m overestimating the complexity of this script.

    Seems to be a complete waste of time on every level, really.

  • splatzone

    What about bots that run using an embedded browser? I’ve seen and tried them out (Not for anything malicious, of course).

    How can Javascript stop them then?

    I really like this, but I think it needs to be improved on a little.

    Add another dropdown box or something and say “Drag the pencil into the RED box”.

  • Pingback: Ajax Fancy Captcha: ajax interactivo con jQuery | Descargar Ajax Fancy Captcha: ajax interactivo con jQuery | Gratis Ajax Fancy Captcha: ajax interactivo con jQuery | BlogGraphic.com - Templates - Themes Worpress -Tutoriales - Scripts - Vectores - Potosho

  • http://koowiihost.com/web-development/all-in-1-packages/ KooWii

    I love this tools. This can easily differentiate comments from a human being and spams. Less time is needed for comments moderation then. Save our time and we can focus on something else.

  • http://buycarandsellcar.com buycarandsellcar.com

    Thank you. It looks really cool

  • http://www.onlinehungama.com/ Rakshit

    I tried the script, but see a weird behavior. I get the images in the array.. though the image that should be dragged does not appear. Instead the default image of item-none(the book) appears. Can you please help?The script is surely impressive and a visual treat.

    nobody is giving solution. everybody is busy in saying nice scrpit , good idea …etc..

  • http://www.adarshkp.com Adarsh K.P.

    Rakshit, pull out the random number generator else part from captcha.php, create a new php file and put in that code there. Set this page name for variable ‘url’. This will fix the issue.

    This was because the captcha.php is returning value ‘failed’ in jquery.captcha.js. You can check by alerting the variable ‘rand’ in the same js file. :)

  • http://mister7.com Laszlo Dobos

    Rakshit,

    Yes, I found a bug in the captcha.php file and I’ve solved it. You can now replace the content of the captcha.php to this:

    That’s works for me! I hope this helps!

    Laszlo Dobos

  • http://mister7.com Laszlo Dobos

    my php code was deleted, sry!

  • http://tympanus.net/codrops Chad

    Heres another fancy one, its not that fancy but also draggable :
    http://tympanus.net/codrops/2009/09/08/jquery-fancy-draggable-captcha/

  • http://www.thedindigulonline.com dindigul

    Just put the correct icon next to the last icon with aligned in the same line, you will get “passed” even though it is not dropped inside the circle.

  • http://www.bestcarfinder.com RK

    Can’t wait to use it in one of our projects. Thanks

  • http://www.modernization.co.ke Athman Mohamed Athman Ali

    Check out this mash I made to come up with a new concept called FACTCHA… to popularize the Millenium Development Goals. But it can be used for any data… runs off a database. Added encryption/secret-key and secret sessions to make the CAPTCHA more secure to allay fears raised above about how easy it would be to crack. Preparing a mini-site where files can be downloaded and will be available in the same location as the demo below … very soon! :D

    http://demo.modernization.co.ke/factcha/client/form.html

  • http://www.modernization.co.ke Athman Mohamed Athman Ali

    Just for more info and for comments on whether what I ahve done makes it more secure, what i tried to do to make FACTCHA work as:

    1. Client registers to download script. Is issued with an application key and a secret key. They put this in config.php in the downloaded files as configuration.

    2. Client’s user loads form, which has not submit button or location of submit processing PHP file for the form. The FACTCHA calls a local server script captcha/captha.php which in turn does a file_get_contents(“http://someserver.com/captcha.php?site_key=”) where is the one in the config file.

    3. someserver.com/captcha.php uses to check into its DB if this is a registered site, if not it returns an error code. If registered, then it calls the Millenium Development Goals database, formulates a and a , encrypts them using the site’s retrieved from database authentication and also generates an and sends it back to client server.

    5. client server receives info, decrypts using its from config and sets the appropriate sessions using the access_token passed from server.

    6. user drags and drops the correct icon, the data is saved into a hidden element whose names is earlier generated by server. this is to ensure all these elements are unique. The submit button is displayed and the submit processing form is attached to action_tag of the . Also, the fact obtained from database earlier is displayed.

    7. On submission, the client captcha/captcha.php checks against the sessions set earlier and only if correct forwards the form for processing.

    I was hoping:

    1. By making sure the hidden input is randomly named, then it would be harder to have a bot look for it.

    2. Even if it does look for it, the names of the sessions storing the data to be compared against are random.

    3. Even if the form was submitted by the bot bypassing all the fancy stuff, the sessions which are named randomly have to be checked correctly for the form to be processed.

    4. The encryption bit using secret keys for data passing between ajax client and client captcha/captcha.php and between server’s captcha.php and client’s captcha/captcha.php will not allow anyone to read the data directly by just calling up those scripts on the browser.

    5. The database could as well have been on the client, but for ease of maintenance i put it on its own centralized server… hence all FACTCHA’s everywhere will have to connect to this server. Maybe statistics could be obtained from it?

    I may have missed the boat completely :D but comments are welcome for improvement.

  • http://www.wozia.pt Wozia

    An improved and more secure (much more difficult to hack) version built from us from scratch, based on this concept is called wCaptcha and can be seen at http://wcaptcha.wozia.pt

    More info and usage at http://www.webdevlabs.net/2010/09/wcaptcha-better-captcha-alternative.html

  • http://www.meratvforum.org Tv Serials

    This is a great captcha, but I have still two questions.
    1. I’m controling my fields in javascript, before starting another phpscript to save my fields. But how do I check if the image is dropped?
    2. When there’s a error occured on one of the fields, the submit will be canceled. How do I reset the captcha with a new random set of images and no image dropped?

  • http://startvforum.blogspot.com Star Tv Forum

    his is a great captcha, but I have still two questions.
    1. I’m controling my fields in javascript, before starting another phpscript to save my fields. But how do I check if the image is dropped?
    2. When there’s a error occured on one of the fields, the submit will be canceled. How do I reset the captcha with a new random set of images and no image dropped?

  • http://desitvtube.blogspot.com Desi Tv Tube

    Just for more info and for comments on whether what I ahve done makes it more secure, what i tried to do to make FACTCHA work as:

    1. Client registers to download script. Is issued with an application key and a secret key. They put this in config.php in the downloaded files as configuration.

  • Chad E

    One line of code solves the drag-n-drop captcha:

    $(‘.ui-droppable’).droppable(‘option’, ‘drop’)()

    So it actually makes it easier for automated attacks. I guess it’s only meant to slow down attacks by really dumb people.

  • Chad E

    The wCaptcha by wozia is better, but not by much. At least the source code is obfuscated, but on the other hand, you can simply do it once manually to observe what it is going to do, and then you can write a simple jQuery hack to foil it.

    var key = $(‘.wozia-captcha strong:first’).text().toLowerCase();
    var data = {draggable: ‘.wc-’ + key};
    $(‘.wozia-where2go’).droppable(‘option’).drop(null, data);

    If the keys were randomized for each icon, and stored with the jquery data() method rather than as an attribute, it’d make it a bit tougher, but there’d still be a 20% chance to get it right with automated randomized guessing.

    Athman’s solution has the same issue as the other drag-n-drop capcha: it’s not testing to see if the correct item was dropped, it just assumes that it was. So the same simple foil works:

    $(’.ui-droppable’).droppable(’option’, ‘drop’)()

  • http://www.wozia.pt/ Wozia

    @Chad I believe you’re not talking about the latest wCaptcha version, 2.0 which even supports mobile devices now.

    The older versions had that problem you’re talking about, though.

    Basically all the verifications are checked only on server-side, so the script allows you to put anything on it.

    It is true, however, that by automated randomized guessing it’d be possible to find a solution. That’s why we implemented the nonce in it (like WordPress does it).

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons