Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Self-signed SSL certificates not working with MAMP and Chrome

SSL certificates created by MAMP are not working in Chrome. I'm getting a "Not secure" issue.

Is there a workaround for this?

enter image description here

like image 364
codewithfeeling Avatar asked Jun 16 '17 09:06

codewithfeeling


People also ask

How do I enable self-signed certificate in Chrome?

Navigate to the site with the cert you want to trust, and click through the usual warnings for untrusted certificates. In the address bar, right click on the red warning triangle and "Not secure" message and, from the resulting menu, select "Certificate" to show the certificate.

How do I add a self-signed certificate to trusted in Chrome on Mac?

The process is as follows: Open the offending site in Chrome. Click on little bang icon at the right hand end of the address bar. Hold down the Option key and drag the certificate from the popup dialog to the desktop.


4 Answers

**NOTE: Since I posted this, Google have acquired the .dev top level domain, so it's not advised to use .dev hostnames for your local development. I use *.dv now. When reading this answer, please replace .dev with .test or something else when recreating the steps in your own project. Use of .local is not advised **

Chrome now requires SSL certificates to use the "Subject Alt Name" (SAN) rather than the old Common Name. This breaks self-signed certs previously generated by MAMP.

Fortunately, the workaround is pretty straightforward.

Here are all the steps from the very first moment of setting a host to be SSL in MAMP Pro. If you previously created SSL certificates in MAMP, then I've found that deleting them and starting again using this method works.

  1. Create your hostname, eg. test.dev and select your document root

  2. Click the SSL tab, and check the "SSL" box. Make sure you leave the other checkbox "Only allow connections using TLS protocols" unchecked.

Screenshot showing SSL panel in MAMP Pro

  1. Click the "Create self signed certificate" button and fill in the popup form with the relevant details. Click "Generate" and save the certificate in /Applications/MAMP/Library/OpenSSL/certs/

Screenshot of SSL certificate creation popup form in MAMP Pro

  1. Save your changes in MAMP, and restart the servers.
  2. Click the round arrow button beside "Certificate file" in the MAMP SSL panel (Show in Finder). Double click the .crt file that is highlighted - it should be named like your host, eg. if your host is test.dev then your certificate file will be test.dev.crt. This should open Keychain Access and you should see the new certificate in there.
  3. Right click / Control click on the certificate, and choose "Get Info". Click the drop-down triangle beside "Trust"

Screenshot of Mac Keychain Access for certificate

  1. From the "When using this certificate" selector, choose "Always Trust" - every selector should change to show "Always Trust". Close that window. It will ask for your Mac OS system password to make that change. You should see that the certificate icon shows a little blue plus sign icon over it, marking it as trusted.

enter image description here

  1. Restart Chrome.
  2. Visit your new hostname, and enjoy the green https in the browser bar.

Screenshot of https working in Chrome

like image 79
codewithfeeling Avatar answered Oct 18 '22 05:10

codewithfeeling


I followed the answers. What worked for me was setting the port number to 443 in the general tab

like image 41
Jadrenko Avatar answered Oct 18 '22 05:10

Jadrenko


If the solution above doesn't help, go to chrome://flags look for "Allow invalid certificates for resources loaded from localhost" and enable it, restart Chrome and you should be good to go.

like image 30
Xelance Avatar answered Oct 18 '22 06:10

Xelance


For those that are still having issues, try using port 8890. The default MAMP ssl port is 8890 so visit https://test.dev:8890. Worked for me.

like image 3
Douglas Rogers Avatar answered Oct 18 '22 06:10

Douglas Rogers