Trusting SSL Locally on a Mac
I run most of my production sites with forced SSL, including CSS-Tricks. But locally, I’ve avoided getting SSL working properly. I’ve always avoided it, perhaps because it’s not immediately obvious how to do it. It’s also not that big of a deal since it’s just local traffic. But hey, might as well make local work as close to production is possible eh?
I’ve had situations come up where it was actually quite important and affected development. Like a native PHP function that worked differently on HTTPS than HTTP. More commonly, I was working on HTTP locally and an asset was loaded over HTTPS and thus failed (needed manual approval of the insecure certificate).
1) Locally Signed SSL Certificate through MAMP
I get frustrated with MAMP a lot, but it’s still working for me after all these years. Perhaps someday I’ll move to a Docker thing or something. But as yet-another small testament to MAMP, it makes SSL fairly easy to turn on. Click over to the SSL tab and check the SSL checkbox, and generate a self-signed certificate:
Note there are two entries here for my domain `css-tricks.dev`. That’s because one is SSL and one is not. That’s how you have to do it in MAMP if you want to serve content on that domain through both HTTP and HTTPS.
Now the site will serve over HTTP, but you’ll get this classic beauty:
No browser is a fan:
You can click past it generally, acknowledging the risks involved (there is no real risk locally) but then you still get the nasty insecure warning:
Trusting the Local Certificate through Keychain
The trick to trusting that local certificate happens at the system level through the program Keychain Access.
When you create the local certificate through MAMP, you were prompted to save it somewhere. Wherever you did that, find it, and drag the certificate into Keychain.
If you can’t remember where that certificate is because you created it like 100 years ago, you can get Chrome to give you a copy of it.
- Click the red warning exclamation point thing in the URL bar
- Click “View Details” in the SSL warning area
- It will show you a certificate information dropdown thing like this:
From there, you can click-and-drag the certificate icon out to wherever you want a copy. Then drag it into Keychain Access.
Then double-click the certificate in Keychain Access and expand the “Trust” area. You can adjust the “When using this certificate” option to “Always Trust”.
3) Have Happy Local Trusted SSL
Trusting SSL Locally on a Mac is a post from CSS-Tricks
