Self-signed SSL certificates not working with MAMP and Chrome

google-chrome ssl mamp mamp-pro
codewithfeeling picture codewithfeeling · Jun 16, 2017 · Viewed 14.8k times · Source

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

Answer

codewithfeeling picture codewithfeeling · Jun 16, 2017

**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

Related questions

Getting Chrome to accept self-signed localhost certificate

I have created a self-signed SSL certificate for the localhost CN. Firefox accepts this certificate after initially complaining about it, as expected. Chrome and IE, however, refuse to accept it, even after adding the certificate to the system certificate store …

Read More
SSL certificate is not trusted - on mobile only

My site is working great over SSL in my desktops (chrome) I have a green lock near the address bar saying "Identity verified" But using a mobile mobile browser (Chrome/Safari)I see the following message - "The identity of …

Read More
Invalid self signed SSL cert - "Subject Alternative Name Missing"

Recently, Chrome has stopped working with my self signed SSL certs, and thinks they're insecure. When I look at the cert in the DevTools | Security tab, I can see that it says Subject Alternative Name Missing The certificate for this …

Read More