Google ReCAPTCHA v2线上站点报placeholder element must be an element or id错误排查

问题背景 #

我站点的Google ReCAPTCHA v2已经稳定运行数月，近日线上站点（https://blisspot.com/signup）的验证组件突然无法正常工作，但开发环境站点（https://dev.blisspot.com/signup）功能完全正常。我通过git部署代码，可确认线上与开发环境的代码不存在差异。
我已尝试同类问题帖中给出的各类解决方案均未生效，更换多组API密钥后错误仍存在，想确认是否存在Google封禁我的域名的可能，恳请各位给出可行的排查建议。

相关渲染代码 #

$$('.g-recaptcha').each(function ($el) {
      if ($el.retrieve('recaptcha-loaded', false)) {
        return;
      }
      $el.empty();
      grecaptcha.render($el, {
        sitekey: $el.get('data-sitekey'),
        theme: $el.get('data-theme'),
        type: $el.get('data-type'),
        tabindex: $el.get('data-tabindex'),
        size: $el.get('data-size'),
      });
      $el.store('recaptcha-loaded', true);
    });

错误堆栈信息 #

recaptcha__en.js:212 Uncaught Error: reCAPTCHA placeholder element must be an element or id
    at VM214 recaptcha__en.js:212
    at Object.render (mootools-core-1.4.5-…at-nc.js?c=1160:959)
    at core.js?c=1160:961
    at Elements.Elements.forEach (<anonymous>)
    at Function.forEach (mootools-core-1.4.5-…at-nc.js?c=1160:220)
    at Elements.Elements.each (mootools-core-1.4.5-…at-nc.js?c=1160:337)
    at Object.render (core.js?c=1160:952)
    at signup:562
    at condition (mootools-core-1.4.5-…t-nc.js?c=1160:4352)
    at defn (mootools-core-1.4.5-…t-nc.js?c=1160:4366)
(anonymous) @   recaptcha__en.js:212
(anonymous) @   mootools-core-1.4.5-…at-nc.js?c=1160:959
(anonymous) @   core.js?c=1160:961
(anonymous) @   mootools-core-1.4.5-…at-nc.js?c=1160:220
each    @   mootools-core-1.4.5-…at-nc.js?c=1160:337
render  @   core.js?c=1160:952
(anonymous) @   signup:562
condition   @   mootools-core-1.4.5-…t-nc.js?c=1160:4352
defn    @   mootools-core-1.4.5-…t-nc.js?c=1160:4366
load (async)        
addListener @   mootools-core-1.4.5-…t-nc.js?c=1160:3904
addEvent    @   mootools-core-1.4.5-…t-nc.js?c=1160:4369
(anonymous) @   mootools-core-1.4.5-…t-nc.js?c=1160:4620
addEvent    @   mootools-more-1.4.0.…at-nc.js?c=1160:106
(anonymous) @   signup:558

排查方案 #

域名封禁排除 #

当前报错属于前端参数传递错误，并非Google服务返回的域名封禁类错误。如果为域名封禁，通常会在验证码渲染位置直接展示「该站点未被授权使用reCAPTCHA」的明确提示，不会抛出当前类型的JS异常。

具体排查步骤 #

• 校验线上环境DOM结构：在验证码渲染逻辑执行前，打印$$('.g-recaptcha')的返回结果，确认线上环境是否存在符合选择器的DOM元素。排查是否存在线上CDN缓存异常、页面模板渲染错误导致该元素缺失，或是线上专属运行的插件/脚本在渲染前移除了该元素。
• 校验SDK加载时机：确保渲染逻辑在reCAPTCHA SDK完全加载后执行，可将现有渲染逻辑包裹在grecaptcha.ready()回调中，避免SDK未加载完成时调用render方法导致参数解析异常。
• 校验MooTools对象有效性：在调用grecaptcha.render前增加判断逻辑，确认传入的$el是有效的DOM元素对象，过滤无效值，示例逻辑：if (!$el || !$el.nodeType) return;。同时对比线上、开发环境的MooTools库加载情况，确认线上静态资源没有被CDN篡改或截断。
• 校验内容安全策略（CSP）：检查线上环境是否新增了CSP规则，限制了reCAPTCHA相关资源的加载，或是阻止了脚本对.g-recaptcha元素的操作权限。
• 校验渲染逻辑触发次数：增加日志确认渲染逻辑是否被重复触发，若是首次渲染成功后二次触发时元素已被置换，也可能导致传入的元素失效。

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