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.