Protecting Web pages from WebView attacks

[cyberphone]

WebView is a great solution for interacting with Web pages. However, WebView's ability to manipulate the DOM of external pages is not always desired.

Describe the solutions you came up with
I have a Web app that performs security related stuff and it turned out that it was trivial breaking it with code like the following:

const DestroyerScreen = ({ navigation }) => {
  const call = `
      document.getElementById('secureFrame').outerHTML = 'Destroyed!';
      true;
    `;
  return (
    <WebView
      style={{ margin: 0 }}
      source={{ uri: 'https://securityserver/login/web.html' }}
      onMessage={(event) => {
        callBack(event.nativeEvent.data);
        navigation.navigate('Home')
      }}
      injectedJavaScript={call}
    />);
};

Additional context
It should be possible constraining WebView through CSP or similar and restoring the built-in postMessage().

There is no need for injecting JavaScript code for returning data to WebView. The following is an extract of a Web page that can be invoked by WebView as well as being IFRAMEd by an ordinary Web application:

// Common API return method.
function returnData(jsonObject) { 
  if (window.ReactNativeWebView) {
    window.ReactNativeWebView.postMessage(JSON.stringify(jsonObject));
  } else {
    parent.postMessage(jsonObject, '*');
  }
} 

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically