HTTPS support for `ionic serve` and Cordova livereload (--ssl)

[imhoffd]

Known issues:

• ~HTTPS support in DevApp: https://github.com/ionic-team/ionic-cli/issues/3748~
• iOS wkwebview doesn't accept self-signed certificates: https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/224

[bleuscyther]

GPS wont work outside of safe env. aka: https.

[redplane]

Any solutions for this ? I'm having the same issue with ionic cordova run browser --livereload

[imhoffd]

@redplane That command (and the Cordova browser platform) isn't fully supported. See https://github.com/ionic-team/ionic-cli/issues/3043. The solution is forthcoming and this issue will be updated when it arrives.

[redplane]

Will it be for ionic-3 or ionic 4? Im having a project on ionic 3.9.2, a little big that Im afraid of changing

[imhoffd]

No plans to add HTTPS to @ionic/app-scripts for Ionic 3.

[kurtommy]

Updates?

[CJTalbot87]

Hi any update on this? I'm struggling to get the Geo-location to work on the Ionic Dev App with HTTP so to be able to serve over HTTPS would be great assuming that would fix the issue.

[imhoffd]

CLI 4.4.0 is out with an --ssl flag:

ionic serve --ssl

There are a few gotchas, which I've documented in the original issue description: https://github.com/ionic-team/ionic-cli/issues/3305#issue-332072032

[sebast1219]

So now livereload should work in https with --ssl ?

[imhoffd]

@sebast1219 ionic cordova run with --ssl will work, but it seems the iOS wkwebview doesn't accept self-signed certificates. So, it should work with Android.

The --ssl flag is an experimental feature (and is marked as such in ionic serve --help), we expect issues.

[phal0r]

@dwieeb Thanks for this feature, I wanted to try this out and therefor updated to ionic 4.4.0. I can see (and use) ionic ssl commands, but no ionic serve with --ssl flag when performing ionic serve --help.

Using ionic serve --ssl works so far, but still in http mode, so the ssl flag is not acknowledged. Do I need to update something else?

[imhoffd]

@phal0r Likely, you are not using Ionic 4. This feature depends on the Angular CLI, which is not used in Ionic 3. See https://github.com/ionic-team/ionic-cli/issues/3305#issuecomment-416695886

[GuerrillaCoder]

Can someone clarify something for me as a similar issue to mine was marked as duplicate and pointed here but this thread doesn't seem to address it.

If I generate a certificate:

ionic ssl generate

And then run project:

ionic serve --ssl

Then it does not use the certificate that has been generated. It generates a new certificate on the fly. This makes it impossible to run dev app in https as I can't add the certificate being used to the trusted root store as it ignores the generated cert and makes a new one on each run. The angular webserver won't allow calls from https frontend to https api if certificate isn't trusted.

This is same issue with angular but angular allows you to specify the path of cert when you give serve command. We are working on http as a workaround but the fact that there is a generate ssl command is confusing as it's not being used.

Can someone confirm for me Ionic doesn't have this functionality or if I am encountering a bug of some sort.

Thanks

[imhoffd]

@GuerrillaCoder You can pass arguments to the Angular CLI in ionic serve with a separator, like so:

ionic serve --ssl -- --ssl-cert ./path/to/file --ssl-key ./path/to/file

The idea of this issue is to make the --ssl flag do that for you, if you've previously used ionic ssl generate. We just haven't gotten to it yet.

[GuerrillaCoder]

@dwieeb This is how we do it for angular but ionic appears to ignore these arguments. I specify the correct paths but it always uses a 1 month long cert it generates itself instead of using my 1 year long cert I have in my trusted root.

I am using CLI version 5.1.0

[imhoffd]

@GuerrillaCoder Did you notice the separator (--) in the command? With the separator, arguments after it are forwarded as-is to the Angular CLI. The command I posted works for me in CLI 5.1.0.

[GuerrillaCoder]

@dwieeb oooooh no I didn't. Many thanks for that, my apologies for taking your time.

[imedvedev75]

Dear guys

I still get error trying to use --ssl flag:

ionic serve --ssl -- --ssl-cert ..ionic\ssl\cert.pem --ssl-key ..ionic\ssl\key.pem Error: spawn EPERM

at ChildProcess.spawn (internal/child_process.js:358:11) at Object.spawn (child_process.js:533:9) at spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules\cross-spawn\index.js:12:24) at spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\utils-subprocess\dist\index.js:169:12) at Subprocess.spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules\@ionic\utils-subprocess\dist\index.js:142:16) at Shell.spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\lib\shell.js:152:24)

Could you be so kind to help?

Many thanks

[muuvmuuv]

Solution for me for ionic serve is to add cert and key to serve configuration section in angular.json:

// ...
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "sslKey": "src/certificates/dev.key",
            "sslCert": "src/certificates/dev.crt"
          },
// ...

BUT this won't work for ionic capacitor run ios -l --ssl...

[imhoffd]

@muuvmuuv You can make a feature request for that in this repo: https://github.com/ionic-team/angular-toolkit

Basically, the ionic-cordova-serve needs to forward sslKey and sslCert options to the Angular serve builder.

[jayenashar]

is this supposed to work with react, or just angular? is DevApp still a thing, or can #3748 be closed?

[imhoffd]

The goal would to get it working with react-scripts too, yes. I closed the other issue, thanks!

[Laurence-Walpole]

I'm currently unable to get the following boot params to work: ionic capacitor run android -l --ssl --external - it launches the app correctly but on the emulator I just get a white screen with no url in the webview. I believe it's linked to this issue because it only arises when I add the --ssl flag to the command. This is on Windows 10, using Ionic 5 and running on an emulated Pixel C API 29.

[kamranayub]

FYI for React apps, ionic serve --https does work, I use it for testing my PWA 👍

https://github.com/ionic-team/ionic-cli/blob/0932ff04f45633e51b1d4b78857dbecedaee0c45/packages/%40ionic/cli/src/lib/project/react/serve.ts#L27-L29

[appaulmac]

FYI for React apps, ionic serve --https does work, I use it for testing my PWA 👍

https://github.com/ionic-team/ionic-cli/blob/0932ff04f45633e51b1d4b78857dbecedaee0c45/packages/%40ionic/cli/src/lib/project/react/serve.ts#L27-L29

Fantastic! Thanks for pointing this out; I couldn't find any other reference to this flag

[imhoffd]

Unfortunately our online CLI documentation is still specific to Angular. For React, you can use the --help flag in your terminal: ionic serve --help.

The --https flag for React is a bit different than what this issue was originally trying to accomplish. It uses a webpack plugin that automatically generates an SSL certificate at runtime, but when I last tried to use it there were trust issues.

[zengchuan]

I'm currently unable to get the following boot params to work: ionic capacitor run android -l --ssl --external - it launches the app correctly but on the emulator I just get a white screen with no url in the webview. I believe it's linked to this issue because it only arises when I add the --ssl flag to the command. This is on Windows 10, using Ionic 5 and running on an emulated Pixel C API 29.

I have the same problem. How to resolve it. command: ionic cap run android -l --external --ssl -- --ssl-cert .ionic/ssl/cert.pem --ssl-key .ionic/ssl/key.pem

[JesusSPC]

I have the same problem. How to resolve it. command: ionic cap run android -l --external --ssl -- --ssl-cert .ionic/ssl/cert.pem --ssl-key .ionic/ssl/key.pem

Same problem but I couldn't resolve it. I tried to generate a ssl certificate and run that command, still a white screen on --ssl. I don't know what I'm doing wrong here.

[JesusSPC]

I managed to make the --ssl flag work by including another override in: node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/BridgeWebViewClient.java

 @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
      handler.proceed();
      return;
    }

Also import there:

import android.webkit.SslErrorHandler;
import android.net.http.SslError;

But this is a nuisance since you need to document this in your project or inform other people that is going to pull it to follow this steps with their own module.

[Schwankenson]

I managed to make the --ssl flag work by including another override in: node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/BridgeWebViewClient.java

 @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
      handler.proceed();
      return;
    }

Also import there:

import android.webkit.SslErrorHandler;
import android.net.http.SslError;

But this is a nuisance since you need to document this in your project or inform other people that is going to pull it to follow this steps with their own module.

Thank you, this works for me! But it is of course not a good solution to make changes in a node module. Would be great to have a fix in a clean way.

[Patric]

I managed to make the --ssl flag work by including another override in: node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/BridgeWebViewClient.java

 @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
      handler.proceed();
      return;
    }

Also import there:

import android.webkit.SslErrorHandler;
import android.net.http.SslError;

But this is a nuisance since you need to document this in your project or inform other people that is going to pull it to follow this steps with their own module.

Using this solution changed platforms array deleting cordova parameter. That means everything is working as if it was in a browser preventing cordova plugins to be loaded. I'm getting:

Msg: Native: tried calling BluetoothLE.isScanning, but Cordova is not available. Make sure to include cordova.js or run in a                  device/simulator

Is there any solution to actually run ssl on android?

[Schwankenson]

Any news on this? I need to run the livereload with ssl. And the hack works, but is really annoying.

[Schwankenson]

I managed to get it runnning for ios with generating mkcerts: https://github.com/FiloSottile/mkcert

Run livereload:

ionic cap run ios --external --livereload-url=capacitor://mytestdomain.test:8100

And then run a server with a self signed certificate in another terminal

ng run app:serve --host=0.0.0.0 --port=8100 --ssl --public-host=rg-eat.test --ssl-cert=/host_system_mkcert_folder/${RG_MKCERT_CERT_NAME} --ssl-key=/host_system_mkcert_folder/${RG_MKCERT_KEY_NAME}

In iOs simulator it's easy to install the certificate (just show path witk mkcert -CAROOT) and drag it to the simulator. In Android it can be installed and works in browser, but it is not compiled in Android Studio without the hack from @JesusSPC

[reslear]

thx @Schwankenson ) Adopting for vue3 vite and walletconnect web3 provider

1. install and configure https://github.com/liuweiGL/vite-plugin-mkcert

2. run vue dev server

   pnpm dev --host="0.0.0.0" --port=8100

3. run capacitor server

   npx ionic cap run ios --external --livereload-url="https://192.168.100.3:8100/"

[graemeenglish]

This might help someone...

For Android create a self signed cert for the host address you are using for live reload e.g.

IP="192.168.1.215"
NAME="live_reload"
openssl req \
-x509 \
-newkey rsa:4096 \
-sha256 \
-days 365 \
-nodes \
-keyout ssl/$NAME.key \
-out ssl/$NAME.crt \
-subj "/CN=${IP}" \
-extensions v3_ca \
-extensions v3_req \
-config <( \
  echo '[req]'; \
  echo 'default_bits= 4096'; \
  echo 'distinguished_name=req'; \
  echo 'x509_extension = v3_ca'; \
  echo 'req_extensions = v3_req'; \
  echo '[v3_req]'; \
  echo 'basicConstraints = CA:FALSE'; \
  echo 'keyUsage = nonRepudiation, digitalSignature, keyEncipherment'; \
  echo 'subjectAltName = @alt_names'; \
  echo '[ alt_names ]'; \
  echo "IP.1 = ${IP}"; \
  echo '[ v3_ca ]'; \
  echo 'subjectKeyIdentifier=hash'; \
  echo 'authorityKeyIdentifier=keyid:always,issuer'; \
  echo 'basicConstraints = critical, CA:TRUE, pathlen:0'; \
  echo 'keyUsage = critical, cRLSign, keyCertSign'; \
  echo 'extendedKeyUsage = serverAuth, clientAuth')

Use this when running ionic cap run e.g. ionic cap run android -l --external --ssl -- --ssl-cert ssl\live_reload.crt --ssl-key ssl\live_reload.key

At this point you still get a blank screen when running the emulator because Android doesn't trust this certificate.

Copy the live_reload.crt you created to the android raw resource folder

Create a network_security_config.xml file with debug-overrides as explained https://developer.android.com/training/articles/security-config?msclkid=44f9be68d04d11eca3865cb4143ff1d6#TrustingDebugCa

e.g.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <debug-overrides>
    <trust-anchors>
        <certificates src="@raw/live_reload"/>
    </trust-anchors>
  </debug-overrides>
</network-security-config>

Also if you are working with a local api service for your app it is worth considering using a proxy.conf.json to avoid any similar issues with addressability/trust for your api.

[AlvaroLarumbe]

This might help someone...

For Android create a self signed cert for the host address you are using for live reload e.g.

IP="192.168.1.215"
NAME="live_reload"
openssl req \
-x509 \
-newkey rsa:4096 \
-sha256 \
-days 365 \
-nodes \
-keyout ssl/$NAME.key \
-out ssl/$NAME.crt \
-subj "/CN=${IP}" \
-extensions v3_ca \
-extensions v3_req \
-config <( \
  echo '[req]'; \
  echo 'default_bits= 4096'; \
  echo 'distinguished_name=req'; \
  echo 'x509_extension = v3_ca'; \
  echo 'req_extensions = v3_req'; \
  echo '[v3_req]'; \
  echo 'basicConstraints = CA:FALSE'; \
  echo 'keyUsage = nonRepudiation, digitalSignature, keyEncipherment'; \
  echo 'subjectAltName = @alt_names'; \
  echo '[ alt_names ]'; \
  echo "IP.1 = ${IP}"; \
  echo '[ v3_ca ]'; \
  echo 'subjectKeyIdentifier=hash'; \
  echo 'authorityKeyIdentifier=keyid:always,issuer'; \
  echo 'basicConstraints = critical, CA:TRUE, pathlen:0'; \
  echo 'keyUsage = critical, cRLSign, keyCertSign'; \
  echo 'extendedKeyUsage = serverAuth, clientAuth')

Use this when running ionic cap run e.g. ionic cap run android -l --external --ssl -- --ssl-cert ssl\live_reload.crt --ssl-key ssl\live_reload.key

At this point you still get a blank screen when running the emulator because Android doesn't trust this certificate.

Copy the live_reload.crt you created to the android raw resource folder

Create a network_security_config.xml file with debug-overrides as explained https://developer.android.com/training/articles/security-config?msclkid=44f9be68d04d11eca3865cb4143ff1d6#TrustingDebugCa

e.g.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <debug-overrides>
    <trust-anchors>
        <certificates src="@raw/live_reload"/>
    </trust-anchors>
  </debug-overrides>
</network-security-config>

Also if you are working with a local api service for your app it is worth considering using a proxy.conf.json to avoid any similar issues with addressability/trust for your api.

Thanks @graemeenglish

I'm using mkcert 192.168.1.153 for example and also works great if you want a simplified cert generation.

For people following this approach, you also need to add this to your AndroidManifest.xml into application node:

android:networkSecurityConfig="@xml/network_security_config"

Reference: https://developer.android.com/training/articles/security-config?msclkid=44f9be68d04d11eca3865cb4143ff1d6#manifest

[avalanche1]

Ionic 6 here. Still no out-of-the-box solution for running live-reload over https on a physical device...

[dpa99c]

This got me 95% of the way: https://github.com/ionic-team/ionic-cli/issues/3305#issuecomment-1122252775

To make it work with Vue/Ionic/Capacitor, the command I had to run is:

ionic cap run android -l --external -- --https

which in turn runs:

vue-cli-service.cmd serve --https 

so the Vue server runs in SSL mode.

I then had to create a vue.config.js to configure the certificate:

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
            key: fs.readFileSync('./ssl/live_reload.key'),
            cert: fs.readFileSync('./ssl/live_reload.crt'),
        }
    }
}

[joaogabriel-ar]

hey, im still having the same problem trying to run ionic --ssl on IOS. Some features need the secure context (https), and i can't manage to bypass the certificate verification on ios. Anyone with the same issue still ?