如何使用Action Token渲染reCAPTCHA验证挑战页面

针对你遇到的XHR获取到挑战页HTML但无法显示的问题，按以下步骤排查和修复：

1. 修复innerHTML方式的脚本执行问题 #

直接把xhr.responseText赋值给div的innerHTML时，HTML中的<script>标签不会自动执行（浏览器安全策略限制）。你需要手动提取并执行响应里的脚本：

• 解析返回的HTML，提取所有<script>标签的内容和src属性
• 内联脚本：创建新<script>元素，把内容赋值后插入DOM
• 外部脚本：创建<script>元素设置src属性，插入DOM后等待加载完成

示例代码：

const challengeDiv = document.getElementById('challenge-container');
challengeDiv.innerHTML = xhr.responseText;

// 手动执行动态插入的脚本
const scripts = challengeDiv.querySelectorAll('script');
scripts.forEach(script => {
  const newScript = document.createElement('script');
  if (script.src) {
    newScript.src = script.src;
  } else {
    newScript.textContent = script.textContent;
  }
  document.body.appendChild(newScript);
  script.remove();
});

2. 修正iframe加载的路径与权限问题 #

用iframe加载时，注意两个关键问题：

• 响应中的资源（CSS、脚本）如果是相对路径，需要添加<base>标签指定资源根路径，否则会以当前页面域名加载导致404
• 检查Cloud Armor返回的响应头是否包含X-Frame-Options或Content-Security-Policy: frame-ancestors，如果有需要配置允许你的页面域名嵌入

示例代码：

const iframe = document.createElement('iframe');
// 替换为实际挑战页的根域名
const baseUrl = 'https://your-recaptcha-challenge-domain.com';
const modifiedHtml = `<base href="${baseUrl}">${xhr.responseText}`;
iframe.srcdoc = modifiedHtml;
iframe.style.width = '100%';
iframe.style.height = '600px';
document.getElementById('challenge-container').appendChild(iframe);

3. 验证Action Token的配置一致性 #

• 确认Cloud Armor规则中token.recaptcha_action.score的阈值和之前Session Token的规则完全一致
• 检查页面引入的reCAPTCHA脚本已移除&waf=session参数，且Action Token的site key正确无误
• 确保XHR请求携带了必要的Cookie（如果Cloud Armor依赖Cookie识别会话）

4. 排查浏览器安全限制 #

• 打开开发者工具（F12）查看控制台，确认是否有CSP、XSS相关的错误提示
• 检查网络面板里挑战页资源的加载状态，是否存在4xx/5xx错误

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