Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active March 19, 2024 23:31
Show Gist options
  • Save jonathantneal/774e4b0b3d4d739cbc53 to your computer and use it in GitHub Desktop.
Save jonathantneal/774e4b0b3d4d739cbc53 to your computer and use it in GitHub Desktop.
Local SSL websites on macOS Sierra

Local SSL websites on macOS Sierra

These instructions will guide you through the process of setting up local, trusted websites on your own computer.

These instructions are intended to be used on macOS Sierra, but they have been known to work in El Capitan, Yosemite, Mavericks, and Mountain Lion.

NOTE: You may substitute the edit command for nano, vim, or whatever the editor of your choice is. Personally, I forward the edit command to Sublime Text:

alias edit="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"

Configuring Apache

Within Terminal, start Apache.

sudo apachectl start

In a web browser, visit http://localhost. You should see a message stating that It works!.

Configuring Apache: Setting up a Virtual Host

Within Terminal, edit the Apache Configuration.

edit /etc/apache2/httpd.conf

Within the editor, replace line 212 to supress messages about the server’s fully qualified domain name.

ServerName localhost

Next, uncomment line 160 and line 499 to enable Virtual Hosts.

LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
Include /private/etc/apache2/extra/httpd-vhosts.conf

Optionally, uncomment line 169 to enable PHP.

LoadModule php5_module libexec/apache2/libphp5.so

Within Terminal, edit the Virtual Hosts configuration.

edit /etc/apache2/extra/httpd-vhosts.conf

Within the editor, replace the entire contents of this file with the following, replacing indieweb with your user name.

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Users/indieweb/Sites/localhost"

    <Directory "/Users/indieweb/Sites/localhost">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Within Terminal, restart Apache.

sudo apachectl restart

Configuring Apache: Creating a Site

Within Terminal, create a Sites parent directory and a localhost subdirectory, which will be our first site.

mkdir -p ~/Sites/localhost

Next, create a test HTML document within localhost.

echo "<h1>localhost works</h1>" > ~/Sites/localhost/index.html

Now, in a web browser, visit http://localhost. You should see a message stating that localhost works.


Configuring SSL

Within Terminal, create an SSL directory.

sudo mkdir /etc/apache2/ssl

Next, generate a private key and certificate for your site.

sudo openssl genrsa -out /etc/apache2/ssl/localhost.key 2048
sudo openssl req -new -x509 -key /etc/apache2/ssl/localhost.key -out /etc/apache2/ssl/localhost.crt -days 3650 -subj /CN=localhost

Finally, add the certificate to Keychain Access.

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/localhost.crt

Configuring SSL: Setting up a Trusted Virtual Host

Within Terminal, edit the Apache Configuration.

edit /etc/apache2/httpd.conf

Within the editor, uncomment lines 89 and 143 to enable modules required by HTTPS.

LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
LoadModule ssl_module libexec/apache2/mod_ssl.so

Next, uncomment line 516 to enable Trusted Virtual Hosts.

Include /private/etc/apache2/extra/httpd-ssl.conf

Back in Terminal, edit the Virtual Hosts configuration.

edit /etc/apache2/extra/httpd-vhosts.conf

Within the editor, add a 443 VirtualHost Name and localhost Directive at the end of the file, replacing indieweb with your user name.

<VirtualHost *:443>
    ServerName localhost
    DocumentRoot "/Users/indieweb/Sites/localhost"

    SSLEngine on
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
    SSLCertificateFile /etc/apache2/ssl/localhost.crt
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key

    <Directory "/Users/indieweb/Sites/localhost">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Back in Terminal, edit the SSL configuration.

edit /etc/apache2/extra/httpd-ssl.conf

Next, comment line 144 and 154 to skip the default Server Certificate and Server Private Key.

#SSLCertificateFile "/private/etc/apache2/server.crt"
#SSLCertificateKeyFile "/private/etc/apache2/server.key"

Next, beneath the commented certificates or keys, add references to your certificate and key.

SSLCertificateFile "/etc/apache2/ssl/localhost.crt"
SSLCertificateKeyFile "/etc/apache2/ssl/localhost.key"

Back in Terminal, restart Apache.

sudo apachectl restart

Now, in a web browser, visit https://localhost. The domain should appear trusted, and you should see a message stating that localhost works!.

@marquessbr
Copy link

marquessbr commented Aug 10, 2017

I follow the steps and only for a 'http' request work, but when I configure to request 'https' the server returned:
"Bad Request

Your browser sent a request that this server could not understand.
Reason: You're speaking plain HTTP to an SSL-enabled server port.
Instead use the HTTPS scheme to access this URL, please."

What is wrong?

thanks

@mrtargaryen
Copy link

Total noob here.

I run Searx meta search engine on localhost:8888

I installed Searx as per the instructions found here using Docker https://github.com/asciimoo/searx/wiki/Installation

I use Firefox with the addon https Everywhere and I like to block all unencrypted requests. So localhost:8888 won't work in Firefox.

Do you know if its possible to add an SSL cert to this local instance of Searx on localhost:8888 so I can use it in Firefox?

Thanks :)

@tsal
Copy link

tsal commented Sep 29, 2017

@mrtargaryen - the easiest way to do this is to create a local reverse proxy to port 8888. Nginx or Apache can do this, though Nginx is a little better documented for this purpose.

@aseem2625
Copy link

aseem2625 commented Oct 3, 2017

Not working for me. OSX Sierra(10.12.1)
I'm already having apache setup which I'm using for other projects.
I'm having some node server (not self-setup but it's invoked by gatsby command to be specific which runs on port 8000).

  1. So, for :443, my vhosts file instead looks like
<VirtualHost *:443>
    SSLEngine On
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
    SSLCertificateFile /etc/apache2/ssl/localhost.crt
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key

    ServerName dummylocaldomain.com
    ProxyPass / http://localhost:8000/
    ProxyPassReverse / http://localhost:8000/
</VirtualHost>

I just want to forward the request from https://dummylocaldomain.com to localhost:8000 which serves the website( **Note:**I've already mapped dummylocaldomain in my /etc/hosts to 127.0.0.1 if that matters )

I was able to follow all other steps though.. Any help?

@mildredn
Copy link

Works on Sierra! Thank you.

@bokybanton
Copy link

It works perfectly on OS X 10.13.1, LibreSSL 2.2.7 & Apache/2.4.27. The terminal cmd to add the certificate to OS X Keychain was very useful and pretty fast to work with Safari. :-P

@rafmjr
Copy link

rafmjr commented Feb 24, 2018

Beautiful! It work as expected! Thanks a lot!

@howar31
Copy link

howar31 commented Apr 3, 2018

Thanks this works on High Sierra!

@gillesgoetsch
Copy link

HighSierra 10.13.3 confirmed. Thanks!

@thapachaki
Copy link

Thank you very much! (10.13.4)

@blvkoblsk
Copy link

While Apache and NGINX are great, IMO, configuring them for localhost to serve SSL for local development is a bit overkill.

I would suggest to those that want something easier out-of-the-box - check out ngrok @ https://ngrok.com/

@reactnatively
Copy link

reactnatively commented Aug 4, 2018

Holy shit... thanks! Worked like a charm. (10.13.6) I'm working on a React Native project and you folks just saved the day.

@PradeepJaiswar
Copy link

Thanks works like charm :) thank you

@sonvirgo
Copy link

great, work on ubuntu 17.10 as well

@josully
Copy link

josully commented Sep 26, 2018

worked without issue....many thanks

@abdeljabar
Copy link

worked really wel!

@rodolforamos
Copy link

Thank you!!

@zviepner
Copy link

zviepner commented Mar 1, 2019

If you get a Connection Refused like @madhukarhere, check your httpd-ssl.conf to make sure the Listen port is 443, not 8443

curl: (7) Failed to connect to localhost port 443: Connection refused

@astlab
Copy link

astlab commented May 17, 2019

perfect, everything it's ok

@melaxon
Copy link

melaxon commented Apr 14, 2022

Hello! On macOS Monterey (12.3.1) and Apache 2.53 I always receive (on Firefox)
"Secure Connection Failed"
Error code: SSL_ERROR_RX_RECORD_TOO_LONG
Other browsers will not connect as well
No error message in apache logs and no record in access_log

when connect via https. While http works fine
Any idea how to handle it? I googled the entire internet but found nothing that helps

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment