Ionic ssl generate trust

I am using the new ionic 4.0.0-beta.19 framework, trying to use the ionic serve --ssl option.

I have created a new ionic project using the cli, I have run ionic generate ssl, which has created 2 files in /.ionic/ssl

cert.pem
key.pem

When running ionic serve --ssl in chrome I get the message “Your connection is not private”, I’ve had this before doing something similar, to fix this I’ve added the localhost cert file to my keychain access (using Mac) and set the certificate as always trust.

I’ve had this running before on ionic 4, by generating a certificate myself, adding the cert to the angular.json file like below:

 "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build",
    "ssl": true,
    "sslKey": "./ssl/server.key",
    "sslCert": "./ssl/server.crt"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    }
  }
 }

With above though I added the crt file and key rather than pem and key, do I need to go add these manually? Or is this done automatically using the generate command?

When viewing the served localhost in the browser, I can see the serial number of the certificate the browser is using, is different to the serial number of the pem file I added to the keychain access, so wasn’t sure if it generates a .crt fiel in another local, that I need to add?

1 Like

I have the same problem, I can’t find where the certificate is created after seeing this message (when running ‘ionic serve --ssl’):

[ng] i [wds]: Generating SSL Certificate

In the end, I just set Chrome’s flag to allow invalid certificates served from localhost (thought this has limitation, e.g. HOSTS file localhost aliases).

chrome://flags/#allow-insecure-localhost

Just enable it, for the simplest way to get Ionic serving over SSL in Chrome.