Web Developer Guide: Make Chrome or Firefox recognize your local https site

As a developer, we’ve been into a situations where we need to setup https to our local machine. So we setup our self-signed SSL certificates and apply to our local site. However, once we access it on the browser we encounter the following warnings:

Google Chrome

Firefox

For some this might not be a problem, but for me who works with PWA (Progressive Web Applications) this affects the service worker to not work properly, so a fix is needed.

So how to solve this?

BUT FIRST a disclaimer: My steps to resolve might not be the same with everyone, however the idea of solving the issue should be the same AND I presume that you guys already setup self-signed SSL certificate at this point.

Final disclaimer: If you are running your local site via Webpack, Grunt, Gulp, etc. this method will not work since it runs its own web server, this will be a different topic but there’s an alternative solution for this 😉.

Final final disclaimer: the solution is intended for local environment only and not recommended to do the same in production or untrusted websites becausethis involves a huge security risk

In order for Chrome or Firefox to recognized our local https site, we must locate the .crt file that was generated when we setup our self-signed SSL certificate before.

Luckily I’m using Laravel Homestead on my machine which already generated the SSL certificate for me. So I found out that the SSL certificates where generated under the /etc/nginx/ssl path and I looked for the ca.homestead.homestead.crt file which is the base SSL file for Homestead (for people that’s not using Homestead, find the .crt of your site instead) and then I download it to your host machine (via copying the .crt file to my shared folders).

Once you got your certificate file, here’s how you set it up to each browser:

For Google Chrome

1. Go to Settings > Manage Certificates and it should open a Certificates popup
2. Go to the Trusted Root Certification Authorities tab and click on “Import”, it will open the import certificate wizard popup
3. Proceed with the steps until it will ask you for the certificate just click on Browse then locate the .crt file
4. Proceed again, and make sure that Trusted Root Certification Authorities is selected
5. Proceed and click on “Finish ”to complete the setup
6. Restart your browser and viola! your self-signed SSL should now be recognized by the browser. 🎉

For Firefox

1. Go to Settings (about:preferences) > Privacy & Security > View Certificates, it should popup the Certificates Manager window
2. Go to Authorities tab and click on “Import…”, then locate the .crt file
3. Check the box: Trust this CA to identify websites, then click on “OK”
4. Restart your browser and viola! your self-signed SSL should now be recognized by the browser. 🎉

ℹ For browsers not mentioned, the thought should be the same just find the certificate manager in the settings and import your certificate there, theoretically it should work.

Alternative solutions

Some people might find this confusing or some can’t find where they have stored the .crt file for their local site, fret not there are alternative ways for you to work with https locally.

ngrok

Remember my second disclaimer earlier? this allows you to tunnel your running site and expose it to the web and it comes with https. I recommend that you check this out.

Laravel Valet

If you’re using Mac then this will help you speed up with setting up local sites without modifying configurations (eg: /etc/hosts) and it can also setup https site for you which is cool. So I also recommend that you check this out, it’s awesome 😎

So far that’s all I have at the moment, so feel free to comment if I miss-out some details or if you guys can add alternative solution in the list.

I hope this help some web developers who were scratching their head until now to resolve this 😁