Source

How to install an SSL certificate on localhost / MAMP

If you do development on your own machine, then deploy to production, and you have an SSL certificate on your site, it is usefull to have SSL on your localhost environment. This guide will take you through all the necessary steps to get a working certificate on localhost.

The instructions are based on macOS Sierra 10.12.5, using MAMP (apache) and Chrome 59.

Generating a self-signed certificate for local use

Open up a terminal and create a directory called ssl in your root folder. We now need to enter that directory by typing:

$ mkdir ~/ssl/
$ cd ~/ssl

Next up, create a file named server.csr.cnf. And copy the following information (for more information about what each field after [dn] does you can check out this guide by Oracle).

$ nano server.csr.cnf

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=DE
ST=Berlin
L=Berlin
O=sym
OU=dev
emailAddress=mail@friedrich-schultheiss.de
CN = localhost

Press Ctrl + X, Y, Enter to save the file.

Create a file v3.ext and paste the following content:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
DNS.2 = local
DNS.3 = *.dev
DNS.4 = *.local
DNS.5 = sym.dev

Next paste the following line which will generate a RSA private rootCA key. And from that the root certificate which will be valid for 1024 days:

$ openssl genrsa -des3 -out ~/ssl/rootCA.key 2048
$ openssl req -x509 -new -nodes -key ~/ssl/rootCA.key -sha256 -days 1024 -out ~/ssl/rootCA.pem

Afterwards we can create the private key for the certificate (server.key):

$ openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

And finally we generate the certificate (server.crt):

$ openssl x509 -req -in server.csr -CA ~/ssl/rootCA.pem -CAkey ~/ssl/rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

This should be it! You can verify the certificate has the SAN by typing the following in the terminal:

$ openssl x509 -text -in server.crt -noout

Which should contain this line:

             X509v3 Subject Alternative Name: 
             DNS:localhost

Adding the rootCA.pem to the list of trusted root CA's

Before the certificate is accepted by your browser, the rootCA.pem needs to be added to the list of trusted root CA's. You can do this by opening Keychain Access, click on the 'System' keychain and select the 'Certificates' category. This should return something like this:

![][4]

![][5]

To add the rootCA.pem file, click on the plus sign near the bottom-left corner of 'Keychain Access'. Add the rootCA.pem file and you will see it listed with a red cross, notifying you the certificate is not trusted.

![][4]

![][6]

For the certificate to work we need to make sure the certificate is trusted. To do so, doubleclick on the 'localhost' certificate, expand 'Trust' and in the field 'When using this certificate' select 'Always Trust', like this:

![][4]

![][7]

Exit the menu and your certificate should now look like this:

![][4]

![][8]

We are now ready to configure Apache!

Configuring Apache for SSL

The Apache configuration files we need to configure for the use of the certificate are httpd.conf located at /../MAMP/apache/conf/httpd.conf and httpd-ssl.conf located at /../MAMP/apache/conf/extra/httpd-ssl.conf.

Make a backup of your current configuration before you continue!

Configuring httpd.conf

First open the httpd.conf file and uncomment the following lines:

LoadModule ssl_module modules/mod_ssl.so

Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

It could be these lines are already uncommented or not present. When they are not present you can add them.

Next set the Servername to localhost:443 (make sure there is only one Servername defined in the file)

Servername localhost:443

These are all changes you need to make in httpd.conf!

Configuring httpd-ssl.conf

Then in the httpd-ssl.conf file do the following:

Set Listen to 443

Listen 443

Note: From MAMP 4.4.1 onwards, adding this might not be necessary. If Apache fails to start with the 'could not bind to address [::]:443′ error, you might have to comment out the 'Listen 443' line by placing # in front of it.

Next find the virtualhost configuration which looks something like this:

General setup for the virtual host

DocumentRoot "/Applications/MAMP/Library/htdocs"
ServerName localhost:443
ServerAdmin you@example.com
ErrorLog "/Applications/MAMP/Library/logs/error_log"
TransferLog "/Applications/MAMP/Library/logs/access_log"

SSL Engine Switch:

Enable/Disable SSL for this virtual host.

SSLEngine off

A couple of things need to be changed in this configuration. First, the VirtualHost should be set to *:443, instead of default:443. Make sure the DocumentRoot is correct. The ServerName should be changed to localhost:443. Finally, the SSLEngine needs to be set to on. The result should look like this:

General setup for the virtual host

DocumentRoot "/Applications/MAMP/htdocs"
ServerName localhost
ServerAdmin you@example.com
ErrorLog "/Applications/MAMP/Library/logs/error_log"
TransferLog "/Applications/MAMP/Library/logs/access_log"

SSL Engine Switch:

Enable/Disable SSL for this virtual host.

SSLEngine on

Note: The DocumentRoot might not be necessary anymore from MAMP 4.4.1. onwards. If you see 404 errors on https://localhost but the site works fine on http://localhost, try commenting out the DocumentRoot line (by placing a # in front of it). MAMP might put both DocumentRoots together, resulting in it looking for /Applications/MAMP/htdocs/Applications/MAMP/htdocs, which fails.

Finally specify the SSLCertificateFile and SSLCertificateKeyFile directives. Add the location of the .crt file you have generated earlier after SSLCertificateFile.

Add the location of the .key file to the SSLCertificateKeyFile directive.

In my case, it only worked after copying certificate and key to MAMPs apache folder.

$ cp ~/ssl/server.crt /Applications/MAMP/conf/apache/server.crt
$ cp ~/ssl/server.key /Applications/MAMP/conf/apache/server.key

SSLCertificateFile "/Applications/MAMP/conf/apache/server.crt"
SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server.key"

You can copy the server.crt and server.key file to another directory if you'd like but be sure to define the right path in httpd-ssl.conf.

Visit https://localhost to see if it works:

![][4]

![][9]

That's it! You should now have a local development environment with SSL!

Troubleshooting issues after updating MAMP

After updating MAMP to version 4.4.1. our configuration didn't work anymore. First we got the following error: could not bind to address [::]:443.

what this means is that apache cannot start because port 443 is already in use. This happens when there are multiple 'Listen 443' lines defined. This can be fixed by removing the 'Listen 443' line from httpd.conf. Leave the 'Listen 443' in httpd-ssl.conf. You can find possible duplicates by running the following command in the Terminal:

grep -r listen /Applications/mamp/conf

This will show all instances of 'listen' in the MAMP configuration directory.

Once that error was resolved the SSL certificate was working but all https://localhost requests resulted in a 404 error. This error was happening because the 'DocumentRoot' was defined twice, in both httpd.conf and httpd-ssl.conf. Removing the DocumentRoot from the httpd-ssl.conf resolved this issue. Now MAMP is back up and running.

We also experienced that Apache doesn't write all errors to the apache_error.log file in the /logs/ directory. If that happens, try to restart Apache via the Terminal (command line) using this command:

sudo /Applications/MAMP/Library/bin/apachectl restart

It is possible that restarting Apache in this way will show errors that didn't make it to the log file, making it a lot easier to troubleshoot issues.

[4]: data:image/gif%3Bbase64%2CR0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs%3D [5]: https://really-simple-ssl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-21-at-11.33.44-1024x622.png [6]: https://really-simple-ssl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-21-at-11.36.26-1024x204.png [7]: https://really-simple-ssl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-21-at-11.38.04.png [8]: https://really-simple-ssl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-21-at-11.38.29-1024x210.png [9]: https://really-simple-ssl.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-09.42.07.png