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:

Screenshot of a quote tweet urging people to switch to Firefox from Chrome. Link to tweet follows image.

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:

Screenshot of Firefox complaining about potential security risk ahead.

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.

Screenshot of Firefox preferences page with arrows pointing to the elements.

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.

Screenshot of the Certificate Manager window with Authorities tab open and arrow pointing at the Import button.

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