Angular/Flask中reCAPTCHA Enterprise+Cloud Armour挑战页与CORS问题

一、搞定挑战页渲染失败的问题 #

1. 别用innerHTML/DomSanitizer直接插挑战页
   Angular的安全机制会限制动态插入的脚本和资源，硬插HTML根本没法正确初始化reCAPTCHA的挑战组件。直接用官方的集成方式：动态加载reCAPTCHA脚本，再调用挑战初始化。
   示例代码（Angular组件里）：

   loadRecaptchaChallenge() {
     const script = document.createElement('script');
     script.src = 'https://www.google.com/recaptcha/enterprise.js?render=你的站点密钥';
     script.async = true;
     script.defer = true;
     script.onload = () => {
       grecaptcha.enterprise.execute('你的站点密钥', {action: 'challenge'}).then((token) => {
         // 拿到token后传给后端验证
       });
     };
     document.body.appendChild(script);
   }
   

2. 排查404错误的根源
   • 检查Cloud Armor规则：别误拦了https://www.google.com/recaptcha/*这类资源路径，确保只拦截低/中等分数的业务请求，放通reCAPTCHA的静态资源。
   • 核对reCAPTCHA密钥的域名白名单：在Google Cloud控制台里，把你的Angular应用域名（包括本地测试的localhost:4200）加进允许列表，不然资源加载会被拒。

二、解决CORS跨域拦截问题 #

1. 静态页里删掉document.close()
   静态测试时调用document.close()会打断reCAPTCHA脚本的加载流程，直接导致跨域请求异常。把这个调用删掉，让脚本自然加载初始化。
2. 调整Cloud Armor的响应头规则
   检查Cloud Armor是否修改或移除了reCAPTCHA返回的Access-Control-Allow-Origin头。如果有自定义响应头规则，加个例外：允许来自https://www.google.com的请求保留原CORS头。
3. Flask后端配置CORS（如果涉及后端转发）
   要是你的Flask后端负责转发reCAPTCHA验证请求，得用flask-cors开跨域：

   from flask import Flask
   from flask_cors import CORS
   
   app = Flask(__name__)
   # 填你的前端域名，本地测试加localhost:4200
   CORS(app, origins=["https://你的前端域名.com", "http://localhost:4200"])
   

三、校验Cloud Armor和reCAPTCHA的规则配置 #

1. 确认Cloud Armor的分数逻辑
   中等分数的规则要设置成触发挑战页，不是直接拦截。比如分数在0.3-0.7之间时，返回带挑战初始化逻辑的响应，别直接返回403或者跳错误页。
2. 核对reCAPTCHA Enterprise关联关系
   在Google Cloud控制台里，确认你的reCAPTCHA密钥已经绑定到正确的Cloud Armor安全政策，动作设置正确：低分数拦截、高分数放行、中等分数触发挑战。

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