HTTPS for localhost

There are cases where we need a secure connection for development purposes. Many services such as onesignal, or other services need HTTPS. While we are using HTTPS in our local development we will see this page. This is taken from chrome which threw a NET::ERR_CERT_COMMON_NAME_INVALID error.

A set of steps that will generate an HTTPS certificate for your local development.

Step 1) Generate root certificate

We need to create a root certificate that can be used to sign any number of certificates for any number of domains. A root certificate can be generated using the following commands.

Here we are generating the RSA-2048 key which will be used for generating the SSL certificate. This certificate will be saved as arootCA.pem , and have a validity of 7,300 days. A prompt will appear where one needs to add a passphrase along with other optional information while creating the certificate.

Step 2) Trust-generated certificate

Add the generated certificate to the list of trusted certificates. The steps might vary depending on the Operating System.

• macOS: Open Keychain Access and import the root certificate to your System keychain. Then mark the certificate as trusted and save it.

• Linux: Depending on your Linux distribution, one can use trust, update-ca-certificates or another command to mark the generated root certificate as trusted.
• windows(chrome): Open Chrome’s SSL-Dialog in the settings section and import the root certificate (rootCA.pem) to the System keychain.

Step 3) Create a domain certificate

Create an open SSL Certificate using a configuration file server.csr.cnf and a v3.ext file in order to create an X509 v3 certificate.

Run the following script to create a domain certificate for localhost

Step 4) Move keys to the app

Move server.key and server.crt to an accessible location on your server or client application.

In an Express app running on Node.js, one can do something like this

For the Vue.js application, one can do like this

Hopefully, I was able to give you some new information and you learn something from this article. Thank you for reading!