Get Firefox to trust your self signed certificates
How to get Firefox to trust all self signed certificates you use locally to serve your development sites over https and not complain about them.
Jump straight to the solution.
I’ve been using Chrome for a long time to develop my sites / plugins / functionalities. Most of the time that means running a local server with a self signed certificate, because even sandboxed payment gateways require SSL connection.
Recently Google hasn’t exactly been amazing when it comes to directions Chrome takes, see this here tweet:
Link: https://twitter.com/vruba/status/1191104694581465088?s=19
I’ve tried to move to Firefox a number of times, but something always stood in my way, and solving them was a lot more inconvenient than just going back to Chrome.
That said I decided to give it a go once more.
The thing that stood in my way this time was Firefox’s insistence that it wants to remain secure, which is a good thing! However somewhat annoying when I’m trying to develop a site locally and all I have is a self signed certificate courtesy of Laravel Valet, and Firefox gives me this face no matter which site I visit on the .test TLD:
In previous versions of Firefox (currently it’s 70.0.1) I could add an exception per site. I can still do that if I click on the “Advanced...” button, then the “I understand the risk, and want to continue” button, but that becomes tedious. Plus the little lock icon will have a yellow warning triangle, which will bug me forever.
I sought some help from others a lot smarter than me, and got the same solution from both of them. Thanks Garrett and Joel!
Solve the self signed cert thing
We need to Valet’s own signing certificate to the trusted certificate list in Firefox. Valet uses this master cert to create the individual site specific ones you spin up.
To do that, go to Preferences -> Privacy & Security -> Certificates heading, and click the “View Certificates” button.
Then in that new window, navigate to the “Authorities” tab, click the “Import...” button, and find the certificate file in the ~/.config/valet/CA/ directory. It’s the .pem file.
On mac you might need to press Cmd + Shift + G to bring up the direct navigate to directory dialog, as the finder window won’t display hidden files and folders.
Essentially it’s the same as this: https://github.com/laravel/valet/issues/296#issuecomment-447604765.
I reproduced the images and walkthrough here in case that link becomes unavailable for whatever reason.
Photo by Collin Armstrong on Unsplash