如何在React Native WebView中渲染AWS WAF提供的reCAPTCHA HTML文档？

问题排查与核心原因 #

你的代码存在几个关键问题导致CAPTCHA无法渲染：

1. HTML内容被过度转义：所有标签和引号都使用了HTML实体（如<、"），WebView无法正确识别为有效HTML结构。
2. 缺失CAPTCHA核心脚本：代码依赖window.CaptchaScript和window.ChallengeScript，但HTML中未引入AWS WAF CAPTCHA的官方CDN脚本，导致这两个对象未定义。
3. WebView配置不足：缺少必要权限和配置，限制了脚本加载或DOM操作。

分步解决方案 #

1. 修复HTML转义问题

将所有HTML实体还原为原始字符：

• < → <
• " → "
• & → &

2. 添加AWS WAF CAPTCHA官方脚本

在HTML的<head>中引入AWS官方提供的CAPTCHA脚本（确保URL与AWS WAF返回的挑战页面一致）：

<script src="https://captcha.aws.amazon.com/captcha.js"></script>

3. 优化WebView配置

开启必要权限，适配浏览器环境：

• 添加文件访问权限，确保脚本资源正常加载
• 设置模拟移动端浏览器的User-Agent，避免AWS WAF识别为非浏览器环境
• 开启调试模式，方便查看控制台错误

修正后的完整代码 #

const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Human Verification</title>
    <!-- 引入AWS WAF CAPTCHA官方脚本 -->
    <script src="https://captcha.aws.amazon.com/captcha.js"></script>
    <script>
        window.awsWafCookieDomainList = [];
        window.gokuProps = {
            "key": "AQIDAHjcYu/GjX+QlghicBgQ/...",
            "iv": "A6wedAGoHAAAPbE0",
            "context": "NFyHZVaB4qXxqYnXxoFtvbWK..."
        };
        
        window.addEventListener("load", function() {
            const container = document.querySelector("#captcha-container");
            if (window.CaptchaScript && window.ChallengeScript) {
                CaptchaScript.renderCaptcha(container, async (voucher) => {
                    await ChallengeScript.submitCaptcha(voucher);
                    window.location.reload(true);
                });
            } else {
                console.error("CaptchaScript or ChallengeScript is not defined");
            }
        });
    </script>
</head>
<body>
    <div id="captcha-container"></div>
    <noscript>
        <h1>JavaScript is disabled</h1>
        <p>In order to continue, you need to verify that you're not a robot by solving a CAPTCHA puzzle.</p>
        <p>The CAPTCHA puzzle requires JavaScript. Enable JavaScript and then reload the page.</p>
    </noscript>
</body>
</html>
`;

return (
  <View style={styles.container}>
    <WebView
      originWhitelist={['*']}
      source={{ html: htmlContent }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowFileAccess={true}
      allowUniversalAccessFromFileURLs={true}
      userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
      debuggingEnabled={true}
    />
  </View>
);
};

额外调试建议 #

• 开启WebView调试后，在Chrome中通过chrome://inspect查看控制台输出，确认是否存在脚本加载错误或DOM操作问题。
• 确保gokuProps中的key、iv、context为AWS WAF返回的完整有效数据，无截断或修改。

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