Allowing mixed content on Android Cordova app

I am building an Android app using Cordova, that runs on Android 8.1. This app will be used in a LAN only and it needs to consume data from a local REST Webserver over HTTP… but because Android 8 forces Ionic apps to run under HTTPS, I am getting an error when trying to access the REST server over HTTP.

By doing some research, I discovered that the solution is to change WebView settings to allow mixed content. There were several ways to do this, but the easiest one was to add this line to my Ionic’s config.xml:

<preference name="MixedContentMode" value="2" />

According to documentation, the posibles values for this setting would be:

0: MIXED_CONTENT_ALWAYS_ALLOW
1: MIXED_CONTENT_NEVER_ALLOW
2: MIXED_CONTENT_COMPATIBILITY_MODE

First time I tried the app after adding this line, everything worked perfectly, but the next time I compiled and deployed the app, I got the same error again:

Mixed Content: The page at ‘https://localhost/config’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://192.168.0.5:5656/’. This content should also be served over HTTPS.

Anyone know how to permanently solve this?

My versions are:

Cordova: 10.0.0
Angular: 11.0.7
Ionic: 6.12.4

PS #1: For compatibility reasons with the devices where the app should run, I HAVE to use these versions, so updating any of them is out of the question.

PS #2: Since this app will run in LAN exclusively, my customer don’t want to deal with the complications of moving the REST webservice to HTTPS, so that’s is out of the question too.

Well, it seems that Android 8.1 still allows me to serve my app using HTTP instead of HTTPS. I changed the scheme on my config.xml:

<preference name="Scheme" value="http" />

And the app runs normally and now connects to my REST webservice without problems. Anyway, I would still like to know how to solve the problem with the app needs to be served with HTTPS.

A new problem: after a first build that worked perfectly, the second build now fails with this error:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://192.168.0.5:5656","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://192.168.0.5:5656: 0 Unknown Error","error":{"isTrusted":true}}

My code:

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  ...
  constructor(
    private http: HttpClient,
    private app: AppService,
    private ui: UIService
  ) { ... }
 ...
 this.httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'application/json'
      })
    };
 ...
  haleServer(serverAddr:string) {
    return new Promise((resolve, reject) => {
      const payload = {
        "ttype" : this.requests.hale,
        "termid": this.app.termid,
        "sent": new Date(),
        "data": {}
      }
      this.http
          .post<any[]>(serverAddr, payload, this.httpOptions)
          .pipe(
            timeout(5000),
            catchError(e => throwError(e))
          )
          .subscribe(
            res => resolve(res),
            err => reject(err) 
          );        

    });
  } // haleServer

As far as I know that is a CORS error, but no CORS preflight request was sent to my server. After building 2 or 3 more times, then everything starts to work perfectly again… this is driving me crazy!!

Any ideas?

if you are using cordova-plugin-ionic-webview, mixed content is enabled by default as the default value is 0, MIXED_CONTENT_ALWAYS_ALLOW

I am using WebView plugin and the problem still persists.

Screen Shot 2021-05-03 at 14.32.02

What I mean is you shouldn’t add the
<preference name="MixedContentMode" value="2" />

That could cause issues instead of fixing them.

Ok, I will remove it to see if that makes any difference. I will let you know later today.