Recaptcha V2无代码变更运行半月后出现Promise Timeout错误如何解决

根因说明 #

Google近期对reCAPTCHA V2的远程客户端脚本进行了升级，新增了严格的反调试、运行环境检测逻辑，同时收紧了资源加载、初始化时序的校验规则，即使未修改本地接入代码，远程脚本的更新也会触发原有正常流程报错。你遇到的查看源代码自动唤起调试器，就是新版脚本内置的反爬反调试机制触发的。

可执行修复步骤 #

• 优先排查站点内容安全策略（CSP）与浏览器扩展拦截问题：新版reCAPTCHA V2新增了多个边缘节点子资源域名，若站点CSP规则仅放行旧版域名，会导致依赖资源加载超时，直接触发promise timeout错误。同时部分广告拦截、隐私防护扩展会主动拦截reCAPTCHA的验证请求，可暂时禁用扩展测试是否恢复正常。
• 调整reCAPTCHA初始化时序：新版脚本对初始化时机要求更严格，禁止在DOM容器未完成挂载时提前渲染验证组件。建议将原有自动渲染逻辑替换为显式渲染模式，确保DOM加载完成后再调用初始化方法。
• 处理开发环境下的反调试中断：新版脚本内置循环debugger逻辑，检测到开发者工具开启时会主动阻塞线程导致验证流程超时。可在开发者工具设置的「忽略列表」中添加recaptcha__*.js规则，即可避免调试器自动唤起，该问题不会影响未开启开发者工具的普通用户。
• 显式渲染参考代码：

<!-- 引入显式模式的reCAPTCHA脚本 -->
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
<!-- 验证组件容器 -->
<div id="recaptcha-box"></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
  // 确保容器挂载完成后再渲染
  grecaptcha.render('recaptcha-box', {
    sitekey: '你的站点密钥',
    callback: function(verifyToken) {
      // 验证通过后直接将token注入表单提交
      document.getElementById('contact-form').querySelector('[name="g-recaptcha-response"]').value = verifyToken;
    }
  });
})
</script>

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