3

I have Google ReCaptcha v2 Checkbox implemented in a ASP.NET Core 3.1 MVC application. It works fine on mobile and desktop - I am able to fill out a form, click Submit, a bootstrap confirmation modal comes up with the captcha, and I can confirm my submission.

However, on my mobile device (I tested Chrome and Brave browsers), if the form page is idle for >5 minutes, and then I fill out the form and pull up the confirmation modal, the captcha sometimes breaks and looks like this:

enter image description here

A gray box with a sad face. It's not a very descriptive error.

I tried both automatic rendering and explicit rendering for the captcha, but the issue persists.

My captcha html, which is inside a bootstrap modal that is initially not shown:

<div id="recaptcha" class="g-recaptcha" data-size="compact" data-sitekey="@ViewData["ReCaptchaKey"]"></div>

Code that explicitly renders captcha:

/**
 * Function gets called when the google recaptcha API loads. This is to ensure element is present in html before
 * initialising captcha.
 * More info: https://stackoverflow.com/a/46388681/12300287
 */
var _captchaTries = 0;
function recaptchaOnload() {
    _captchaTries++;
    if (_captchaTries > 9)
        return;
    if ($('.g-recaptcha').length > 0) {
        grecaptcha.render("recaptcha");
        return;
    }
    window.setTimeout(recaptchaOnload, 1000);
}

Script tag for captcha in the head:

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit"></script>

As I said, I tried automatic render with captcha, making the code simpler, but the issue still exists.

EDIT: I'm working on another app with a reCAPTCHA and this still happens, but in this new case it's not when >5mins pass and it's not in a modal. The error seems to be uncommon and hard to recreate. Refreshing the page fixes it. The only pattern I noticed is it tends to appear when I visit the site on my phone after not having visited it in a while.

Lukas
  • 1,699
  • 1
  • 16
  • 49
  • You can use remote debugging to see the error in the console window. And this may be the mobile browser killing the script. Mobile devices have less resources and can be stingy with memory. – Jeff B Jun 01 '21 at 15:31
  • Thanks, found a very easy way to access console on mobile browsers: https://github.com/liriliri/eruda. I'll be looking at what's going on. – Lukas Jun 01 '21 at 15:41
  • Well, the console is empty. No error is present for the page. I was able to inspect the elements and I see that the captcha div has the `sitekey` value, and the rest looks normal. – Lukas Jun 01 '21 at 15:51

1 Answers1

1

I still don't know what is the cause of this error but I found a way to handle it.

Above the reCAPTCHA, you can add a button that calls grecaptcha.reset(); method:

<input type="button" onclick="grecaptcha.reset();" value="Reload" />

If the reCAPTCHA breaks, clicking the button resets it to working condition.

Lukas
  • 1,699
  • 1
  • 16
  • 49