Loading webview with https with ionic and capacitor

Question

I'm trying to build an apk which have to load with https://mydomain with ionic 4 and capacitor. In capacitor.config.json I precise this field :

"server" : {
  "hostname": "mydomain"    
}

Cause I do some API call in that domain. The problem is, I want my app to load with https://mydomain when running the app, in debug or apk mode.

I even tried to do that in capacitor.config.json

"server" : {
  "hostname": "https://mydomain"    
}

But it just did this call

 http://https://mydomain

when I run the app. So it just keep adding "http://" to the hostname.

Do you have any idea on what can I do to have my app running with https instead of http ?

I'm using ionic 4 and capacitor, and I'm testing all this in Android Platform using Android studio for the moment (but I will have the same for IOS).

Thanks

Runyon

Any luck getting this to work? – Supreme

there is the --https flag. That definitely serves https to the device. I then get network/ssl handshake errors and a blank app screen. Need to add a CA cert or something probably. I still have no working solution :-( – Faintheart

@mcmonkeys1 Did you ever get the --https flag working? – Cantor

Answer 1

Use the follwoing in capacitor.config.json:

{
  "hostname": "mydomain.com",
  "androidScheme": "https"
}

Lemuellemuela

Answer 2

Ionic does have an experimental --ssl flag

https://ionicframework.com/docs/cli/commands/serve

There are issues with it tracked here:

https://github.com/ionic-team/ionic-cli/issues/3305

Nuzzle

Answer 3

There's a working solution on the Capacitor github https://github.com/ionic-team/capacitor/issues/3707#issuecomment-713360155

IMPORTANT: This should be for debugging only, your app might get rejected if you leave this code in a production build. The code ignores SSL errors so shouldn't be in any live code.

For Capacitor v3 I import these lines:

import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;

Then add an override to onStart() in my app's MainActivity.java

@Override
public void onStart() {
super.onStart();

if (BuildConfig.DEBUG) {
  this.bridge.getWebView().setWebViewClient(new BridgeWebViewClient(this.bridge) {
    @Override
    public void onReceivedSslError(WebView view, final SslErrorHandler handler, SslError error) {
      handler.proceed();
    }
  });

  TrustManager[] trustAllCerts = new TrustManager[] { new X509TrustManager() {
    public X509Certificate[] getAcceptedIssuers() {
      return null;
    }

    @Override
    public void checkClientTrusted(X509Certificate[] arg0, String arg1) throws CertificateException {
      // Not implemented
    }

    @Override
    public void checkServerTrusted(X509Certificate[] arg0, String arg1) throws CertificateException {
      // Not implemented
    }
  }};

  try {
    SSLContext sc = SSLContext.getInstance("TLS");

    sc.init(null, trustAllCerts, new java.security.SecureRandom());

    HttpsURLConnection.setDefaultSSLSocketFactory(sc.getSocketFactory());
    HttpsURLConnection.setDefaultHostnameVerifier(new HostnameVerifier() { @Override public boolean verify(String hostname, SSLSession session) { return true; } });
  } catch (KeyManagementException e) {
    e.printStackTrace();
  } catch (NoSuchAlgorithmException e) {
    e.printStackTrace();
  }
}

For Capacitor v2, this may work - but if not the code can be moved from onStart() to onCreate(Bundle savedInstanceState) where I saw it working before upgrading to v3.

I run it from the CLI with

ionic capacitor run android -l --host=0.0.0.0 --consolelogs --external --ssl

Mesnalty

seems that Capacitor team has removed the --ssl flag from live/hot-reload mode, I'm not able to make it work and not seeing it in the documentation – Core