Fixing InAppBrowser not being able to open ‘_system’ links (e.g. Facebook) in Cordova and Phonegap

InAppBrowser provides you the ability to open links in a custom browser in the app, or in an external browser.  In my case, dynamic content is coming into the app where a user can open external links.   All links would work, but for some reason, certain facebook links wouldn’t work such as

cordova.InAppBrowser.open('https://www.facebook.com/events/1701263153475443/', '_system');

I performed these following tests:

Scenario 1:

  • When the Facebook app was installed on the iPhone, Facebook links wouldn’t work
  • When the Facebook app was removed the Facebook links would work.

 

If you take a look at

https://github.com/apache/cordova-plugin-inappbrowser/blob/master/src/ios/CDVInAppBrowser.m

- (void)openInSystem:(NSURL*)url
{
    if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
    } else { // handle any custom schemes to plugins
        [[NSNotificationCenter defaultCenter] postNotification:[NSNotification notificationWithName:CDVPluginHandleOpenURLNotification object:url]];
    }
}

InAppBrowser eventually calls canOpenURL on the links.  When reading the api docs canOpenURL checks to see if the link is openable by any app.

Now if you notice on the iPhone, when you click on a link like http://google.com/maps it opens the Google Maps.  This is because when the Google App is installed, it registers a a URL Scheme.

Doing a little Googling yields a page about IOS9 and Facebook.

https://developers.facebook.com/docs/ios/ios9

The docs aren’t exactly clear, but what is that Cordova can’t open the Facebook links because it is missing a schema

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fbapi20130214</string>
    <string>fbapi20130410</string>
    <string>fbapi20130702</string>
    <string>fbapi20131010</string>
    <string>fbapi20131219</string>    
    <string>fbapi20140410</string>
    <string>fbapi20140116</string>
    <string>fbapi20150313</string>
    <string>fbapi20150629</string>
    <string>fbauth</string>
    <string>fbauth2</string>
    <string>fb-messenger-api20140430</string>
</array>

For Phonegap there was this post describing a fix to the problem.

Add this to config.xml and you should be good

 <gap:config-file platform="ios" parent="NSAppTransportSecurity" mode="replace">
		<dict>
			<key>NSAllowsArbitraryLoads</key>
			<true/>
		    <key>NSExceptionDomains</key>
		    <dict>
		        <key>facebook.com</key>
		        <dict>
		            <key>NSIncludesSubdomains</key>
		            <true/>                
		            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
		            <false/>
		        </dict>
		        <key>fbcdn.net</key>
		        <dict>
		            <key>NSIncludesSubdomains</key>
		            <true/>
		            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
		            <false/>
		        </dict>
		        <key>akamaihd.net</key>
		        <dict>
		            <key>NSIncludesSubdomains</key>
		            <true/>
		            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
		            <false/>
		        </dict>
		    </dict>
		</dict>
	</gap:config-file>
    <gap:config-file platform="ios" parent="LSApplicationQueriesSchemes" mode="replace">
		<array>
			<string>fb</string>
         	<string>twitter</string>
          	<string>gplus</string>
          	<string>pintrest</string>
          	<string>instagram</string>
          	<string>youtube</string>
          	<string>vnd.youtube</string>
          	<string>yelp</string>
          	<string>linkedin</string>
          	<string>tumblr</string>
          	<string>whatsapp</string>
          	<string>snapchat</string>
          	<string>comgooglemaps</string>
          	<string>amazon</string>
          	<string>skype</string>
          	<string>googledrive</string>
          	<string>itms-apps</string>
          	<string>paypal</string>
		    <string>fbapi</string>
		    <string>fbapi20130214</string>
		    <string>fbapi20130410</string>
		    <string>fbapi20130702</string>
		    <string>fbapi20131010</string>
		    <string>fbapi20131219</string>    
		    <string>fbapi20140410</string>
		    <string>fbapi20140116</string>
		    <string>fbapi20150313</string>
		    <string>fbapi20150629</string>
		    <string>fbauth</string>
		    <string>fbauth2</string>
		    <string>fb-messenger-api20140430</string>
		    <string>fb-messenger-api</string>
		    <string>fbshareextension</string>
		</array>
    </gap:config-file>
  • maxlimpag

    Thanks for the tip. This worked for me. Any idea how to do this on Android?