Generate Valid Self Signed Certificate

While attempting to create self-signed certificates on my local dev environment, I followed several certificate creation strategies from many respected articles, each of which failed to create a legitimate HTTPS web page. Most browsers have increased the requirements for what valid certificates are, and so many articles out there are no longer accurate. I consistently would get the browser warning saying that my local site is insecure and not HTTPS.

Upon examining the Security tab in Chrome dev tools, I would see the following error:

Apparently I was missing the “Subject Alternate Name” parameter in the certificate I had been creating. I came across this answer from Stack Overflow, tested it out, and it worked perfectly for me.

To summarize- to create a valid self-signed certificate, create a file named req.cnf with this content:


[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = US
ST = CA
L = Los Angeles
O = Company Name
OU = Company Work Section
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = www.localhost
DNS.2 = localhost


Fill out your country, state, company name, company section, and the name of your local website obviously. Then in the terminal or command prompt, navigate to the parent folder of the location you saved this file in. Enter the following in the terminal, which will generate the cert.key and cert.pem files needed:


openssl req -x509 -nodes -days 730 -newkey rsa:2048 -keyout cert.key -out cert.pem -config req.cnf -sha256


This will generate the valid self-signed certificate and key needed. You must also allow your computer to trust these certificates, and place them in the correct location for your web server to trust and acknowledge them properly.

Once complete, you will see something like the following in the Security tab in dev tools: