local ssl certificates that work

motivation

in web dev sometimes you are constrained to develop from behind a https:// local server. i spent two days making this work and i want to write it down here, so that next time apple upgrades OS X and i decide to do a clean install (forgetting to backup certain things) i dont waste this amount of time anymore (i hope).

maybe it helps someone else too. that would make me very happy too.

forget openssl

major pita to remember commands. i don't think there is anything better that makes your mom feel like you are a hacker, than showing her how to type:

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

i mean, who remembers this? plus it doesn't actually work. self signed but firefox and new chrome will still throw notices at you.

this page on letsencrypt explains it better. it also led me to the solution i am saving now.

finding something that works

first i tried minica which didnt work for me. i assume because i am too golang dumb.

but at least i managed to install golang, which you will need for the final solution.

after getting stuck with minica i started looking through issues with it and one thing lead to another: mkcert which i am not sure why it isnt a more established and well known solution.

their Readme is very good but if you are on mac you install it with:

brew install mkcert
brew install nss # if you use Firefox

after that, ...

mkcert -install

Created a new local CA at "/Users/filippo/Library/Application Support/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

running this: mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1 will generate the following output:

Using the local CA at "/Users/name/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜

"example.com"

"*.example.com"

"example.test"

"localhost"

"127.0.0.1"

"::1"

The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" ✅

these certs will work

if you have a local api, that you have running on localhost on some port eg: 4000, calls to it wont work from a https website.

setup that doesnt work

website: https://example.com
api: http://localhost:4000

you need to proxy a new tld for which you have generated certificates. in nginx, add

server {
    listen 8080;
    server_name api.example.com;
    listen 443 ssl;
    ssl_certificate     /Users/name/.certs/api.example.com.pem;
    ssl_certificate_key /Users/name/.certs/api.example.com-key.pem;
    location / {
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:4000;
        proxy_redirect off;
    }
}

setup that works

website: https://example.com
api proxied: https://api.example.com

cezarneaga/local-ssl-certificates-that-work.md