Three ways to fix the https error for .dev and .app domains in your Chrome

BACK

December 20th, 2017, posted in tech_stuff
by Indra

Most of our development is done on Vagrant so even though we have Homestead Grasshopper to help us with setting up the websites, we noticed after the latest Chrome update that we were required to use https for all .dev and .app domains. Fortunately, Vagrant comes with that out of the box, but it’s self signed so Chrome will no longer allow it.

Now, we have three options to fix this. I will only talk about two of the three options, but you can google the third:)

Option 1. BADIDEA Cheat Code
The Chrome developers had some fun with this one. What you need to do it’s go to the page that gives you headaches, and simply type badidea and reload the page. Yes, just blindly type badidea like a cheat code in GTA 3 and boom, it works. At least until the Chrome developers will change the cheat code.

Option 2. The Local Development Solution
Assuming you only plan on using the your_domain_name.dev locally then this is the droid you’re looking for.

Step 1. Go to your website. You will see something similar to this:

Step 2. On this page that has an untrusted certificate (https:// is crossed out in red), press F12 to open Developer tools. Go to Security and select View certificate.

Step 3. Click the Details tab look for Export or Copy to file  in some cases. Choose PKCS #7, single certificate as the format.

Click next, choose PKCS  #7 and the checkbox option “Include all certifications in the certification path if possible”.

Click finish. You will be prompted that the certificate was exported.


Step 4. Now open up Chrome Settings. You can find chrome settings in the top right corner (3 vertical dots).

Here scroll down and click Advanced.

Go to HTTPS/SSL -> Manage Certificates  (Manage HTTPS/SSL certificates and settings).


 

Step 5. Click Import. Choose the file to which you just exported the certificate. 

Choose PKCS  #7, single certificate that you just created.

 

Step 6. Click next and in the next screen click browse and  choose Trusted Root Certificate Authorities

Click finish. You will be asked if you are sure. Click yes.

If you go to the Trusted Root Certificate Authorities it will be in the list (mine is highlighted in blue).


 

Step 7. Restart Chrome.
 

Step 8. Rejoice.

 

Step 9. Wait! This needs to be done for every site with .dev or .app endings. Note: It should work the same for Mozilla.


Option 3. Please google “let’s encrypt certificate on vagrant”.

Hope you enjoyed this folks.

 


About the author

Indra

I am an experienced software engineer and team lead. I know my projects inside out – I have to. I’m the one making sure all the pieces fit together, the servers are up and running, and the hardest tasks get done. When I’m not doing that, I teach and do research at the university. I’m eager to upgrade my skills all the time and pass on to others what I know.

See more articles by Indra