How to setup valid SSL on WSL
Having a valid SSL certificate locally seemed to be the holy grail to me just 24 hours ago. Today I bit the bullet and went through installing one. In this article I'll show you how it can be done in about 15 minutes. I'm using WSL (Windows Subsystem for Linux) to host my code and application servers (Apache, Node, etc) and accessing the sites via the Windows host.
First, a screenshot of the finished product (my OS is german):
Step 1: Generate SSL Cert
I suggest you create a new directory to work in and make sure you have openssl installed.
mkdir cert cd cert openssl version
Next we're going to create a configuration file for openssl called "v3.ext". The name really doesn't matter, but if you use the same name it will make copy & pasting easier. Be sure to replace the [[DOMAIN]] placeholder with the domain name you wish to use.
[req] distinguished_name = req_distinguished_name x509_extensions = v3_req prompt = no [req_distinguished_name] C = US ST = VA L = SomeCity O = MyCompany OU = MyDivision CN = [[DOMAIN]] [v3_req] authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = [[DOMAIN]]
Next we can generate the cert files with the following command:
openssl req -newkey rsa:4096 -x509 -sha256 -days 3650 -nodes -out local.crt -keyout local.key -config v3.ext
Lastly, if you need a .pem file you can simply use these two command to create one:
cat local.key > local.pem cat local.crt >> local.pem
Now you should have all the cert files you need.
Step 2: Adding the Certificate as a trusted Authority in Windows 10
You can use the file that was generated above to configure your applications, but the certificate will show up as untrusted in the browser. To make the Certificate trusted (on your local computer) follow these steps:
- Type "mmc" into the start menu
- Open the "Microsoft Management Console"
- Select "File" -> Add/Remove Snap-in... or use the hotkey CTRL + M
- Select "Certificates" and click "Add >"
- In the popup select "My user account" and "Finish"
- Close the dialog by selecting "OK"
- In the Tree unter "Console Root" (on the left of the window) select the option "Certificates", then "Trusted Root Certification Authorities" and lastly "Certificates"
- Select "Action" from the top bar and then "All Tasks" and "Import..."
- Click next and navigate to the .crt file you created on your WSL
- Click next again two times and then "Finish"
- You will be warned that adding a certificate is a security risk. Confirm you want to add it.
- Now you can close the window. You don't need to save your changes (it only saves the view, not the changed setting)
Step 3: Add your certificate to the application
Now the only thing left to do is configure your application to use the new certificate. There are already a number of tutorials out there for different applications: Apache2, nginx or, like in my case, for the Vue CLI tool.
Here are some issues I had and the solutions I found:
Subject Alternative Name Missing
Active content with certificate errors
Thank you for reading
I hope you enjoyed the article and maybe even learned something. If you would like to stay in contact I have a mailing list or you can reach out to me via social media.