如何从iframe中获取Google reCAPTCHA v3 Token并填入输入框？

首先要明确：只有当父页面与iframe页面同源（协议、域名、端口一致），或者你能控制iframe内的代码时，才能安全实现这个需求——跨域情况下浏览器的同源策略会限制直接操作。

1. 同源场景下的实现 #

步骤1：在iframe内监听reCAPTCHA验证完成事件 #

当reCAPTCHA验证通过后，会触发验证回调函数，在这个回调里把token发送给父页面：

// iframe内的代码
function onCaptchaSuccess(token) {
  // 向父页面发送token
  window.parent.postMessage({ type: 'captchaToken', token: token }, '*');
}

如果是reCAPTCHA v2，也可以直接在HTML标签里指定回调：

<!-- iframe内的reCAPTCHA标签 -->
<div class="g-recaptcha" data-sitekey="你的sitekey" data-callback="onCaptchaSuccess"></div>

步骤2：父页面接收token并填入输入框 #

在父页面添加消息监听，接收iframe发来的token后写入目标输入框：

// 父页面的代码
window.addEventListener('message', function(event) {
  if (event.data.type === 'captchaToken') {
    // 填入目标输入框（替换成你的输入框ID）
    document.getElementById('captcha-token-input').value = event.data.token;
  }
});

2. 非同源但可控制iframe代码的场景 #

如果父页面和iframe不同源，但你能修改iframe内的代码，同样用postMessage通信，只是父页面要严格验证消息来源，避免恶意请求：

// 父页面的消息监听，限制可信来源域名
window.addEventListener('message', function(event) {
  // 替换为你的iframe实际域名
  if (event.origin !== 'https://your-iframe-domain.com') return;
  if (event.data.type === 'captchaToken') {
    document.getElementById('captcha-token-input').value = event.data.token;
  }
});

关键注意事项 #

• 不要直接从iframe的DOM中抓取token：reCAPTCHA的token是动态生成的，Google的脚本会保护相关元素，直接操作不仅容易失效，还违反reCAPTCHA的使用规范。
• 确保sitekey配置正确，验证流程符合Google的服务条款，否则可能导致验证功能被封禁。

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