Ionic 3: SSL handshake fails when using mobile internet on android devices

Hi there,

I’m developing a mobile app with Ionic 3 / Angular 5. I get the following error when making an API call via HTTPS and mobile internet enabled on android devices:

[ERROR:ssl_client_socket_impl.cc(1040)] handshake failed; returned -1, SSL error code 1, net_error -100, Tag: chromium

I got this error message from Android Studio logcat. The console doesn’t show these details, it only says ERR_CONNECTION_CLOSED.

It’s an .apk on a real device. I built it by using the following command in the project folder:

ionic cordova build android --prod

I tested it on Android 5 and 7. Everything works fine when WIFI is enabled. The error occurs when switching to mobile internet (e.g. 4G) and trying to make the call.

I’m using HttpClientModule for the request:

let headers = new HttpHeaders().set('Content-Type', 'application/json');

let credentials = {
   username: username,
   password: password
};

this.http.post(`${this.apiUrl}/someroute/login`, JSON.stringify(credentials), {headers: headers})
.subscribe((res) => {
//handle result
})

On the server side SSL 3, TLS 1 and TLS 1.2 are available.

I did a lot of research on the topic and already did the following:

1. Check CORS Header coming from the server (Access-Control-Allow-Origin: *)

2. Add Permissions to AndroidManifest:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

3. Uninstall and reinstall Cordova Plugin Whitelist (version 1.3.3)

4. Remove and add android platform (I also tried the newest release, that did not solve the problem)

5. Switching to the most permissive settings in config.xml (only for testing purposes, I know this should never be used in production settings):

<content src="index.html" />
<access origin="*" />
<allow-intent href="*" />

6. Adding the following Content Security Policy to index.html:

<meta http-equiv="Content-Security-Policy" content="child-src * gap://ready; default-src 'self' gap://ready file://* *; connect-src * blob: data:; style-src * 'unsafe-inline'; script-src * 'unsafe-eval' 'unsafe-inline'; img-src data: *">

I would be very happy for any advice how to solve this or how to track this down a little further to find the problem.

Information about my local environment:

cli packages:

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v6.11.4
    npm   : 5.6.0 
    OS    : macOS Sierra

From package.json:

  "dependencies": {
    "@angular/common": "5.2.5",
    "@angular/compiler": "5.2.5",
    "@angular/compiler-cli": "5.2.5",
    "@angular/core": "5.2.5",
    "@angular/forms": "5.2.5",
    "@angular/http": "5.2.5",
    "@angular/platform-browser": "5.2.5",
    "@angular/platform-browser-dynamic": "5.2.5",
    "@ionic-native/barcode-scanner": "4.5.3",
    "@ionic-native/core": "4.5.3",
    "@ionic-native/http": "4.5.3",
    "@ionic-native/keyboard": "4.5.3",
    "@ionic-native/network": "4.5.3",
    "@ionic-native/speech-recognition": "4.5.3",
    "@ionic-native/splash-screen": "4.5.3",
    "@ionic-native/status-bar": "4.5.3",
    "@ionic/storage": "2.1.3",
    "@types/he": "^0.5.29",
    "@types/pouchdb": "6.3.1",
    "@types/xml2js": "^0.4.2",
    "chart.js": "^2.7.1",
    "cordova-android": "6.4.0",
    "cordova-plugin-advanced-http": "^1.10.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-speechrecognition": "^1.2.0",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.0.4",
    "he": "^1.1.1",
    "ionic-angular": "^3.9.2",
    "ionic-native": "2.9.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "moment": "^2.20.1",
    "phonegap-plugin-barcodescanner": "^7.0.2",
    "pouchdb": "^6.4.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "uuid": "^3.1.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.8",
    "@ionic/app-scripts": "3.1.8",
    "check-dependencies": "^1.1.0",
    "typescript": "^2.6.2"
}