How does this checkbox recaptcha work and how can I use it?

Pedro Maia Costa picture Pedro Maia Costa · Aug 28, 2014 · Viewed 77.4k times · Source

I've recently signed up to the oneplusone website https://account.oneplus.net/sign-up, and noticed this checkbox recaptcha

checkbox recaptcha

How does it work, and how can I use it on my sites? Much better than those cryptic words/digits:)

The recaptcha site does not mention any new recaptcha method... https://www.google.com/recaptcha/intro/index.html

Answer

Pred picture Pred · Sep 2, 2014

This entry does not answer the original question, however it helps to implement a similar solution. As @IanM said, the checkbox recaptcha is in beta phase and it can't be used without invitation.

IMPORTANT EDIT Google introduced the new reCAPTCHA

This is a JavaScript based CAPTCHA.

Since most spambots do not execute JavaScript and can not identify the correlation between the displayed text and the DOM or required actions they can not click on the checkbox.

Please note that there is no checkbox at all, it is just a div element with some CSS styling. Spambots are trying to fill the form input elements, but there is no input in the CAPTCHA. The check mark is just another div (css class).

When you click on the box an ajax request notifies the server that the div was clicked and the server stores this information in a temporary storage (marks the token: this token was activated by a human). When you submit the form, a hidden field sends the token which was activated, then when the server validates the form information it will recognize that the token was activated. If the token is not activated, the form will be invalidated.

The steps in bullet points:

  • Generate a unique identifier and add it to the form with a hidden input
  • Render a checkbox on the site (without using the <input> element, possibly using <div>) and add the previously generated identifier to it (you can use the html5 data-* attributes)
  • When the user clicks on the checkbox, send an ajax request to the server and validate the CAPTCHA, if it is valid mark it as in use. (Show the result - identifier is OK/not OK - to the user)
  • When the user sends the form, the form's data contains the identifier. Check it once more, it should exist and it should be in in use state.
  • If all validations are passed, the form's data is ready to use/process

You can bind the identifier to the user's session, IP address, and/or you can use time limits to improve security.

NOTE This kind of CAPTCHA only works when the JavaScript is enabled!

NOTE (edit 1) As @crazypotato stated, there are some automation tools, which can execute JavaScript, these tools also capable to send the proper AJAX request and fire the Click event on the checkbox div.

NOTE (edit 2) Please note that a script written to specifically one site or to break one type of captcha will got through sooner or later. There is no ultimate protection, you can only make the bots (or their developers) work harder.

NOTE (edit 3) The steps and the description in this answer only contains some basic information about this type of captcha, you always have to add additional validations and security steps to make it more secure. For example, Google noCaptcha systematically fires a standard reCaptcha after 3 "div clicks".