Google reCAPTCHA v3闲置后隐藏徽章自动恢复显示问题求助

Google reCAPTCHA v3的后台脚本会定期执行刷新逻辑（比如验证token过期、页面从闲置状态恢复时），这个过程中会重新渲染徽章元素，或者直接覆盖徽章的行内样式。而你的代码仅在组件挂载/卸载时设置一次样式，没有处理徽章被重新渲染或样式被重置的场景，导致闲置一段时间后徽章重新显示。

方法1：使用高优先级CSS规则（推荐） #

通过全局CSS的!important规则锁定样式，优先级高于reCAPTCHA脚本添加的行内样式，即使徽章被重新渲染也能保持目标状态：

/* 全局隐藏reCAPTCHA徽章 */
.grecaptcha-badge {
  visibility: hidden !important;
}

如果需要在特定页面显示徽章，可给目标页面的根容器添加专属类，再针对性覆盖：

/* 仅在需要展示徽章的页面生效 */
.page-need-captcha .grecaptcha-badge {
  visibility: visible !important;
}

方法2：用MutationObserver监听样式变化 #

通过DOM监听实时监控徽章的样式修改，一旦发现visibility被重置，立即重新设置目标状态：

const toggleCaptchaBadge = (show: boolean) => {
  const badge = document.getElementsByClassName('grecaptcha-badge')[0];
  if (badge && badge instanceof HTMLElement) {
    badge.style.visibility = show ? 'visible' : 'hidden';
  }
};

useEffect(() => {
  toggleCaptchaBadge(true);
  const badge = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement;

  if (badge) {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mut => {
        if (mut.attributeName === 'style' && badge.style.visibility !== 'visible') {
          toggleCaptchaBadge(true);
        }
      });
    });

    observer.observe(badge, { attributes: true, attributeFilter: ['style'] });
    return () => {
      observer.disconnect();
      toggleCaptchaBadge(false);
    };
  }

  return () => toggleCaptchaBadge(false);
}, []);

方法3：遵循官方合规要求隐藏 #

根据Google reCAPTCHA服务条款，若要隐藏徽章，必须在页面显眼位置添加明确声明（例如“本网站使用Google reCAPTCHA保护用户安全”），同时可通过配置data-badge属性配合样式调整：

<!-- 引入reCAPTCHA时添加data-badge属性 -->
<script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥" data-badge="inline"></script>

再通过CSS调整或隐藏，确保符合合规要求。

内容的提问来源于stack exchange，提问作者mc-user