Localhost SSL Certificate on Mac OS

localhost-ssl-certificate.md

🚨 2020 Update: I recommend using mkcert to generate local certificates. You can do everything below by just running the commands brew install mkcert and mkcert -install. Keep it simple!

---

This gives you that beautiful green lock in Chrome. I'm assuming you're putting your SSL documents in /etc/ssl, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.

Set up localhost.conf

sudo nano /etc/ssl/localhost/localhost.conf

Content:

[req]
default_bits = 1024
distinguished_name = req_distinguished_name
req_extensions = v3_req

[req_distinguished_name]

[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Commands

Run these commands:

sudo openssl genrsa -out /etc/ssl/localhost/localhost.key 2048
sudo openssl rsa -in /etc/ssl/localhost/localhost.key -out /etc/ssl/localhost/localhost.key.rsa

If you're changing the domain from localhost then update the variable CN in the following:

sudo openssl req -new -key /etc/ssl/localhost/localhost.key.rsa -subj /CN=localhost -out /etc/ssl/localhost/localhost.csr -config /etc/ssl/localhost/localhost.conf

I set the certificate to expire in 10 years (3650 days).

sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/ssl/localhost/localhost.csr -signkey /etc/ssl/localhost/localhost.key.rsa -out /etc/ssl/localhost/localhost.crt -extfile /etc/ssl/localhost/localhost.conf
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/ssl/localhost/localhost.crt

Done.

Bonus: BrowserSync works over HTTPS

The whole reason I got into this was to get browserSync to work over HTTPS. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:

browserSync.init({
  https: {
    key: "/etc/ssl/localhost/localhost.key",
    cert: "/etc/ssl/localhost/localhost.crt"
  },
});

Or in Webpacks (webpack.config.watch.js or webpack.config.js):

new BrowserSyncPlugin({
  advanced: {
    browserSync: {
      https: {
        key: "/etc/ssl/localhost/localhost.key",
        cert: "/etc/ssl/localhost/localhost.crt"
      },
    }
  }
}),

it works, thank u!

Works like a charm, thank you. I needed pem files, but it was an easy extra step to export the .crt and .key to .pem.

Thanks for this! Same for me I had to convert both to .pem for this to work.

sudo openssl x509 -in /etc/ssl/localhost/localhost.crt -out /etc/ssl/localhost/localhost.pem
sudo openssl rsa -in /etc/ssl/localhost/localhost.key -out /etc/ssl/localhost/localhost.key.pem

just one question @ethicka @pbalan before I try, if instead of using localhost as my domain name I want to use otherone , should I change :

[alt_names]
DNS.1 = DOMAIN.COM

I'm new into the macos environment

Great dude, this worked for localhost and any domain name locally.
Thank you

Thank you so much @ethicka.

And for those are still struggling on macOS checkout these projects, they have it out of the Box!

1. PhpWebStudy
2. And From Laravel valet or their latest product Herd

Enjoy!