What is the name of the domain?
Localhost
What is the error number?
300031
What is the error message?
Blocked a frame with origin “https://challenges.cloudflare.com” from accessing a frame with origin “…”. Protocols, domains, and ports must match.
What is the issue you’re encountering
Getting error 300031 trying to use Turnstile within a React Native Webview.
What steps have you taken to resolve the issue?
- Changing the user agen
- Trying various mixedContentMode options for React Native Webview.
What are the steps to reproduce the issue?
- Access a turnstile website through a fresh React Native app using the package react-native-webview.
- Observe failure
Webview props for reference:
<WebView source={{ uri: 'https://______.ngrok-free.app/' }} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} mixedContentMode="compatibility" originWhitelist={['https://*', 'http://*']} webviewDebuggingEnabled={true} userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36" /> scalesPageToFit={true} />
Note: The Turnstile integration works as expected when accessed via any other Safari or Chrome browser (both mobile and desktop)
