Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions src/screens/register/children/turnstileWebView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,16 @@ interface Props {
height?: number;
}

// Cloudflare's Managed challenge runs its verification compute in about:srcdoc / about:blank
// child frames (nested inside the challenges.cloudflare.com iframe). iOS WKWebView gates
// SUB-FRAME navigations by originWhitelist / onShouldStartLoadWithRequest too, so without the
// about: scheme those frames are silently dropped and the widget spins on "Verifying…" forever
// (the outer widget still renders, since it loaded over https). Allow https + about: only.
const _allowTurnstileFrame = (req: { url: string }) =>
req.url.startsWith('https://') || req.url.startsWith('about:');

// Cloudflare's Managed challenge renders in a challenges.cloudflare.com iframe and runs its
// verification compute in nested sub-frames across several schemes: about:srcdoc / about:blank
// and, on iOS, often blob: / data:. react-native-webview gates EVERY frame navigation against
// originWhitelist. The previous list (['https://*', 'about:']) plus a custom
// onShouldStartLoadWithRequest that returned true only for https/about therefore CANCELLED the
// challenge's blob:/data: compute frames: about: was allowed, but that alone was not enough, so
// the challenge never issued a token and the widget stayed blank.
// This widget only ever loads our own first-party embed page plus that CF challenge, so rather
// than enumerate every scheme Cloudflare may use, allow them all (originWhitelist ['*']) and
// drop the custom handler (with ['*'] a handler could only re-add the same restriction).
const TurnstileWebView = ({ onVerify, onExpire, onError, height = 76 }: Props) => {
const intl = useIntl();
// A failed load of the hosted page (network error, or a 404 while the web
Expand Down Expand Up @@ -73,14 +75,17 @@ const TurnstileWebView = ({ onVerify, onExpire, onError, height = 76 }: Props) =
<View style={[styles.container, { height }]}>
<WebView
source={{ uri: TURNSTILE_EMBED_URL }}
originWhitelist={['https://*', 'about:']}
onShouldStartLoadWithRequest={_allowTurnstileFrame}
originWhitelist={['*']}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
javaScriptEnabled
domStorageEnabled
sharedCookiesEnabled
thirdPartyCookiesEnabled
scrollEnabled={false}
androidLayerType="software"
// Make the widget inspectable via Safari Web Inspector in dev builds only,
// so a future challenge issue can be diagnosed on-device without shipping
// an inspectable WebView to release/TestFlight.
webviewDebuggingEnabled={__DEV__}
style={styles.webview}
onMessage={_onMessage}
onError={() => setLoadFailed(true)}
Expand Down
Loading