How to render reCAPTCHA html document provided by AWS WAF in react native web-view?

Question

I am trying to integrate AWS WAF CAPTCHA inside a React Native WebView. The AWS WAF response provides an HTML document that includes scripts (CDNs) for challenge and CAPTCHA rendering. However, the CAPTCHA does not render properly inside WebView. Even though the html document is rendering in web, it is only showing white screen in WebView.

  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>
      <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}
      />
    </View>
  );
};```

As a note reCAPTCHA is a Google product and is different than AWS WAF CAPTCHA. — Cory Kramer, Commented Apr 8 at 17:02

Pratik Chakraborty · Accepted Answer · 2025-04-25 09:52:55Z

Try using this, it work

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function CaptchaScreen() {
  const [captchaHtml, setCaptchaHtml] = useState<string | null>(null);

  useEffect(() => {
    fetchCaptcha();
  }, []);

  const fetchCaptcha = async () => {
    try {
      const response = await fetch('https://your-protected-url.com');
      const text = await response.text();

      if (text.includes('captcha') || text.includes('challenge')) {
        setCaptchaHtml(text);
      } else {
        // Handle normal response
      }
    } catch (err) {
      console.error('Error fetching CAPTCHA:', err);
    }
  };

  if (!captchaHtml) return null;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        originWhitelist={['*']}
        source={{ html: captchaHtml }}
        javaScriptEnabled
        domStorageEnabled
      />
    </View>
  );
}

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. — Community, Commented 11 hours ago

Collectives™ on Stack Overflow

How to render reCAPTCHA html document provided by AWS WAF in react native web-view?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related