How does this checkbox recaptcha work and how can I use it?
This is a beta API for reCAPTCHA. I gather this from the source of their JS API: https://www.google.com/recaptcha/api.js referencing "API2". And I also found this: http://jaswsinc.com/recaptcha-ads/ (archived) Apparently they did an invite-only beta of their "no CAPTCHA reCAPTCHA" So.... You probably won't be able to make it work on your site, yet. I can't find any information on opting into the beta, but if you search for "No CAPTCHA reCAPTCHA beta" you can see a number of people that have mentioned getting the email from Google for them to join.
If you find a place to get into the beta, please share! Otherwise it looks like public release is coming in 2015...
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
- Google Online Security blog: Are you a robot? Introducing “No CAPTCHA reCAPTCHA”
- Google reCAPTCHA: Introducing 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 html5data-*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 usestate. - 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".