MotionCAPTCHA – Stop Spam, Draw Shapes

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

Update: I’ve scheduled a code jam day to smash out the next version of MotionCAPTCHA and a full advice/implementation guide, so if you’re keen to use this anywhere, head over to the Github page and hit ‘watch’, or subscribe to updates via RSS

Also, I didn’t make that video demo of MotionCAPTCHA – if I had I definitely would have used better music. Just sayin’. Thanks to whoever did though!

Version 0.2 adds mobile-support, so if you’re on mobile, you can now play with the demo!

At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and doesn’t really have IE support – but the next releases will feature progressive enhancement and the ability to use this in production environments as a serious CAPTCHA alternative

MotionCAPTCHA in action

DemoCode on Github

tl;dr – this plugin is mostly a proof of concept for now, but check the roadmap to see the status and plans.

How It Works

In the next major release, the plugin will use progressive enhancement so that the form uses a standard server-side (e.g. PHP) CAPTCHA script, and then on page load, the plugin switches that for the Motion CAPTCHA canvas, only if the browser is grown up enough.

For now, here’s how it works (if you need a step-by-step guide, there’s a How-To below):

  • You manually disable your form, by emptying the form’s action attribute, and placing its value in a hidden <input> with a specific ID. You should also put disabled="disabled" on the submit button, for added points.
  • You add a few HTML lines to your form to initialise the MotionCAPTCHA canvas, and add the plugin’s scripts to your page.
  • The user draws the shape and, if it checks out, the plugin inserts the form’s action into the <form> tag. The user can submit the form, happy days.

I know this is going to be unpopular in its current state, because you’re making it impossible for people to submit the form without JavaScript or Canvas support – BUT, who gives a crap, it’s fun. And in future, it’ll degrade gracefully, etc etc.

Technology / Credits

The MotionCAPTCHA plugin combines one of the brushes (‘Ribbon’ – and a lot of the logic) from Mr Doob’s Harmony canvas experiment, with gesture recognition algorithms and vector shapes based entirely on the $1 Unistroke Gesture Recognizer by Jacob O. Wobbrock, Ph.D. and Andrew D. Wilson, Ph.D., and the later Protractor algorithm improvement by Yang Li, Ph.D.

The idea originally came from Paul Irish’s blog, where he combined the Ribbon brush and the Unistroke recognizer on the background of his site – you get a pretty special easter-egg if you draw a star. Great song.

In my book, all of these people are ace – I just borrowed from them and spliced their works into one unholy mess (actually it’s fairly tidy, though I’m hoping people will suggest performance improvements.)

Also credit goes to Orman from Premium Pixels, I borrowed much of the demo page’s design from one of his awesome free PSDs.

Roadmap

v0.3

  • Try to fix up IE support via excanvas or similar library
  • Add a real functionality for a ‘new shape’ button (a shape-switcharoo method)

v1.0

  • a) Combine with a simple PHP CAPTCHA and server-side checking script, for progressive enhancement. By default, form is submitted with regular CAPTCHA. On page load, if browser supports JavaScript and HTML5 Canvas, regular CAPTCHA is switched for mighty MotionCAPTCHA, and that would be checked on the server instead.
  • b) See (a).

v1.1

  • Perform (or add option/scripts to perform) server-side validation of the vector shape drawn by the user.

Changelog

v0.2

  • Added mobile support for current functionality. Should work in Android and iOS (iPhones/iPads) now.
    A few speed improvements and code cleanups.

How To Use

  1. Add the plugin scripts: (I’m using jQuery 1.6.x from the google API, but you could load it locally – and MotionCAPTCHA is supported down to jQuery 1.4):
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script src="jquery.motionCaptcha.0.2.min.js"></script>
    <link href="jquery.motionCaptcha.0.2.css"></script>
  2. Code the form as usual, with a unique ID (eg. ‘#mycoolform’) and set the form action to blank (or ‘#’) – eg:
    <form action="#" id="mycoolform" method="[get/post]">
  3. Add this placeholder <div> element to your form (NB. use <fieldset>s if you need it to validate) containing the blank canvas:
    <div id="mc">
        <p>Please draw the shape in the box to submit the form:</p>
        <canvas id="mc-canvas"></canvas>
    </div>
  4. Disable the submit button, eg:
    <input type="submit" disabled="disabled" value="Submit Form" />
  5. Add a hidden input to the form, with the form action as its value. Give it either a unique id, or the id ‘mc-action’, like so:
    <input type="hidden" id="fairly-unique-id" value="submitform.php" />
  6. Call the plugin on the form element. If you used any other ID than ‘mc-action’ for the hidden input, you’ll just need to pass it to the plugin, like this:
    $('#form-id').motionCaptcha({
        action: '#fairly-unique-id'
    });
    
    // Or, if you just used 'mc-action' as the hidden input's ID:
    $('#form-id').motionCaptcha();
  7. Other options are available (defaults are shown):
    $('#form-id').motionCaptcha({
        // Basics:
        action: '#mc-action',        // the ID of the input containing the form action
        divId: '#mc',                // if you use an ID other than '#mc' for the placeholder, pass it in here
        cssClass: '.mc-active',      // this CSS class is applied to the 'mc' div when the plugin is active
        canvasId: '#mc-canvas',      // the ID of the MotionCAPTCHA canvas element
    
        // An array of shape names that you want MotionCAPTCHA to use:
        shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],
    
        // These messages are displayed inside the canvas after a user finishes drawing:
        errorMsg: 'Please try again.',
        successMsg: 'Captcha passed!',
    
        // This message is displayed if the user's browser doesn't support canvas:
        noCanvasMsg: "Your browser doesn't support <canvas> - try Chrome, FF4, Safari or IE9."
    
        // This could be any HTML string (eg. '<label>Draw this shit yo:</label>'):
        label: '<p>Please draw the shape in the box to submit the form:</p>'
    });

The Next Step

Please try out the Motion CAPTCHA demo, check out the Github repository, suggest improvements and report bugs – if you’re interested in seeing this become a real, production-ready CAPTCHA alternative, I’d love to get some help so fork the project and submit some pull requests!

Comments, love & hate welcome.

167 thoughts on “MotionCAPTCHA – Stop Spam, Draw Shapes

  1. Aaron

    Nice concept but not practical. Not usable on any touch based device, and may cause problems for visitors who have problems with motor skills.

    Reply
    1. Joss Post author

      Thanks for the feedback, although may I suggest you read the docs and watch for the next version which will enable touch support and mobility assistance!

      Reply
  2. AERTS Armel

    Great captcha idea. I am not a fan either but such geometric/drawing form validation is an awesome stuff and brings a tiny touch of design too.

    Keep it up the idea.

    Reply
  3. good luck

    the arrow is annoying.

    Doubling back on yourself , doesn’t really work , from a user point of view.

    everything else is cool tho

    Reply
    1. Joss Post author

      Noted – the plugin method gives you the ability to choose which shapes are used, so it’s a cinch to disable the arrow, if you want to save your users the hassle of doubling back on themselves.

      Reply
  4. Darwyn4

    It’s way better than classic captcha. It’s even fun.
    I have no trouble with the arrow, the circle is a bit annoying, though
    I can’t wait to see this on regular websites!

    Reply
    1. Joss Post author

      Thanx! Watch the github repository, I’m hoping to get a production-ready version up within a month. Would love any contributions/pulls!

      Reply
    1. Joss Post author

      Great! Let me know how you get on – although I recommend waiting for the next release before using this on a live website.

      Reply
  5. RobIII

    How is this going to stop anything other than “human spammers” (which are close to non-existent compared to spam-bots anyways)? Any decent bot will (in time) just retrieve the “hidden” URL and use it to post it’s spam to. It doesn’t care if it has to parse the action attribute or some other field to get the URL to post the data to.

    If you want this to be of any use at all, you’ll need to send the strokes themselves (or a “fingerprint” or “hash” of them) to the server and let the server decide whether the captcha is passed or not.

    Reply
    1. Joss Post author

      Might I suggest you take a moment to read the readme, and specifically the roadmap?

      I appreciate your feedback, but rest assured, your concerns have been addressed, so I also suggest that you hit ‘watch’ on the github repo and check back after v1.0!

      Reply
      1. RobIII

        I’m sorry but the readme nor the roadmap mentions this problem. It simply states standard yaddayadda about “progressive enhancement” but it doesn’t address the fact that you need to send the actual “user drawing” (or a “fingerprint” or “hash” of it) to the server to validate the captcha.

        I did read “a) Combine with a simple PHP CAPTCHA and server-side checking script, for progressive enhancement. By default, form is submitted with regular CAPTCHA. On page load, if browser supports JavaScript and HTML5 Canvas, regular CAPTCHA is switched for mighty MotionCAPTCHA, and that would be checked on the server instead.” but that doesn’t make it very clear (to me at least) that the MotionCAPTCHA _itself_ (the user-drawing) is validated server-side.

        I do appreciate and like the out-of-the-box thinking. Don’t get me wrong. And if what I’m suggesting is on your roadmap then consider my comment as never posted and please accept my mea culpa ;-)

        Reply
        1. Joss Post author

          Ok, thanks for the reply, and you’re right about the roadmap not being clear. I’ll update the roadmap to make it clear that the plugin will use server-side validation!

          Reply
  6. Aaron Swartz

    Is there any reason to believe that you can’t write a program to simulate shape drawing? It would seem to be an incredibly easy task — just trace the pattern but add some noise.

    Reply
    1. Joss Post author

      Not a massive issue as far as I’m concerned – check out the roadmap to see why – thanks for the feedback though, I appreciate any comments.

      Reply
      1. anders

        Your roadmap just says “Perform (or add option/scripts to perform) server-side validation of the vector shape drawn by the user.”

        Which doesn’t address at all how the validation at any step will actually weed out scripts from humans, which is what matters.

        The entire point of a CAPTCHA is supposed to be that it’s a problem that’s significantly easier for a human to solve than a program. This MotionCAPTCHA approach honestly looks like the opposite. Writing a program to look at the shape given and spit back a tracing with a bit of randomness added would be trivial.

        Reply
        1. Joss Post author

          Noted – but I don’t think that’s a massive concern, especially if progressive-enhancing up form a default PHP-based CAPTCHA. In any case, these kinds of points are academic until I’ve finished a working demo of the full release, v1.0, at which point I’d love to address these kinds of concerns.

          Reply
          1. anders

            It’s not academic when it fundamentally doesn’t address the issue.

            You seem to just not understand what CAPTCHA’s are for; what problem they are meant to solve. Most CAPTCHAs out there are OCR based because no one has yet figured out how to do OCR programmatically as reliably as a human.

            A fallback standard CAPTCHA doesn’t make sense. If MotionCAPTCHA is trivial for a spambot to solve (and I think it is), then spambots will hit that instead of your fallback CAPTCHA. It’s like having a steel security door on your house but leaving the window next to it open. The burglar will just go through the open window.

          2. Joss Post author

            Thanks for your comments – I think the key point to note here is that the “open window” is invisible to the “burglar” as the burglar most likely doesn’t have javascript switched on (man, extended metaphors)

            Spam bots would only see the PHP optical recognition CAPTCHA. If they were using a headless environment like phantomjs, or even bootstrapped like JSDom, then it’d definitely be an issue – which is why it needs some consideration.

            But shit, man, we’re developers – we come up with ideas, build them fast, and fix them later. If you have a contribution to make, your pull requests would be greatly appreciated – otherwise, like I said, these kinds of things will be addressed. Watch the repo and let me know if you have any feedback when it hits a more stable version!

          3. anders

            “Spam bots would only see the PHP optical recognition CAPTCHA. If they were using a headless environment like phantomjs, or even bootstrapped like JSDom, then it’d definitely be an issue – which is why it needs some consideration.”

            I don’t think you understand how spambots work. 1) making a bot execute JS is easy. There are dozens of embeddable JS engines out there like Rhino. 2) even that small amount of work is usually unnecessary since it all comes down to HTTP. The spambot just has to send requests that mimic what a browser running javascript would send. Spoof the user-agent string to be the same as Firefox or IE so it gets served the page with the MotionCAPTCHA instead of the standard ones, parse out the shape from where it’s specified in the JS code, generate a “human” response algorithmically, and send that response to the server that’s verifying it.

            I think this tracing stuff and shape identification is neat and could have applications, eg, for learning Kanji, etc as someone else suggested. But it’s fundamentally useless as a basis for CAPTCHAs. No patch to your code will fix that.

          4. Joss Post author

            “Spoof the user-agent string”

            It would use client-side detection, so really sending a JS-enabled bot/crawler would be the only way. UA strings wouldn’t come into it I’m afraid.

            I’m still not losing any sleep over this – it’s a fun alternative that will be good enough for 90% of cases, not a plutonium-grade security device :)

            I think you’re being a killjoy, but I do appreciate your input nonetheless – helps me shape up the future of the project.

        2. Austinkir

          Didn’t your mamma ever teach you that if you don’t have anything nice to say don’t say it at all? ;) While you are technically correct (I see your point), only if this became some-what mainstream would spammers invest the time to create something to bypass this. This idea is frickin awesome and it’s out-of-the-box ideas like this that truly advance the boundaries of the web.

          Reply
  7. Craig

    Does the demo pages submit button enable when the capcha is successfully drawn? If so then this is an incredibly difficult capcha to pass as I have yet to enable the submit button and have made many attempts on many images

    Reply
    1. Joss Post author

      Thanks for the feedback. Yes it does – in the full release version, it will have an option to switch to a default text-based CAPTCHA instead.

      Reply
      1. Craig

        That seems a good way to solve that issue, it is certainly much more fun failing this capcha than others

        Reply
  8. Advait

    Can you make a threshold for the person using this, because I tried a demo and even if I am off the actual line it accepts it

    Reply
    1. Joss Post author

      Interesting point – it actually does use a threshold, the gesture matching algorithm gives a score which is checked in the JS code (for now) – there are probably better ways to do this, but as I’ve said before, it’s a concept piece!

      I think leniency is better though – it’s meant to be fun as much as anything.

      Reply
  9. Fahar

    I just love this! can’t wait to see the next version, hope i can put it on my blog… wish i could help out but wld probably break it.

    Reply
  10. Jamie

    Great idea – nice lookin’ demo too – shame its not ready for use yet..

    i reckon you could improve on this with a picture in the bg (like the moon for the circle) and u have to trace the moon’s outline etc.

    Really promising stuff keep it up!

    Reply
  11. Mike Fisher

    As others have pointed out, this concept does not work as a CAPTCHA. A CAPTCHA must be a task that is easy for humans and difficult for computers. However, the task of tracing lines is very easy for computers–either accurately or with some random offsets in timing/accuracy.

    Reply
    1. Joss Post author

      If you’d taken a look at the write-up and roadmap, you’d understand why this isn’t a concern right now. Thanks for the comment though!

      Reply
      1. Evan Byrne

        Regardless of what your roadmap says, Mike makes a very valid point. It will always be easier for a computer to trace lines than humans. Not to mention the fact that it would probably be easy to brute force as well.

        Don’t get me wrong, this is a really cool concept and all, but unfortunately it has very little real-world use. Great job on it though! It’s always nice to see people exploring new ways to make security less intrusive.

        Reply
        1. Joss Post author

          Thanks for the comment. I respectfully disagree – stopping spam is not rocket science: spammers and spam bots will always take the path of least resistance, to get the most bang for their buck.

          I would recommend using this, once it’s been improved to include a PHP CAPTCHA to stop 99% of bots, alongside a service like Akismet. And if one genuinely requires plutonium-grade security on one’s blog (unlikely) there are plenty of more secure options. Thanks though!

          Reply
  12. Faith

    This fundamentally defeats the purpose of a CAPTCHA as it’s trivial for a computer program to bypass it. It’s fun, nevertheless.

    Reply
  13. Robotman321

    Awesome concepts.. Cannot wait to see them in production settings.. i’ll be watching and will be first in line to implement them on my sites :)

    Reply
    1. Joss Post author

      Awesome! I’m planning to add a few features in 0.3 and work on IE support (blah) this weekend – then after that, going to build it up from scratch based on a traditional PHP CAPTCHA, which could take a month or so since it’s an evenings/weekends project.

      I’ll be opening issues on Github and hopefully people will be able to contribute some patches!

      Reply
    1. Joss Post author

      Thanks Tony! Yeah I have a lot of ideas for how this could develop on mobile in the future.. really glad I managed to wrangle the touch gestures into 0.2. Keep watching!

      Reply
    1. Joss Post author

      Hey Alex, I’m hoping to have a production-ready version (at least a beta release) by the end of August. Keep watching the github repo for updates!

      Reply
  14. Quiark

    As noted above, I think it cannot be used as a CAPTCHA. But you could use shapes to log in to a site. Just pick your very own shape and draw it to log in. Again, it may not be the most secure thing ever.

    Reply
  15. Matt

    There’s a problem, at least on Firefox where if you pass the captcha and then refresh the page the submit button remains enabled even though the captcha reverts back to being pre-solved.

    Matt

    Reply
    1. Joss Post author

      Ah, good catch – I’ve seen that before, I believe it has something to do with how Firefox remembers the state of the form you’re filling in (for usability) and this ‘remembers’ that the submit button is enabled.

      Tbh though, the entire authentication method will likely change in the next version, so I’ll address it then. Cheers!

      Reply
    1. Joss Post author

      Thanks Andrew! Means a lot to have so much positive feedback, despite it being an early-stage project.

      Reply
  16. Andy Shora

    Joss,

    This is the best captcha plugin I’ve seen, I work in Data Security and I’ve seen a lot.

    One little thing…

    Step 6 in the ‘How To Use’ section, you need to make the plugin call camel-case, as the function is defined as motionCaptcha, not motioncaptcha.

    Again, fantastic work!

    Andy

    Reply
    1. Joss Post author

      Hey, thanks Andy, that means a lot! Thanks for the heads up about the instructions.

      Do watch out for the newer versions, I’m really excited about making this actually secure for use on live websites. At the moment it’s still proof-of-concept.

      Joss

      Reply
    1. Joss Post author

      Well, it’s early days, but check back in a month or two and see. Right now it’s not recommended for production-use.

      Reply
    1. Joss Post author

      Thanks! Watch out for upcoming versions. Been really busy recently but hoping to get a production-ready version out within a month or so.

      Reply
  17. T

    Doesn’t work for me. Can’t see the shape it’s supposed to show, only when i draw something i can see the background…

    Reply
  18. Nathan

    Joss, people can use this today with no trouble if they pair it with modernizr. Just deliver it to those who can see it, and replace the feature for those who don’t. I love your idea and think people need to use it today. Don’t discourage people by saying it’s of limited use.

    Reply
    1. Joss Post author

      Hey, thanks for the support! And yeah, with Modernizr, it could be used today, but for security purposes, I’m not recommending it. I’ll probably change that in a few weeks when I’ve had time to work on it some more.

      Reply
  19. lubo

    far most exciting captcha, that i`ve seen. I realy like the way, that user doesn`t have to write something on the keyboard, but just like he wants to press submit button, he draws something simple before that, it`s easy, simple clear, and it perfect fits to what i try to find for a long time. i`m looking forward for next versions.

    Reply
    1. Joss Post author

      Thanks! Hope to have it ready soon. I’m also going to write a post covering everything I’ve learnt about CAPTCHA security from all the discussions this has generated, which would serve as a guide to “When should / shouldn’t I use motionCAPTCHA”.

      Reply
  20. dwieeb

    Hi, I just wanted to let everyone know that I’m gonna take a crack at writing a WordPress plugin for MotionCAPTCHA. I am waiting for version 1.0 for server-side checks. The plugin will work as a WordPress multisite signup spam blocker and regular WordPress registration and comment spam blocker.

    Very much looking forward to the next major release! Excellent work so far. Looks spectacular.

    Reply
    1. Joss Post author

      Sounds cool! I actually already have a WP plugin version I’m using in a test environment, just to work out the best way to implement it (options-wise etc.) when it hits full release. I’d love to collaborate on it, though, as I don’t have any experience in multi-site. I’ll get in touch when I have more and we can go from there!

      Reply
  21. Suneel

    Joss, Awesome awesome, just awesome.

    This will be great for touch screens. Will be watching closely for more updates for mobile devices. My webapp users will be thrilled when they see this implemented.

    Might ask you for assistance in a few days.

    Reply
  22. Juraj Rolko

    Hi Joss.

    Very interesting idea. But i am not sure that your principle meets the basic requirements for captcha. Why should it be harder for spambots to overcome this captcha compared to traditional text based captchas in general? It’s still some kind of shape recognition problem. In your case it is even easier, because you are actually sending a correct solution to the client. If you start using some “noise background”, it will be even harder for humans to solve. In your case, the biggest advantage is that it is fun and new.

    Don’t get me wrong, i appreciate your hard work. I have also created one new captcha concept. We are both developers and we are trying to offer new ideas to the world. And that’s important.

    Keep going. I wish you every success in your work.

    Reply
    1. Joss Post author

      Thanks for your comments, you’re very right that in its current implementation, MotionCAPTCHA doesn’t meet the requirements for a secure captcha.

      Support’s appreciated and if you want to help make this thing more real, I’d love feedback and contributions on the next development phase!

      Reply
  23. Adaptor

    Great! Anything that makes forms less annoying is an excellent idea in my book. Even if this turns out to be slightly less secure than text-based CAPTCHA’s, it’s better to give your users a better experience than marginally better spam protection.

    Reply
    1. Joss Post author

      YES!

      Also, I’ll generally recommend using this with Akismet or some other service to kill off any spam that gets through, but I can guarantee that using this (when it’s ready) will be 99% more effective against spam than having no CAPTCHA at all.

      Reply
  24. Daniel Pataki

    Hi there,

    Firstly the direction in step 6 is wrong, the function is not “motioncaptcha” it’s “motionCaptcha” :)

    Secondly, I think this is COMPLETELY awesome and unique. In its current state this is for sure less secure than some captcha systems out there. However, I really don’t care about spam, spam can easily be mass deleted. The real problem is when real people don’t submit a form because they have a problem with the captcha.

    This solves this in my eyes because it is unique and much more fun and intuitive (not to mention faster) than text based systems.

    Well done and thank you!

    Daniel

    Reply
    1. Joss Post author

      Thanks! fixed that typo.

      Thanks for your support, really means a lot – stay tuned as there are updates on the way in the next month or so!

      Reply
  25. Steve

    Hi Joss,

    This is truly a Great idea! If you can get the technical issues fixed, you will become the man who killed CAPTCHA…
    Every self-respecting website will change it’s dull and (very) frustrating CAPTCHA’s for this multi-lingual, fun and KISS (Keep It Simple and Stupid) system? and fast-o!
    I can imagine that abandon rates will drop significantly with this solution, and on any commercial website that’s what it’s all about… ;-)

    Thx- a-lot

    Reply
    1. Joss Post author

      Wow, some great accolades there – thanks!

      I’ve let it sit for a while but MotionCAPTCHA is definitely making a comeback soon.

      Reply
  26. whatgoodisaroad

    I fail to see how this serves as a captcha. Crawlers these days have JavaScript enabled and could trace the line much more easily than a human.

    The trick about normal captchas is that OCR is computationally hard. The spammer has to **convert** an image of text to text itself. The image isn’t important, but the meaning of the image is something that’s clear to humans and opaque to machines. The image isn’t the answer to the captcha, the meaning of the image is.

    In this case, the image is the answer. Computers are better at images than humans. No conversion needs to take place. This actually caters to spammers and makes it more difficult for legitimate humans.

    Reply
    1. Joss Post author

      Interesting that you say “Crawlers these days have JavaScript enabled” – I’d love to see any data or stats if you have any.

      Sure, crawlers that I write have JavaScript enabled – but: (a) I’m not trying to spam 100 million sites (loading a headless browser for each would be computationally and financially expensive) and (b) I’m not going to take the time to write a special program to trace a captcha (for, say, a few thousand sites), when I can instead write a program to solve letters (for, say, a few billion sites)

      Sure, I only write crawlers for testing and small-scale data collection, but I think it’s clear that most spammers are after the big numbers, not artistic perfection.

      Reply
  27. Mike

    I sent an email I think, but here it goes again lol

    My suggestion for improvement is to add a separate image or animation file apart from the drawing part, as future Captcha-breakers could just easily be coded to trace the image. If it’s separated, no tracing occurs. Or, do something like type “Draw the number “8″ to proceed” and show no trace lines.

    Just food for thought :)

    Reply
  28. Bhanu

    As i understand from the demo website, the authentication of the captcha is done at the client side (big no-no). Is there a way to verify it at the server side too. otherwise the entire captcha is broken by this line of code written to break it in the demo site.


    javascript: document.forms[0].elements[4].disabled=false; document.forms[0].action=document.getElementById("mc-action").value;document.forms[0].submit();

    Please enlighten…

    Reply
    1. Bhanu

      may be i spoke too soon. just went through your roadmap. I will wait for 1.0 to come out. It will be interesting to see how you will implement server side validation. will test once it comes out.

      Reply
  29. Oskar

    Hey! Sorry to sound like a PITA, but how are things looking with this?
    I’d really like to use this in a future project of mine, but can’t because of the lack of server-side verification.

    Thanks!

    Reply
  30. CristianTM

    Man, really. Sorry if my total repulse for captchas made me sound like a dick. And I also was on a bad day and was tired, I may have been too rude, sorry about that. But I think I had important points, so let me try again, ok? I would like to discuss and clarify some important points that I believe you need to consider on that project. Lets start again?

    First of all, what is a captcha for you?

    Captcha, by definition (you may check any source for that, even wikipedia), is a system that tries to distinguish between humans and computers. Understand that is VERY important. So, the system must propose something that a human can do easily, but at the same time a computer can’t, so it can tell the difference and identify if there is a computer or a human on the other site. If a computer can solve the captcha in an easy way, then it is useless. Note a captcha is not trying to identify a crawler, a specific system with javascript disabled, or whatever. It should only distinguish a computer (generic one) and a human.

    That assumption can’t be based on (that also can be easily found on the literature about captchas):

    1) the lack of interest that a developer may have on building a tool that breaks your captcha.
    If it is easily breakable if anyone wants to, than the only option to keep it secure is if no one ever uses it. As soon as any major web site uses it, the interest will grow and the tool to brake it will be made. Instead of that, the security should be on the mathematical probability of a computer completing the task considering that anyone wants to break it. Then you would have a captcha.

    2) It is not relevant the system needed to brake it, if it has javascript enabled or not. Is a generic computer with any resources that one can choose that is considered. A common captcha for example, considers that is too hard to a computer to segment the image and recognize the letter by OCR with the noise that is added. So if a computer can not recognize a letter, but a human (usually) can, it is a captcha, because it can distinguish between humans and computers. It is not relevant on a usual captcha what kind of resources are used for the letters recognition: if javascript is or is not enabled and so on.

    Having that said, your proposal is based on some quite interesting technology. The drawing recognition thing is very nice, indeed. It has a lot of applications. But is my opinion (and I’m open to discuss that if you still disagree) that cant be applied to CAPTCHAS. The reason is simple. Ignoring the system, language and programming resources needed, and considering that one has interest on breaking it (for example, if any major site starts using it), there is no hard challenge for the computer. It wont be able to tell apart humans and computers, because it is trivial to develop software that opens a webpage, finds the captcha canvas, identifies the drawing and repeats the drawing on the canvas. Even some noise could be added to simulate the imprecision of a human, if the algorithm is considering that at all. So I don’t see any computational challenge at all there. If there is one, please help me to see it.

    I will not add again my considerations about why I think captchas (not yours, but any captcha) are not a good solution at all. Lets focus on your system first and if you want we may discuss that other things after.

    So, how could that be improved? maybe some noise on the canvas could avoid that the correct drawing is identified. But how much noise is necessary? Wont that noise also make that people are not capable to find the drawing too? Some scientific analisys is needed there. I really dont see how would be possible to make a drawing clear enough to be copied by humans bout hard to a computer to copy. Computers are specialist on copying things. They are not that good on interpreting things.

    That brings me to another possibility. If your system gets very good on understanding drawings, you could change the challange. For example, while the canvas has a house, you could put a request under it that says the user should draw the house, but without the roof. That would make things much harder for the computer, because it would require artificial intelligence to understand what in the drawing is a roof and dont draw it. But that for sure would make the captcha too annoying for most users. That would take me to the point that I would like to avoid on this posts, that is why I dont like any captcha, even the ones that are still to be invented.

    So, I guess I made my point. Simple copying a drawing is a simple task to any computer. Any captcha based only on that fails on having something that separates humans from computers (again, generic computers).

    Hope this time I have been more educated and we can have a productive discussion. Sorry again for the other day.

    Reply
  31. Le Marquis

    Great idea! I hate and again hate the original Captcha. This could potentialy be a great replacer. Although I agree it needs a bit more fine tuning and support for mobile devices.

    Reply
  32. Marush Denchev

    Insane! For someone who spends 90% of his time on the Internet I’m rerely impressed. But MotionCaptcha catch my breath :) Very good!

    Looking at the roadmap I’m seeing that you will try to use excanvas. My advice is to use Flashcanvas (flashcanvas.net) which is more advanced polyfil.

    Cheers

    Reply
  33. Rogério Chaves

    I’ll try to do server-side validation with node.js, since it’s javascript too should be simple enough :D

    Reply
  34. Ross

    Hey

    Brilliant idea and so much better in terms of UI and UX. Any updates on the progress though? I’m working on a big site and would love to include this @ v1.1+ !

    Also some quick feedback, could not see this anywhere in roadmap but providing a way of letting the user swap between this and standard CAPTCHA at all times, not just if the user’s browser is uncompilable with canvas etc would be good (for accessibility reasons!).

    Watching and waiting on github :)

    Thanks,
    Ross

    Reply
  35. Ben

    Been trialing this captcha and really like it.

    Mostly got a good response from my user base as well.

    Do you have any idea when server side verification and IE support will happen?

    I saw it on the timeline for about septemberish last year?

    Reply
    1. Joss Post author

      That is fantastic, great work! All it needs now (amongst other things) is a standard CAPTCHA fallback for accessibility, plus a port in PHP (which somebody already started), then it’ll be good to go!

      I’ll update the MotionCAPTCHA repository and homepage with a link to your demo.

      I’m super pumped about this – thanks for taking the time to work on it!

      Reply
  36. Ben

    Wow that is very cool!

    Once this has a PHP port I am good to go!

    This seems to work in IE unlike the original as well which is very cool.

    Also a note, can you please make it possible to turn the standard text fall back OFF?

    I think for my project I would not have the option to go back to a text captcha as I have had rather large issues with people creating scripts. Although technically this isn’t considered “Stronger” its very different which means it will keep them at bay for quite some time to come!

    Thanks alot Rogério

    Reply
  37. ace

    Server-side validation is certainly a huge step forward. I’m gonna set aside some time to look at Sir Chaves’ code and see if I can implement something similar in perl (I’m old)

    Reply
    1. Joss Post author

      Fantastic! :o)

      I’m going to get the whole thing rewritten pretty soon, and relaunch it with several serverside implementations – nodeJS, PHP – even … perl! (if you can help out..)

      Reply
  38. Ben

    IE6? Are you crazy?
    If your still supporting that you certainly are wasting your time.
    If anyone is using it they shouldn’t be!

    I tested this using IE9 by the way.

    Reply
  39. Thumper

    Why not auto Submit after the user draws the shape? Why ask the user for double the interaction then is really needed?

    Great idea other wise!!

    Reply
  40. Rahul

    Hi,
    Its a good concept. But want to know when you will make it to use with php(server side scripting language). Because if someone wants to add security then he will always use server side scripting language.

    Reply
  41. kukulaka

    This is a great idea, and with the server side validation I am certainly going to use this on mobile sites I write.

    Reply
  42. jordan

    ive just came across this and i think its amazing has anyone got a sample of how to use the script?

    @Rogério Chaves is there a tutorial or full source for the node.js stuff which you showed earlyer? would love to put this in action.

    would like to involve this with some php scripts that i currently have.

    Reply
      1. jordan

        no problem and i noticed just took another look and managed to find his examples,

        ive never heard of php dollar? anychance of anyone explaining php dollar to me? done a google not much help. just stupid currancy convertions.

        thanks joss keep up the good work!

        Reply
  43. waiting for the latest version

    Hi All
    waiting for the latest version
    if u can’t support on old IE browser u can enable this button submit and hidden the captcha features with css

    like this:

    $(document).ready(function() {
    $(‘#crossIE’).attr(‘disabled’, false);
    });

    Reply
  44. Tanasith

    WoW! Amazing captcha. I tried on google chrome for andriod, It’s work. Coming soon I will be use your captcha on my project. Thank you very much.

    Reply
  45. Pingback: MotionCAPTCHA Jquery Plugin | Aleksandar Golubović

  46. Pingback: 16 Latest jQuery Plugins For Your Next Project

  47. Pingback: MotionCAPTCHA: una nuova generazione di antispam

  48. Pingback: read.guoruEi » Blog Archive » 各式各样的验证码

  49. Pingback: 32个极其有用的jQuery插件! | 有日历

  50. Pingback: MotionCAPTCHA – Sketch The Shape | All Things jQuery

  51. Varun A. Thomas

    Keeping in mind the logic of this implementation, should I believe that no computer program is yet able to perform mouse movements like drag and drop ??
    Because if it’s possible that on client side, a program is developed that controls the drag of the mouse, takes a screenshot, identify the image, the line to be drawn and then drags the mouse as it is, then this would simply fail ??
    I’m not declaring anything, I’m just asking isn’t it possible ??

    Reply
  52. Pingback: 1# - 5 Przydatnych wtyczek jQuery

  53. Pingback: 40 jQuery Eklentisi | Herşeyden Yeteri Kadar

  54. Will

    I want to use this on my website but have had trouble setting it up. I’ve ended up copying the source code for the demo and downloading the .js files. The process works except the shape is not shown in the box so you do not know what to draw
    Much appreciated for any help
    Thanks,
    Will

    Reply
  55. Pingback: Passport Seva Kendra Appointment System | Pranav's space

  56. Pingback: 15 Useful Resources for Designers and Developers | Web Master Resources - Tips - Tricks - Tutorials

  57. Pingback: Resource Roundup February 2012

  58. Pingback: 40 jQuery Plugins tuyệt vời cho bạn | Blogs DoTa

  59. Pingback: 40 jQuery Plugins tuyệt vời cho bạn - Thủ Thuật Wordpress

  60. Pingback: The 50 Most Useful jQuery Plugins from 2011 - Speckyboy Design Magazine

  61. Pingback: 40 New jQuery Plugins - Speckyboy Design Magazine

  62. Vastra

    I’ve been using this captcha for some time, it’s fucking super, no bots can pass it, but have been receiving complains from IE8 and down users. Any chance the excanvas support will be done soon?

    Reply
  63. Pingback: MotionCAPTCHA – Farklı Bir jQuery Captcha Eklentisi | Mintik

  64. Rom

    Nice turning over captcha but has quite a bugs …Say it accepts rectangle as triangle ..Validates the Captcha .

    Reply
  65. Pingback: 27 Useful jQuery Plugins You Must Need For Websites #1

  66. Pingback: 40 Fresh jQuery Plugins for October 2011Wordpress Developent Websoite

  67. Pingback: 40 Awesome jQuery Plugins You Need to Check Out | Jquery Passion

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>