使用iframe srcdoc加载页面时Google reCAPTCHA v3域名无效问题求助

问题根源 #

用srcdoc加载的iframe，其页面的实际运行origin是父页面的域名（example.com），而非你获取HTML的example1.com。reCAPTCHA v3会校验当前页面的origin是否在允许列表中，同时reCAPTCHA脚本加载时的上下文也会受这个origin影响，即便你已经把两个域名都加入允许列表，也会出现验证失败。

解决办法 #

1. 改用iframe直接加载example1.com的URL（优先方案） #

放弃srcdoc方式，直接设置iframe的src属性为example1.com的完整地址：

$(()=>{
    var iframe = document.createElement('iframe');
    iframe.src = 'https://example1.com'; // 必须带协议（http/https）
    document.querySelector("body").appendChild(iframe);
})

这样iframe的origin就是example1.com，和直接访问时完全一致，reCAPTCHA的域名验证会正常通过。

2. 若必须使用srcdoc的适配方案 #

如果受限于业务场景必须用srcdoc，需要做以下调整：

• 确保example1.com的服务器配置了CORS，允许example.com发起跨域请求，否则$.get获取HTML的操作会失败。
• 在example1.com的页面中，调用grecaptcha.execute()时保持正常逻辑，但后端验证reCAPTCHA响应时，需要额外校验请求的origin（此时前端请求的origin是example.com），确认该域名在reCAPTCHA的允许列表内。
• 注意：这种方式下页面实际运行在example.com的origin下，可能带来安全风险，需谨慎评估。

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