How to setup valid SSL on WSL

About 2 minutes to read. Posted on April 5, 2021 14:41

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:

  1. Type "mmc" into the start menu
  2. Open the "Microsoft Management Console"
  3. Select "File" -> Add/Remove Snap-in... or use the hotkey CTRL + M
  4. Select "Certificates" and click "Add >"
  5. In the popup select "My user account" and "Finish"
  6. Close the dialog by selecting "OK"
  7. In the Tree unter "Console Root" (on the left of the window) select the option "Certificates", then "Trusted Root Certification Authorities" and lastly "Certificates"
  8. Select "Action" from the top bar and then "All Tasks" and "Import..."
  9. Click next and navigate to the .crt file you created on your WSL
  10. Click next again two times and then "Finish"
  11. You will be warned that adding a certificate is a security risk. Confirm you want to add it.
  12. 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.

Troubleshooting

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.