Recaptcha v2 throws an error when it is reset and its container element is removed from DOM

问题

When I explicitly render Recaptcha v2 and then reset it before removing it from the DOM, after ~40 seconds I get an error in the browser console.

I have a JSFiddle which can be used to reproduce the issue.

Here's the relevant code excerpt:

const recaptchaHolder = document.getElementById('...');
const recaptchaWidgetId = grecaptcha.render(recaptchaHolder, {/*...*/});
// then later
grecaptcha.reset(recaptchaWidgetId);
recaptchaHolder.parentElement.removeChild(recaptchaHolder);

The error that I get is:

Uncaught (in promise) Timeout

with the following stacktrace (the actual stacktrace might vary since it happens in heavily minified code):

setTimeout (async)      
J           @   recaptcha__en.js:100
(anonymous) @   recaptcha__en.js:285
tb          @   recaptcha__en.js:284
mj          @   recaptcha__en.js:456
(anonymous) @   recaptcha__en.js:458

I've tried to utilize the 'error-callback' parameter from the documentation to catch this error, but that did not help - the error is still uncaught, and this callback does not get invoked.

Another observation: if I omit calling grecaptcha.reset before removing the element from the DOM, then the error does not happen. However, it might result in inconsistent UI: if the user is challenged by recaptcha (for example, using images), and the element is simply removed from DOM without calling grecaptcha.reset, then the challenge HTML is not cleaned up from the DOM.

I'm looking for ways of either handling the above mentioned error, or handling recaptcha removal in a different way (if I am doing it wrong now)

回答1:

After many hours I have found only this solution, see https://jsfiddle.net/4mLhcksq/

There is setTimeout and 60 seconds (it could be shorter, I guess) pause before grecaptcha.reset() and then another pause before removing Recaptcha element. Actually, I had the same problem even if I do not remove Recaptcha element, only reset it.

const holder = getRecaptchaHolder();
holder.style.display = 'none'; //element disappears for users
setTimeout(function() {
  grecaptcha.reset(recaptchaWidgetId);
  setTimeout(function() { //we have to wait a while before removing element
    holder.parentElement.removeChild(holder);
  }, 1000);
}, 60000);

I am not especially proud of this solution. Let us hope somebody will provide better one.

回答2:

The error is thrown because captcha has sent calls to google and it wants to receive response but as we remove the element so the response doesn't go according to plan and zone error is thrown, a better approach is to just hide the captcha once you have received the firebase.auth.signInWithPhoneNumber function's response. No need to set any timeouts and call captcha.clear() method in the destroy event of your page.

来源：https://stackoverflow.com/questions/52617979/recaptcha-v2-throws-an-error-when-it-is-reset-and-its-container-element-is-remov

标签

javascript

recaptcha