5

In my web page, I validate a form based on Invisible Recaptcha, by calling the calling the function grecaptcha.execute(). Usually this happens invisible to the user; all they see is the form submit that is triggered after grecaptcha is done verifying.

Sometimes, the not-so-Invisible Recaptcha behaviour is triggered (e.g. if the user behaves suspiciously) and a regular captcha is shown to the user that they must solve. When this happens, I want to detect it programmatically.

Is it possible to programmatically discover if a captcha was shown to the user after the call to grecaptcha.execute()?


So far, I've experimented with watching the DOM using MutationEvents and MutationObservers. Unfortunately everything interesting is happening inside an iframe and it seems to be impossible to tell if the full captcha was shown or not.

I don't want to measure how long it takes for grecaptcha to call the callback I give it, because that would be unreliable (e.g. slow mobile connections would skew the results).


Markup:

<form id="form" method="post" action="/form">
    Name: (required) <input id="name" name="name">
    <div id="g-recaptcha-div"
        class="g-recaptcha"
        data-sitekey="keeeey"
        data-callback="onRecaptchaDone"
        data-size="invisible"></div>
    <button id="thebutton">Submit</button>
</form>

Code:

function onSubmit(event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
}
function onRecaptchaDone(token) {
    form.submit();
}
window.onload = function() {
    form.onsubmit = onSubmit;
}
Robert Steward
  • 153
  • 1
  • 10

0 Answers0