Per app VPN support

[DanWard]

Hey guys,

We're trying to use this plugin over the standard Cordova based one for one of our corporate internal apps. These apps use iOS per-app VPN settings (https://blogs.vmware.com/euc/2017/04/vmware-airwatch-101-per-app-vpn.html) to connect to internal resources.
The unintended consequence is that it tries to route 'http://localhost:8080' over the tunnel, and fails.
Log from start up:

2017-10-27 10:49:45.773958+1100 MyApp[1080:347066] Apache Cordova native platform version 4.5.0 is starting.
2017-10-27 10:49:45.774990+1100 MyApp[1080:347066] Multi-tasking -> Device: YES, App: YES
2017-10-27 10:49:45.791655+1100 MyApp[1080:347066] CDVWKWebViewEngine: trying to inject XHR polyfill
2017-10-27 10:49:45.878184+1100 MyApp[1080:347066] CDVWKWebViewEngine will reload WKWebView if required on resume
2017-10-27 10:49:45.878321+1100 MyApp[1080:347066] Using Ionic WKWebView
2017-10-27 10:49:45.879179+1100 MyApp[1080:347066] [CDVTimer][console] 0.180006ms
2017-10-27 10:49:45.879478+1100 MyApp[1080:347066] [CDVTimer][handleopenurl] 0.135958ms
2017-10-27 10:49:45.883067+1100 MyApp[1080:347066] [CDVTimer][intentandnavigationfilter] 3.506005ms
2017-10-27 10:49:45.883273+1100 MyApp[1080:347066] [CDVTimer][gesturehandler] 0.120997ms
2017-10-27 10:49:45.897891+1100 MyApp[1080:347066] [CDVTimer][splashscreen] 14.567018ms
2017-10-27 10:49:45.906098+1100 MyApp[1080:347066] [CDVTimer][statusbar] 8.054018ms
2017-10-27 10:49:45.908837+1100 MyApp[1080:347066] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles
2017-10-27 10:49:45.909380+1100 MyApp[1080:347066] [MC] Filtering mail sheet accounts for bundle ID: ****, source account management: 1
2017-10-27 10:49:45.913228+1100 MyApp[1080:347066] [MC] Result: NO
2017-10-27 10:49:45.913339+1100 MyApp[1080:347066] [CDVTimer][socialsharing] 7.135987ms
2017-10-27 10:49:45.914745+1100 MyApp[1080:347066] [CDVTimer][keyboard] 1.254022ms
2017-10-27 10:49:45.914878+1100 MyApp[1080:347066] [CDVTimer][TotalPluginStartup] 35.980046ms
2017-10-27 10:50:46.967100+1100 MyApp[1080:347066] Failed to load webpage with error: The request timed out.

Any help or ideas would be greatly appreciated.

Thanks,
Daniel

EDIT: By changing 'http://localhost:8080/' to 'http://127.0.0.1:8080' in the config + source it allows me through and loads the page fine. Is it possible to make this change to your branch?

[AlexKolesnik]

Hi Daniel,

I suffer a very similar problem, in my case with Blackberry UEM.

But shouldn't that be addressed by the WKWebView, that is the cordova plugin itself rather than the Ionic integration or shouldn't this by solved by the VPN?

Where exactly did you have to make changes? I am very keen on using a workaround.

Thanks in advance

[DanWard]

Hey Alex,

One of the differences between the standard Cordova WKWebView plugin and the Ionic one is that it creates a webserver to serve content from.
In iOS with a per-app VPN, the VPN tunnel handles all of the DNS lookups, bypassing hosts. As an unintended consequence of enterprise level security, it also looks up localhost, which fails on most DNS servers as it is usually in the hosts file.

To fix this, we just tell the plugin to listen on 127.0.0.1 and the javascript side of the plugin to call 127.0.0.1 instead of localhost.

It's 2 very simple changes:

1. plugins/cordova-plugin-ionic-webview/src/ios/CDVWKWebViewEngine.m, line 31.
   #define CDV_LOCAL_SERVER @"http://localhost:8080"
   to
   #define CDV_LOCAL_SERVER @"http://127.0.0.1:8080"

2. plugins/cordova-plugin-ionic-webview/src/ios/wk-plugin.js, line 22:
   return 'http://localhost:8080' + url;
   to
   return 'http://127.0.0.1:8080' + url;

This stops iOS from calling the VPN tunnel with the DNS lookup for localhost, and has the same effect as writing localhost. Thus enabling the plugin to work fine in enterprise environments.
I hope this helps!

Daniel

[AlexKolesnik]

Thanks for the help.

I only have a superficial understanding of VPN but I strongly believe there should be a mechanism to define exclusions or inclusions to what domains the VPN would be allowed to handle.

Your workaround with patching also is not applicable for instance to Ionic View or any other app already built with an unpatched version of WkWebView. The workaround is also not very compatible with reproducible builds across multiple machines as the patch is it not easily distributed and acknowledged by the dependency managment.

But thank you very much, if there is really no other way to go I will use this as well.

[Tankatronic]

We ran into this exact issue as well with our internal app that uses a Per App VPN. Thank you for resolving it!

Please support this. Changing from localhost to 127.0.0.1 resolved it for us as well, but I do not like the idea of having to edit plugin files as part of our ios build process.

[AlexKolesnik]

After trying the patch, my locally stored images could not be loaded anymore.

[Tankatronic]

After trying this on a new project that was also using per app VPN, I ran into an issue where on start up my app would instead open up in Safari. The configurations between the two projects were the same, but adding <allow-navigation href="http:127.0.0.1:8080/*" /> to config.xml fixed the issue.

@AlexKolesnik Maybe this will also resolve your images failing to load.

[cfmjohn]

I've run into the exact same issue with a client using MobileIron Tunnel per app VPN (https://www.mobileiron.com/en/products/tunnel)

I agree that this should be sorted by the VPN provider. However, it would be appreciated if the CDV_LOCAL_SERVER value could be overridden via configuration for those of us caught out by this issue.

Edited to add: Looks like #41 comes close to allowing this to be configured.

[wilk-polarny]

Hello,

It seems we ran into the same issues after moving to VMware Airwatch, which creates a network extension tunneling the traffic to the enterprise network. Unfortunately, no connections to localhost are possible once the VPN kicks in, although we only resolve and forward specific hostnames. We will try to use the workaround mentioned within this issue and apply it using a cordova hook until we hear back from VMware regarding this issue (this might take a few weeks).

We would appreciate being able to adjust those values by using the configuration xml, including the port.

[wilk-polarny]

We were able to hot fix the issues with VMware Airwatch by applying the patches mentioned by @DanWard and @Tankatronic. Thank you!
As a temporary solution, we use a cordova hook to manipulate the local plugin directory (which we don't check out into the SCM), as simply overriding the values within platform_www of the ios platform folder won't work.

[mannsudhir]

We are able to run the application using per-app VPN after changing localhost:8080 to 127.0.0.1:8080 but the app is not able to load the local images once there is no connectivity(For testing purpose we switch to airplane mode). We have functionality that user can take picture while offline and upload to backend once network is available. We are storing images in Document folder but user is not able to preview the image in airplane mode using per-app VPN. Any suggestion is really appreciated. Thanks.

[cfmjohn]

@mannsudhir Same here - once the VPN tunnel is established all connections to 127.0.0.1 are being captured and re-routed. We've not managed to find a workaround yet.

[wilk-polarny]

@mannsudhir , did you already add an additional <allow-navigation href="http:127.0.0.1:8080/*" /> line to your config.xml after patching the plugin?

This also may be related to #76

[mannsudhir]

@wilk-polarny, yes we changed in config.xml . Only solution that is working is switching back to UIWebview. UIWebview use file:// protocol to access the local resources where WKWebview use http:// protocol. So that's the reason the local resource call are not tunneled through VPN. So we change the value of CDV_LOCAL_SERVER @"http://localhost:8080" to @"file:///" after that everything works fine but now app is not able to access the images stored inside the document folder. If any other suggestion please let me know. Thanks.

[wilk-polarny]

@mannsudhir Did you try removing file:// as suggested by the ionic team?

See: https://ionicframework.com/docs/wkwebview/#my-local-resources-do-not-load

If you’re working with local files (text files, images, videos), you’ll need to make sure that the path of file does not have file:// in front of it.

For example:

file:///usr/home/dev/app/index.html
Should be rewritten to:

/usr/home/dev/app/index.html

[mannsudhir]

@wilk-polarny, We are not using file:// for any local resource (file:// protocol used in UIWebview to access the local files). App was working fine just to get it working with per-app VPN we change the value of CDV_LOCAL_SERVER to file:// .