[iOS] WebView automatically opens url that don't match originWhitelist in external browser

Bug description: In iOS, WebView with custom originWhitelist automatically opens custom scripts in Safari without any user interaction.

To Reproduce:

<WebView
  source={{
     uri: 'https://www.bbc.com',
  }}
  originWhitelist={['https://*bbc.com']}
/>

Expected behavior: WebView doesn’t open custom scripts in Safari without any user interaction.

Screenshots/Videos: On load, the webview opens a link that doesn’t fit the whitelist automatically https://imgur.com/a/Tvbua2b

Error in expo console:

Environment:

• OS: iOS
• OS version: 13.5
• react-native version: React Native 0.62.2 for Expo SDK38
• react-native-webview version: ^9.4.0

[phuwin95]

Hi, I’m facing the same issue, I’ve whitelisted only my company domain, but every internal iframe is redirected to Safari instead of being loaded as part of the webpage.

@phuwin95 did you solved the issue?

Yes I did. So you can’t rely on the webview component to whitelist your domain since it’s not working properly. I need to manually filter urls using onShouldStartLoadWithRequest. With isTopFrame attribute, you can filter out requests that are from iframes. Add onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} to </Webview> component and remove the originWhitelist attribute:

  const onShouldStartLoadWithRequest = ({url, canGoBack, isTopFrame}: shouldStartLoadWithRequestEvent): boolean => {
    /**
     * Special case handling for ios
     * isFirstLoad is needed b/c onShouldStartLoadWithRequest is called on first load
     * isTopFrame is needed to separate iframe requests from topframe requests
     */
    if (Platform.OS === 'ios') {
      const isFirstLoad = url === originalUrl && !canGoBack;
      if (!isTopFrame || isFirstLoad) return true;
    }

    if (url !== originalUrl) {
      if (!passesWhitelist(originWhitelist, url))
        openExternalLink(url);
      else {
        // handling the request if it's with the domain listed in the whitelist 
        return true;
      }
    }
    return false;
  }
  const openExternalLink = (url: string): void => {
    Linking.canOpenURL(url).then((supported) => {
      if (supported) Linking.openURL(url);
    });
  }

Note: passesWhitelist function is taken from react-native-webview source https://github.com/react-native-webview/react-native-webview/blob/master/src/WebViewShared.tsx#L20

[ifero]

Thanks, @phuwin95. Basically, this is a workaround until the maintainer doesn’t decide to fix the native code, as exposed by you in here: https://github.com/react-native-webview/react-native-webview/pull/1513

I’ll work your way but I really think that a proper solution should be provided since Android and iOS behave differently. @Titozzz any insight on that?