If you are developing a Visual Studio .Net project with Visual Studio, Visual Studio will take care of setting up the SSL on your localhost. However, if you are not aiming for a .net project. you will have to set it up yourself. You need to create an SSL certificate and then reference it in your VS Code project. Not only must the website be secure, but it must also be trusted.
This tutorial will show you how to create a website that is both secure and trusted using the openssl software library that can be downloaded at https://www.openssl.org/. Unless your certificate is both secure and trusted. your browser will force you to take extra steps to open your website on localhost, warning you that you are opening a non-trusted site.
Creating the trusted root certification authority
To get a certificate that is both secure and trusted, you must first create a trusted root certification authority that will be just for your computer. This CA will be referenced when you create your actual SSL certificate. After you create the CA, you import it into your list of trusted root certification authorities and then you can use it to ensure SSL certificates you create later are trusted. At least by this computer.
To create this root certificate, execute these openssl commands in a cmd window.
openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/CN=My-Root-CA";
openssl x509 -outform pem -in RootCA.pem -out RootCA.crt
You have created the certificate. Now you have to add it to your library of trusted root certification authorities. If you plan to use Chrome or Edge, open settings, choose “security and privacy”, then “security”, and then “manage certificates.” Choose the tab “Trusted root certification authorities”, and then import the certificate you have just created called RootCA.crt. You will then see it on the list under the “issued to” name and the “issued by” name of My-Root-CA that we specified in the subject parameter. If you are using Firefox, there is a different setting.
Creating the SSL for your project
Now we can create the SSL certificate that we will use for a particular project and call it “mycert”. To do this, you generate an information file, then a key, then a signing request, and finally the certificate in four steps.
Be sure you are in the directory where you will create the certificate. Then create a text file containing the following.
authorityKeyIdentifier = keyid,issuer basicConstraints = CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost IP.1 = 127.0.0.1
Save this file as “mycert.ext.” This is the information file.
Now we will create the key for “mycert.” When you create the key, you will be asked to create a pass phrase. Remember what it is.
openssl genrsa -out mycert.key -des3 2048
Now create the signing request, “mycert.csr”. The request form will ask you some questions, such as your country and company. For common name, just enter “localhost”.
openssl req -new -key mycert.key -out mycert.csr
And finally generate “mycert.crt”, the certificate. Put in the correct location of your root CA. In my case, it is on my D drive in the “ca” folder.
openssl x509 -req -in mycert.csr -CA d:\ca\RootCA.pem -CAkey d:\ca\RootCA.key -CAcreateserial -days 3650 -sha256 -extfile mycert.ext -out mycert.crt
Now you have created a valid and trusted SSL certificate for use on localhost.
Telling Visual Studio code to use this certificate
The next step is to tell your project to use this certificate. In Visual Studio Code, create a new folder called “.vscode” Be sure to include the period. Create a file called “settings” and include the following text changing the password to your own pass code and the certificate location to your own location.
{
"liveServer.settings.port": 5501,
"liveServer.settings.root": "/",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.https": {
"enable": true,
"cert": "D:\\fth\\welcome\\mycert\\mycert.crt",
"key": "D:\\fth\\welcome\\mycert\\mycert.key",
"passphrase": "123456"
}
}
In this case, my certificate was in a folder on the “D” drive. Notice that you must escape the backslash character in the settings file by using two backslashes.
Now you can open your webpage and it will be secure and trusted. I use “live server” as my development server on localhost.