Mobile Safari下Google reCaptcha验证失败[browser-error]问题求助

问题概述 #

仅Mobile Safari浏览器出现「Failed to validate captcha [browser-error]」验证失败错误，桌面浏览器、Android端均运行正常。当前实现细节：

• App.ts中通过GoogleReCaptchaProvider包裹业务组件：

  <GoogleReCaptchaProvider language={language} reCaptchaKey={siteKey}>
    <Submit/>
  </GoogleReCaptchaProvider>
  

• 业务组件内使用GoogleReCaptcha组件：

  <GoogleReCaptcha onVerify={onClick} refreshReCaptcha={refreshReCaptcha} />
  

• 设置const REFRESH_CAPTHCA_TIME = 90000;定时刷新验证码

可行解决方向 #

1. 适配Mobile Safari定时器限制

Mobile Safari对后台/非活跃页面的定时器有严格节流策略，90秒的固定刷新可能在页面挂起时导致reCAPTCHA实例状态异常：

• 仅在页面活跃时执行刷新，监听页面可见性事件：

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      refreshReCaptcha();
    }
  });
  

• 临时缩短刷新间隔（如30秒）测试，排查长间隔下的状态失效问题。

2. 确保reCAPTCHA脚本加载完成后渲染组件

Mobile Safari第三方脚本加载时机存在延迟，可能导致组件初始化时脚本未就绪：

• 利用GoogleReCaptchaProvider的onLoad回调确认脚本加载完成，再渲染子组件：

  const [captchaLoaded, setCaptchaLoaded] = useState(false);
  
  <GoogleReCaptchaProvider 
    language={language} 
    reCaptchaKey={siteKey}
    onLoad={() => setCaptchaLoaded(true)}
  >
    {captchaLoaded && <Submit/>}
  </GoogleReCaptchaProvider>
  

3. 检查Safari隐私与跨域配置

Mobile Safari默认开启「阻止跨站跟踪」，可能干扰reCAPTCHA验证请求：

• 确认业务域名已完全添加到Google reCAPTCHA控制台的域名白名单（包含子域名、移动域名）
• 避免在iframe内使用reCAPTCHA，Safari对iframe内第三方脚本限制更严格

4. 替换固定定时刷新逻辑

固定定时刷新可能导致Safari中reCAPTCHA实例状态紊乱，改为按需刷新：

• 移除固定定时器，在用户触发提交动作前检查验证码有效性，无效则刷新：

  const handleSubmit = () => {
    if (!captchaToken) {
      refreshReCaptcha();
      return;
    }
    // 执行提交逻辑
  };
  

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