react-native : Get internal api call data from url of the WebView

Question

I have a webview with a url (for example a payment processing page). When the url is loaded, certain api calls are done and i want to know how to get data from the internal api calls of that particular url.

It is not something like communication between webpage and react native code. ( window.ReactNativeWebView.postMessage or onMessage ) I need internal api call response data from the webpage.

Hayman

If you have access to that website code, you can always set a cookie and check that in react native – Fanaticism

@Fanaticism Can you elaborate?? – Hayman

@Hayman Did you find any solution? I am facing same issue. Any help is appreciated. Thank you in advance. – Ultimogeniture

Can you put the code which you are using and what API you are trying to get. This will help understand better and give a solution – Dilute

What the proposal of getting this data, it's for debug? or for your example you need to know the result of payment processing page? – Saw

So just so I get this right, you're trying to man in the middle some third party call that's occuring inside the WebView page so you can change your app based on the random internal data calls response? – Intuition

Answer 1

Solution 1:

you can inject js into webview to get api detail

var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener("load", function() {
        var message = {"status" : this.status, "responseURL" : this.responseURL}
        webkit.messageHandlers.handler.postMessage(message);
    });
    open.apply(this, arguments);
};

Solution 2:

right now, there is no way to intercept webview internal API calls.

you can add support for this in webview

Android

In android you have to use WebViewClient.shouldInterceptRequest()

you can add bridging method REF

Headcheese

I tried this and it works great on iOS but it isn't working on Android. For some reason, the API calls made by the webpage that I'm loading aren't showing up on Android (but other api calls are showing). I figure it has something to do with the shouldInterceptRequest but not sure. I replaced my react-native-webview library with the fork you linked, and it didn't solve this issue. Any ideas? – Bronez

Answer 2

I think you can inspect/log the network requests by setting up a (WiFi) proxy:

• Step-by-step instructions for Fiddler
• Another how-to for Proxyman
• Related StackOverflow question

Grapevine