jQuery Captcha using Drag-n-Drop: How bot-proof is this?

I am currently employing a CAPTCHA technique which requires a visitor to rearrange some items into the "correct" order before proceeding. Here is a jsFiddle with my technique.

I am wondering exactly how bot-proof this is?

Is it possible someone could inject some JS like this into my page to programmatically reorder the items?

$("div.cItem"):contains('0').app开发者_运维百科endTo('#captcha');
$("div.cItem"):contains('1').appendTo('#captcha');
$("div.cItem"):contains('2').appendTo('#captcha');
$("div.cItem"):contains('3').appendTo('#captcha');
$("div.cItem"):contains('4').appendTo('#captcha');
$("div.cItem"):contains('5').appendTo('#captcha');

UPDATE

Sorry bout the link to the non-functional jsfiddle link. That is fixed.

---

Is it possible someone could inject some JS like this into my page to programmatically reorder the items?

Yes. It would be fairly trivial to create a script to automatically reorder the divs.

That said, bots do not typically use Javascript. They just create a POST request. If it is possible to submit the form without Javascript enabled, then it is not very effective.

If you require Javascript to be enabled to submit the form, that is terrible for accessibility.

But to address the general idea: you should consider that computers are much better at rearranging lists of numbers than humans are. If you want it to cater to humans and not computers, you should have users rearrange something harder for computers to calculate. I don't know what would be best, maybe arranging pictures of animals from smallest to largest or something like that.

---

I'm sorry but that is pretty non bot proof. All a bot will need to do is assemble a post and post it back completely avoifing your humad check

---

I'd just programatically build whatever POST values you're looking for. :|

You could get crazy, have the sever generate them, pass UUIDs to all items, store it in the session, etc. etc. but if it's anything easy (like numbers) you can just run OCR against it.

---

I think there aren't a lot of bots (classic ones using curl, ...) using javascript, so I think this is fair one.

OT: Can I use it for my project? It looks nice and bullet-proof :P

---

No client-side verification is bot-proof. Anyone who studies your page can work-around it easily since the logic to bypass it is right in your page javascript. To make something bot-proof, you need server-side verification of a human action.

---

That's impossible to say from your example, as it only contains the user interface.

What would make it bot proof is the way that you send the result to the server. A bot would not use the Javascript on the page to bypass the CAPTCHA, it would just try to return the right result to the server. The result should be impossible to determine by itself, i.e. you should not just send "012345" back to the server. The identities of the blocks should be random, and their number not easily determined by just reading the content of the elements.

Side note: Sorting on random is not a very good way to shuffle items. A Fisher-Yates shuffle is easy to implement.