能否通过编程检测Invisible Recaptcha是否触发可见验证码？

Absolutely, this is totally feasible! Let’s break down the practical ways to detect when Invisible reCAPTCHA switches from its silent verification to requiring a manual, visible challenge from the user:

1. Watch for DOM Changes with MutationObserver #

When Invisible reCAPTCHA triggers a visible challenge, it injects specific DOM elements (like a modal or anchor container) into your page. You can use a MutationObserver to monitor the DOM for these elements and react when they appear.

This is the most reliable method because it directly detects the presence of the visible challenge UI:

// Initialize a MutationObserver to watch for reCAPTCHA's visible elements
const challengeObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      // Check for common reCAPTCHA visible challenge containers
      const visibleChallenge = document.querySelector('.g-recaptcha-modal, .rc-anchor-container');
      if (visibleChallenge) {
        console.log('Invisible reCAPTCHA has switched to a visible challenge!');
        // Add your custom logic here (e.g., track analytics, update UI)
        challengeObserver.disconnect(); // Optional: stop observing once detected
      }
    }
  });
});

// Start observing the entire document body for changes
challengeObserver.observe(document.body, { childList: true, subtree: true });

2. Use Timeouts with Verification Callbacks #

Invisible reCAPTCHA’s success callback only fires after verification is complete—whether it’s the silent check or the user solving a visible challenge. If you trigger grecaptcha.execute() and the callback doesn’t fire within a reasonable window, it’s a strong indicator that a visible challenge was triggered (since silent verifications usually finish in under 2 seconds).

Here’s how to implement this:

let verificationFinished = false;

function handleRecaptchaSuccess(token) {
  verificationFinished = true;
  // Proceed with your form submission logic
  document.getElementById('your-form-id').submit();
}

// Trigger the Invisible reCAPTCHA verification
grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit' }).then(handleRecaptchaSuccess);

// Check if verification is taking longer than expected
setTimeout(() => {
  if (!verificationFinished) {
    console.log('Visible reCAPTCHA challenge is likely active');
    // Your detection logic here
  }
}, 2500); // Adjust this timeout based on your users' typical network speed

3. Check Widget State (Explicit Rendering Only) #

If you’re rendering the reCAPTCHA widget explicitly (using grecaptcha.render()), you can track the widget’s response state. After calling execute(), if grecaptcha.getResponse(widgetId) returns an empty string after a short delay, it may mean the user is being challenged.

Note: This method is less reliable than the first two (since an empty response could also mean the silent check is still running), but it can work as a supplementary check:

const widgetId = grecaptcha.render('recaptcha-container', {
  sitekey: 'YOUR_SITE_KEY',
  size: 'invisible',
  callback: handleRecaptchaSuccess
});

grecaptcha.execute(widgetId, { action: 'submit' });

setTimeout(() => {
  const response = grecaptcha.getResponse(widgetId);
  if (!response) {
    console.log('Possible visible reCAPTCHA challenge triggered');
  }
}, 2000);

Important Notes #

• Class Name Changes: Google may update the class names of reCAPTCHA’s UI elements over time, so be sure to test your selectors periodically and adjust them if needed.
• Timeout Tuning: The timeout values in the examples are starting points—tune them based on your users’ average network speed to avoid false positives/negatives.
• Observer Cleanup: Don’t forget to disconnect your MutationObserver once you’ve detected the challenge (if you don’t need to monitor further) to avoid unnecessary performance overhead.

内容的提问来源于stack exchange，提问作者Robert Steward