{"id":244822,"date":"2016-08-24T05:31:14","date_gmt":"2016-08-24T12:31:14","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244822"},"modified":"2016-08-24T05:31:14","modified_gmt":"2016-08-24T12:31:14","slug":"trusting-ssl-locally-mac","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/trusting-ssl-locally-mac\/","title":{"rendered":"Trusting SSL Locally on a Mac"},"content":{"rendered":"

I run most of my production sites with forced SSL, including CSS-Tricks<\/a>. But locally, I’ve avoided getting SSL working properly. I’ve always avoided it, perhaps because it’s not immediately obvious how to do it. It’s also not that big of a deal since it’s just local traffic. But hey, might as well make local work as close to production is possible eh?<\/p>\n

<\/p>\n

I’ve had situations come up where it was actually quite important<\/em> and affected development. Like a native PHP function that worked differently on HTTPS than HTTP. More commonly, I was working on HTTP locally and an asset was loaded over HTTPS and thus failed (needed manual approval of the insecure certificate). <\/p>\n

1) Locally Signed SSL Certificate through MAMP<\/h3>\n

I get frustrated with MAMP a lot, but it’s still working for me after all these years. Perhaps someday I’ll move to a Docker thing or something. But as yet-another small testament to MAMP, it makes SSL fairly easy to turn on. Click over to the SSL tab and check the SSL checkbox, and generate a self-signed certificate:<\/p>\n

\"\"
I don’t know why the entries are in “error red”. It just started doing that, even though things seemingly work fine. Squint.<\/figure>\n

Note there are two<\/strong> entries here for my domain `css-tricks.dev`. That’s because one is SSL and one is not. That’s how you have to do it in MAMP if you want to serve content on that domain through both<\/strong> HTTP and HTTPS. <\/p>\n

Now the site will serve over HTTP, but you’ll get this classic beauty:<\/p>\n

\"\"<\/figure>\n

No browser is a fan:<\/p>\n

\"\"<\/figure>\n

You can click past it generally, acknowledging the risks involved (there is no real risk locally) but then you still get the nasty insecure warning:<\/p>\n

\"\"<\/figure>\n

Trusting the Local Certificate through Keychain<\/h3>\n

The trick to trusting that local certificate happens at the system level through the program Keychain Access. <\/p>\n

When you create the local certificate through MAMP, you were prompted to save it somewhere. Wherever you did that, find it, and drag the certificate into Keychain. <\/p>\n

\"\"<\/figure>\n

If you can’t remember where that certificate is because you created it like 100 years ago, you can get Chrome to give you a copy of it. <\/p>\n

    \n
  1. Click the red warning exclamation point thing in the URL bar<\/li>\n
  2. Click “View Details” in the SSL warning area<\/li>\n
  3. It will show you a certificate information dropdown thing like this:<\/li>\n<\/ol>\n
    \"\"<\/figure>\n

    From there, you can click-and-drag the certificate icon out<\/strong> to wherever you want a copy. Then drag it into Keychain Access.<\/p>\n

    Then double-click the certificate in Keychain Access and expand the “Trust” area. You can adjust the “When using this certificate” option to “Always Trust”.<\/p>\n

    \"\"<\/figure>\n

    3) Have Happy Local Trusted SSL<\/h3>\n
    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

    I run most of my production sites with forced SSL, including CSS-Tricks. But locally, I’ve avoided getting SSL working properly. I’ve always avoided it, perhaps because it’s not immediately obvious how to do it. It’s also not that big of a deal since it’s just local traffic. But hey, might as well make local work […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[821,820,819],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":341482,"url":"https:\/\/css-tricks.com\/local-always-getting-better\/","url_meta":{"origin":244822,"position":0},"title":"Local: Always Getting Better","date":"May 31, 2021","format":false,"excerpt":"I've been using Local for ages. Four years ago, I wrote about how I got all my WordPress sites running locally on it. I just wanted to give it another high five because it's still here and still great. In fact, much great than it was back then. Disclosure, Flywheel,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-27-at-7.31.26-AM.png?fit=1200%2C768&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197099,"url":"https:\/\/css-tricks.com\/moving-to-https-on-wordpress\/","url_meta":{"origin":244822,"position":1},"title":"Moving to HTTPS on WordPress","date":"March 6, 2015","format":false,"excerpt":"I just recently took CSS-Tricks \"HTTPS everywhere\". That is, every URL on this site enforces the HTTPS (SSL) protocol. Non-secure HTTP requests get redirected to HTTPS. Here are some notes on that journey. Why do it? General security. When you enforce HTTPS, you're guaranteeing no information passed between the server\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":255916,"url":"https:\/\/css-tricks.com\/local-by-flywheel\/","url_meta":{"origin":244822,"position":2},"title":"Local by Flywheel","date":"July 6, 2017","format":false,"excerpt":"I've switched all my local WordPress development over to Local by Flywheel. I heard about it from y'all when we did a poll not to long ago about local WordPress development. Bottom line: it's really good. It does everything you want it to, well, with zero hassle, and nothing more.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261483,"url":"https:\/\/css-tricks.com\/getting-around-revoked-certificate-osx\/","url_meta":{"origin":244822,"position":3},"title":"Getting Around a Revoked Certificate in OSX","date":"October 27, 2017","format":false,"excerpt":"Let me start this off by saying this is not an ideal trick and one I hope no one else needs to use because it's a bad idea to work around a browser feature that's aimed to protect your security. That said, I am in the process of testing a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300586,"url":"https:\/\/css-tricks.com\/gogetssl\/","url_meta":{"origin":244822,"position":4},"title":"GoGetSSL","date":"December 26, 2019","format":false,"excerpt":"Hey, Chris here. I'm pulling this sponsored post. It was for a paid SSL service. I'm very much not an SSL expert. I've always relied on my host to install SSL certificates on my servers and manage it. I know enough that I know about Let's Encrypt and how that's\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249348,"url":"https:\/\/css-tricks.com\/develop-locally-use-images-production\/","url_meta":{"origin":244822,"position":5},"title":"Develop Locally, Use Images from Production","date":"December 29, 2016","format":false,"excerpt":"Working on your website locally means having the files that make your website tick right there on your computer. It's common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244822"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244822"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244822\/revisions"}],"predecessor-version":[{"id":244865,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244822\/revisions\/244865"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}