Self-signed SSL certificates not working with MAMP and Chrome
I use MAMP Pro for most of my PHP development and Chrome has annoyingly been blocking the self-signed SSL certificates MAMP generates, saying the certificate is not valid and “Your connection is not private”:
Thankfully, I found an easy solve to fix this. These steps assume you’ve created a host in MAMP. You’ll need to go to the SSL tab of the host you are trying to fix and
- Check the SSL button
- Click the self-signed certificate button.
- Fill in the fields in the dialog modal and click Generate
- You’ll be prompted to save the certificate. Choose whatever location you’d like.
- Click on the circle with the arrow to open the directory where the certificate was saved.
- In the finder window that opens, double click the .crt file (be sure it’s the same file name that’s in the SSL window in case you have multiple).
- In the Add Certificate window, click Add. I testing adding it to login and system and both worked, so add whichever you prefer.
- In the Certificates Window, double click the certificate. It’s easier to filter by name if you have a lot of items.
- In the next modal window, choose Always Trust from the dropdown.
- Close out the next confirmation window, and you’ll be prompted to authenticate with your mac login to save the updates.
Go back to Chrome, and reload the page and the certificate should work now:
SSL, jQuery, and CDN
I just got whacked by a minor bug with SSL and the Google CDN (totally my fault, not theirs). I stuck the reference to the CDN in my master page not realizing one of the pages would be served up as secured by the vendor due to compliance issues. It made it through all testing because none of the staging/dev environments were configured for SSL and I was not made aware of the fact that we’d be serving the page up through SSL. Internet Explorer 8 prompted users about the insecure content before rendering the page. In their infinite wisdom, Microsoft decided to implement a new workflow for insecure content where the content is ignored and the page renders immediately with the unsecured content ignored. Since jQuery was used on multiple parts of the form, the site essentially broke. Google Chrome and Firefox seem to recognize the CDN as a trusted source and render the page as expected.
To fix the site, I added a javascript check to set the appropriate prefix to the CDN call:
<script>// <![CDATA[ var gaJsHost = (("https:" == document.location.protocol) ? "https://" : "http://"); document.write(unescape("%3Cscript src='" + gaJsHost + "ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); // ]]></script>