RSS RSS feed | Atom Atom feed
Popular Articles: Tom Riddle's Magical Diary | AJAX Lego Robot | AJAX CAPTCHA | SQL Multisets

Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Background

This article shows one way to use AJAX along with a series of images to create a secure CAPTCHA system. CAPTCHA is a way to tell humans and computers apart and is used all over the web, especially if you're signing up for new email accounts.
For more background information and definitions, see http://en.wikipedia.org/wiki/Captcha

Building an AJAX CAPTCHA

  1. First a database of images is compiled. Each image is tagged with attributes of the image. For example an image of a boy holding a toy brown dog in his hands could be tagged with the following attributes.

    HAND, DOG, ANIMAL, BROWN, BODY PART, FINGER(S)

    And an image of the behinds of two zebras can have the following attributes.

    ZEBRA, STRIPE(S), ANIMAL(S), TAIL(S)

  2. Next step requires picking a subset of the images in the database. The images in the set should share at least one attribute, but no image should have all of its attributes equal to a subset of another image's attributes.
  3. This step is not necessary, but is included just as a way to bring security up one notch. A point inside each image is randomly generated and added to the image (notice the pink dots in the images).
  4. The user is presented with a sequnce of images to connect, using the images above, a sequence could look something like this
    1. First Image: ANIMAL BROWN HAND
    2. Second Image: ANIMAL STRIPE
    The reason why the images should have as many shared attributes is now obvious since it makes the matching process harder.
  5. User connects the images in the sequence by dragging the mouse between the randomly generated points.
  6. Each mouse movement is sent back to the server in a small AJAX request and stored in the session. When the user releases the mouse button, a pattern processing algorithm will try to match the user's mouse trajectory with what an ideal one would look like and decide if it was a good enough match.

Try It!

Connect the images in the sequence below by dragging your mouse between the images pink spots while keeping the mouse button pressed. While reaching the last spot, release the mouse button. After a successful sequence drawing, a message will be displayed. Remember to keep the left mouse button pressed all the time while drawing the sequence.
  1. ANIMAL, COSTUME, BOY
  2. ANIMAL, PLASTIC, SMILEY
  3. ANIMAL, AFRICA, TALL
  4. ANIMAL, BOY, DOG
 
 

The Correct Sequence

Did it work? If not, here is the right sequence.

Drawbacks

  • Regular word/image CAPTCHAs are so far much easier for the user. However, when computer intelligence becomes smarter and smarter. Going to more complex CAPTCHAs will be inevitable.
  • High coordination requirements. Connecting the pink dots with the mouse require much patience and coordination. A much easier variant would have been to simply have the user click on the images in the right sequence. But I tried to implement a version with as many security features as possible and reusing the ideas of image passwords
slashdot digg del.icio.us technorati [more]



Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I couldn't do it... too difficult! And the error message would scare me off on a real site very quickly. Cheers...

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Ooops. I've made it little eaiser now. "Please Try Again"

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

324 Nice meeting you human! You are certified human!

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I failed all three of the tests...looks like you've either got some kinks to work out or some user interface friendliness to develop. This sort of reminds me of the different ways of recognizing a "selected" link over at dontclick.it.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

This is way too complicated to use as a CAPTCHA system. a CAPTCHA shouldn't be a complex game or trial. It should be something simple that a human can perform _easily_ but for a computer to find difficult. This is a perfect example of Ajax being used just for the sake of it being used. There are problems with current CAPTCHA systems, but this is ridiculous.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Can't get it to work.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

which one is #4 annimal boy dog, and how do the pink dots come into play? This example is truly awful and frusturating

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

i couldnt get it to work.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I agree, this is AJAX for the sake of using AJAX. I can't get it to work even AFTER you posted the "solution".

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

While I agree this isn't the most user friendly model out there and I myself had problems with it...bravo for being innovative! I'm glad to see someone on the proactive and not the reactive side of internet security. Keep at it and maybe one day I'll be using an AJAX based image CAPTCHA for blog comments and think nothing of it :)

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

great idea, but fails in the implementation. after 10 attempts at connecting the correct dots, i just gave up. looks like it may need some refinement to allow a greater margin of "error" in mousing the correct paths.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Since there were so many of you who didn’t get it to work i looked into it and it was due to some browser issue which is fixed now. I also relaxed the sensitivity some. I've verified that the new implementation works on IE6 and Fire Fox and on multiple operating systems and machines.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Cool!It worked for me.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I couldn't see the pink dots on all the pictures only some of them and that was confusing. I'm color blind. Overall I think it's pretty cool, though.

Keeps out the bots *and* the humans

Sorry, but I couldn't (a) comprehend the instructions in a short enough time to be worth the trouble for 99% of the tasks I do online, (b) find the picture of a boy and a dog (that fuzzy brown thing is a dog?!), (c) see the pink dots or (d) use my x-ray vision to see past the box that Firefox pops up when I click and hold over an image. Any one of those would have blocked me, and I'm not even disabled...

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I got it to work fine, after a bit of tinkering around a couple of times. I have been considering something like this for a long time, and I think this is a great step, but here's a couple ideas to make it easier. 1) Clarify that 1, 2, 3, 4 are three attributes of the same image. Or better yet, just use on attribute, and simplify the images. 2) Instead of connect the dots, just have people click on an image, store the click coords, then have a submit button that checks the coords to see if they are valid. Just a couple of thoughts, but a great thing you have here.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

When adding additional steps (I started with the zebra's, and then did the correct sequence) to the correct sequence, you get certified as human also. Don't know if this is expected behavior.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Nice idea... unless you're colorblind like I am... I just can't see the motherf***ing pink spots in the first place! I hope this kind of "security" feature won't pick up or I'm dead. I'll never be able to log in anywhere. And what if I was completely BLIND? Or if I was disabled, using a special pointing device, with little accuracy.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Good points, which is why a solution where you simply click the images in the right sequence instead of connecting dots (as mentioned in the blog entry and suggested by a commenter) is more viable. Arguable the pink dots are hard to spot even for non color blind people.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

This kind of idea is well beyond the processing power of standard servers today. The reason it doesn't work too well (if at all, because i couldn't get it to work either) is probably because your not catering enough for inaccurate -human- hands. This technology comes into relation with bio-metrics, and can require neural-networking for processing, just to cater for more than 1 user, and thus more than 1 password. The algorithm for detecting the user entry needs massive refinement, and that applies for the first part of these articles with the mouse gesture recognition.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Just as a reminder, this is a proof of concept implementation with many rough edges.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I think this is a great idea and a good proof of concept.  Obviously as it was stated in the article, this has some high hand-eye coordination requirements for users - so I don't understand what all the fuss is about.

I am sure the intent is not for people to just copy and use the example as is - that would be silly as we all know the usability issues.

I think using AJAX in this concept is great. 

I enjoyed the article - will wait to see the next version of this with more usability improvements.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Nice. Can work with some minor mod. Touchpads aren't the best devices. Like the idea, but one has to find common ground in the tags and the pictures. A cup in England is not a cup in America, is not a cup in Mozambique, is not a cup in Vietnam. Clikcing can work, but using single coloured pic and single coloured pic with a big dot for a path capturing and sifting the big dot points could work just as good. Just a thought. Will be hacking at the idea.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Was cool. I did get it to work. But I still think it's too complicated for the normal user.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I like it, might be easier for people if you put clipart instead of actual pictures. You could put three clipart pictures in each block and name the three in the steps. Also maybe make the dot a little bigger or make it an asterisk or something. Cool idea, though.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

I like your proof of concept but I like the concept more. You should segregate your experiments I think the exercise will give each of the underlying concepts clarity. Also if you are able to isolate specific accessability issues you will be more likley to compose a sucessful security stack. Which could be distributed moduraly. Assurance identy pivacy etc. Oh and Ajax should be used for it own sake! Like poetry the Internet flows smoothly when information is concise and latent with meaning not data.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

Too complex to be usefull. I would prefer to find another resource than trying to solve this puzzle.

Re: Using AJAX with CAPTCHA - AJAX Security Part 3 of 3

awful. impossible. i just spent the last 10 minutes trying to do it.

Add a comment Send a TrackBack