Links with target="_blank" do not trigger onShouldStartLoadWithRequest

Bug description:

On Android, elements with target=“_blank” do not trigger onShouldStartLoadWithRequest. Absolute links will immediately open in the browser. Relative links don’t do anything at all (unless you provide a baseUrl, in which case they will be immediately opened in the browser).

To Reproduce: Following example code does not call onShouldStartLoadWithRequest for links with blank target.

import * as React from "react";
import { SafeAreaView } from "react-native";
import WebView from "react-native-webview";
import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";

export default function App() {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          body {
            display: flex;
            flex-direction: column;
          }
        </style>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
      </head>
      <body>
        <a href="https://github.com">Absolute link</a>
        <a href="https://github.com" target="_blank">Absolute link with blank target</a>
        <a href="/react-native-webview">Relative link</a>
        <a href="/react-native-webview" target="_blank">Relative link with blank target</a>
      </body>
    </html>
  `;

  const handleShoudStartLoadingWithRequest = (request: ShouldStartLoadRequest) => {
    console.log("shouldStartLoadWithRequest", request);

    return false;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        originWhitelist={["*"]}
        onShouldStartLoadWithRequest={handleShoudStartLoadingWithRequest}
        source={{ html: htmlContent }}
        style={{ flex: 1, height: 100 }}
      />
    </SafeAreaView>
  );
}

I added the following piece of JS on the page, and then it does work:

<script>
  // Need to remove target=_blank on links or onShoudStartLoadingWithRequest doesnt get called on Android
  Array.from(document.querySelectorAll('a[target="_blank"]'))
  .forEach(link => link.removeAttribute('target'));
</script>

Expected behavior: I expect onShouldStartLoadWithRequest to be called for absolute/ relative links in all cases, irrespective of their target.

Environment:

OS: Android
OS version: 11
react-native version: 0.63.4
react-native-webview version: 11.2.1

Top GitHub Comments

18reactions

B4ckescommented, Feb 22, 2021

I’ve found a better way to make it work, I removed all that previous workaround and set the setSupportMultipleWindows to false, this lead me into two other problems, first was that even if i return a false to the onShouldStartLoadWithRequest the webview was redirected to the next page, so i added a webViewRef?.stopLoading() and all is working fine now. But, the other problem i had was with a vulnerability that setting setSupportMultipleWindows to false exposes, so i just tested if the URL from navigation on included a base URL. I couldn’t make the originWhitelist work, it made a lot of links stop working in the webview even if it matches with the whitelist URIs.

6reactions

toanpv-2417commented, Nov 30, 2021

it solved in my case onShouldStartLoadWithRequest={(request) => {

                    // prevent load request about : blank 
                    if(request.url == 'about:blank') return false;

}

Top Results From Across the Web

React Native - open links in browser - Stack Overflow

I plan to trial and error more to see which holds up best. onShouldStartLoadWithRequest={event => { if (!/^[data:text, about:blank]/.test(event.url)) { Linking.

Don't Use The Target="_Blank" Link Attribute In These Cases

Using the _blank link attribute will cause the link to open in a new browser window or tab. But it is not as...

When to use target="_blank" | CSS-Tricks

I use target="_blank" for all external links. Not every user is tech-savvy enough to know how to open a link in a new...

React Native Webview Onshouldstartloadwithrequest Does ...

Bug description: On Android elements with targetblank do not trigger onShouldStartLoadWithRequest. Absolute links will immediately open. Bug description: On ...

react-native-webview-0x - npm

However, some legacy UIWebView properties are not supported. ... If set to true, links with target="_blank" or window.open will be opened in the...