Showcasing what the Instagram in-app browser does under the hood

InAppBrowser.com

What is this project?

Please read this article first

How does it work?

To my knowledge, there is no good way to monitor all JavaScript commands that get executed by the host iOS app (would love to hear if there is a better way).

I created a new, plain HTML file, with some JS code to override some of the document. methods:

document.getElementById = function(a, b) {
    appendCommand('document.getElementById("' + a + '")')
    return originalGetElementById.apply(this, arguments);
}

View the Source Code here

Check out the full announcement

How to use

Open InAppBrowser.com through the iOS/Android app of your choice. For a social media app post the link, or for messengers send the link to yourself, and try opening the page as part of their in-app web browser.

ad-container folder

This folder contains an empty iOS app project, that renders the InAppBrowser.com website.

[self.webView evaluateJavaScript:@"document.getElementById('usingNewMethod')"
                         inFrame:nil
                   inContentWorld:[WKContentWorld defaultClientWorld]
                completionHandler:^(id _Nullable something, NSError * _Nullable error) {
    NSLog(@"new: %@", something);
}];

[self.webView evaluateJavaScript:@"document.getElementById('usingOldMethod')"
                copletionHandler:^(id _Nullable something, NSError * _Nullable error) {
    NSLog(@"old: %@", something);
}];

The above code uses the new and the old method of running JavaScript code on websites. For more deatils, check out WKContentWorld.

When you open the InAppBrowser.com website through that app, you can see how only the "usingOldMethod" output is shown, while the "usingNewMethod" output doesn't show up.