How to get HTTPS working in localhost development environment
Become a certificate authority (CA) like Let’s Encrypt, Verisign etc.. Issue yourself certificates for local development domains!
If you follow the steps mentioned in many blogs that tell you to create your ssl certificate. Then stop as the advice became outdated when Chrome fixed this — “Support for commonName matching in certificates”.
So, how do you remove the “your connection is not private” error in the browser when you visit a localhost domain?
3 steps to become a Certificate Authority
We will make a rootSSL certificate that will be used to sign any number of certificates for any number of local hosted domains. So open your terminal and let’s get started.
- Create a private key
rootSSL.key
Type below text and provide a pass phrase when asked for
openssl genrsa -des3 -out rootSSL.key 2048
2. Create certificate rootSSL.pem file using private key roorSSL.key
The validity is 1024 days which you can set to any number of days and I recommend the longer the better. You will be asked a number of questions which you need to answer as shown in the screenshot below.
openssl req -x509 -new -nodes -key rootSSL.key -sha256 -days 1024 -out rootSSL.pem
3. Trust the Certificate Authority CA on your local development machine
Mac / Windows / Ubuntu
Mac
Open Key chain App
Go to File > Import Items and select rootSSL.pem file to key chain and you will see it like this.
Double Click on imported file and go to trust section and change “When using this certificate:” choose Trust Always.
Linux (Debian / Ubuntu)
To install root SSL certificate in Ubuntu, open your terminal and do the following.
sudo mkdir /usr/local/share/ca-certificates/extrasudo cp rootSSL.pem \
/usr/local/share/ca-certificates/extra/rootSSL.crtsudo update-ca-certificates
Windows 10
To install root SSL certificate in windows 10, use Microsoft Management Console(MMC)
Step 1: Click Start > Run
Step 2: Enter MMC to open Microsoft Management Console.
Step3: Go to File > Add/Remove Snap-in
Step 4: Click Certificates, and select Add
Step 5: Select Computer Account, and click Next
Step 6: Select Local Computer and click Finish
Step 7: Click OK to go back to main MMC console window.
Step 8:Double-click Certificates (local computer) to expand its view.
Step 9:Right-click Certificates under Trusted Root Certification Authorities and select All Tasks then Import
Step 10:Complete the wizard to import the chain certificate. Browse to locate the chain certificate to be imported or rootSSL.pem file to import
Step 11: Select Place all certificates in the following store and select the Trusted Root Certification Authorities store.Click Next; then click Finish to complete the wizard.
Once the “import was successful” then you can locate your installed certificate authority in certificate pane.
Now you are a trusted Certificate Authority on your development machine. Follow the Step 3 on as many machines / servers that you need to. It’s a one time work for next 1024 days!
2 steps to issue Certificate for a local Domain
We assume that your local domain is “demo.local” so let’s go ahead and issue our first ssl certificate!
- Create a private key
demo.local.key
👉 NOTE WINDOWS USERS . Replace
\with^for multi line support in cmd.exe shell
openssl req \
-new -sha256 -nodes \
-out demo.local.csr \
-newkey rsa:2048 -keyout demo.local.key \
-subj "/C=IN/ST=State/L=City/O=Organization/OU=OrganizationUnit/CN=demo/emailAddress=demo@example.com"
2. Create new certificate using rootSSL certificate
👉 NOTE WINDOWS USERS . Replace
\with^for multi line support in cmd.exe shell
openssl x509 \
-req \
-in demo.local.csr \
-CA rootSSL.pem -CAkey rootSSL.key -CAcreateserial \
-out demo.local.crt \
-days 500 \
-sha256 \
-extfile <(echo " \
authorityKeyIdentifier=keyid,issuer\n \
basicConstraints=CA:FALSE\n \
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment\n \
subjectAltName=DNS:demo.local \
")
Final step — Use your SSL certificate with the server
Now you have to secure your localhost domain for which the certificate has been created. This will depend on the Webserver that you are using. But basically it means copying the demo.local.crt anddemo.local.key where your server can use them.
For example, for nginx, edit the virtual host file for demo.local and add the following:
ssl on;
ssl_certificate /etc/nginx/ssl/demo.local.crt;
ssl_certificate_key /etc/nginx/ssl/demo.local.key;Or For NodeJS HTTPs Server
const https = require("https");
const fs = require("fs");const options = {
hostname: "demo.local",
key: fs.readFileSync("demo.local.key"),
cert: fs.readFileSync("demo.local.crt")
};https
.createServer(options, (req, res) => {
res.writeHead(200);
res.end("hello world\n");
})
.listen(8888);
Restart the server and hit the domain. All should be green & good now.
For step by step “How to Use your SSL certificate with nginx, Apache or Nodejs server,” there is a 2nd post coming.
If you need any help in setting this up drop me a message at team@secureend.com.
If you enjoyed this post, don’t forget to leave claps and follow us for more interesting articles. If you need any react or react native work done, contact us over at https://secureend.com or on our twitter or facebook.
