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
Have you tried using Vagrant for your local web server? That way, you can get as close as possible to the production environment. It also allows you to create a different VM for each site so that you aren’t limited to just the configuration of your MAMP stack for all sites you develop.
If you do a lot of WordPress development, Vagrant with VVV is really helpful.
Bypass the fact it’s a mac, run it on a separate box (or VM) with rsync keeping the live SSL’s.
It does increase your risk of a hacker being able to MITM if you are breached, so transfer over ssh with key-file (encrypt all the connections)
Great tip. I think I have the same work environment like you and this was also a problem I was having, not actually a problem but the lack of patience to try, but now with everything moving to https I should also made the update. I wonder if Codekit local development will also work with sites on https, I will try it :)
Love the nice little tips Chris. I will sometimes work on a local machine (with mamp for convenience) where things just feel slightly faster. Considering the past “encouragement” made by Google for turning all content to SLL, this certainly has made life simpler as I work on moving certain sites over. Keep em coming ;)
Wonderful! I was looking for this a while ago but like others just gave up after fruitless searching…
For anyone using subdomain multisite – MAMP disables aliases when enabling SSL because you need separate certs for each subdomain. So you’ll need to stand each subdomain up as a separate host entry (including the subdomain).
Nice little trick Chris and thanks for sharing.
When copying/dragging the certificate from Chrome on a Mac and trusting it in Keychain you can delete the copied certificate file. So, when you drag the certificate out of Chrome you don’t need to place it in a long term storage location. Unless of course you really want to.
The Chrome copy trick also works great for virtual environments where the certificate is not accessible from the host computer.
You can also add it to your keychain programmatically via command line:
Works great for repetitive use.
If you are running on a Mac you should check out Valet (https://laravel.com/docs/5.3/valet) from Laravel but it supports loads of different CMS’s/Frameworks and getting SSL working without any hassle is as simple as typing
valet secure, I binned off MAMP as soon as it came out.Rasso Hilber writes in to say:
Geoff wrote about SSL certificates more recently: