Cordova: CSP issue on Android when requesting data over HTTPS

Question

Cordova Android is an Android application library that allows for Cordova-based projects to be built for the Android Platform. Cordova based applications are, at the core, applications written with web technology: HTML, CSS and JavaScript. Apache Cordova is a project of The Apache Software Foundation (ASF).

I have developed an app with Cordova which works as expected on iOS, and on Android when the signed app gets deployed from Android Studio direct to a Samsung S6.

However, when downloading the app from Google Play it does not get requested data from a HTTPS request.

Here are the whitelist settings in the config.xml:

<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>

And the CSP settings in the index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src *; connect-src *">

This is the request that does not get the data (without any meaningful error message - e.type is just an empty string)

_routingControl = L.Routing.control({
                                        plan: L.Routing.plan([
                                            L.latLng(coords),
                                            L.latLng(_userMarker.getLatLng())
                                        ],{
                                            createMarker: function() {return false}
                                        }),
                                        fitSelectedRoutes: true,
                                        autoRoute: true,
                                        show: false,
                                        serviceUrl: 'https://router.project-osrm.org/viaroute'
                                     });

Since this works on iOS I suppose there is an issue with the Whitelist/CSP setting.

Can somebody explain why this is not working when app is downloaded from the app store?

Answer 1

@barbu, your fix in just a second.

One of the things that is baffling me is developers going from a "Development IDE" to Google Play. As someone who builds with Phonegap Build, my workflow does not include a cable and 'adb'. Perhaps you can explain the reasoning with this process.

On you issues, you will need to implement the whitelist system. This worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system

There is also document that is link from there to the Whitelist CSP Examples. In short, the way it is usually applied is the CSP is expanded from a webbrowser, then that meta element is added to the App. However in your case, you will likely work backwards.

The Fix

Typically, when I give the answer I give the whitelist and CSP. You may be able to start with just the CSP. Best of Luck.

Add this to your config.xml

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the following to your index.html

<meta http-equiv="Content-Security-Policy" 
         content="default-src *; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

Sidenote: gap: from what I have right now, is only required for Cordova iOS, SEE: Simon Mac Donald Adds