Guides SSL certificate

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.

Install MAMP

The first step is to install MAMP. MAMP is a one click solution for macOS and Windows for setting up a local development environment. It combines free software such as Apache, NGINX and MySQL and is the software of choice here at Really Simple SSL headquarters.

Generating a self-signed certificate for local use

Since Chrome 58, certificates for use on localhost need to have a SAN, Subject Alternative Name. Getting a certificate with the right properties can be a daunting task, but luckily Alexander Zeitler has written a guide on how to generate a certificate with a Subject Alternative Name. This does involve some messing around with the command line but is not too hard to do. The following steps need to be taken to create a certificate with SAN for localhost:

Generating the certificate

Open up a terminal and type the following:

mkdir ~/ssl/

this will create a directory called ssl in your root folder. We now need to enter that directory by typing:

cd ~/ssl

next up, create a file named server.csr.cnf by using your text editor of choice, in this case I’m using vi

vi 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). You can change these attributes to reflect those of your own organization:

[req]

default_bits = 2048

prompt = no

default_md = sha256

distinguished_name = dn

[dn]

C=US

ST=New York

L=Rochester

O=End Point

OU=Testing Domain

emailAddress=your-administrative-address@your-awesome-existing-domain.com

CN = localhost

To save the file, type

:wq

Followed by an enter. This will write and quit the file.

Next up create a file named v3.ext

vi v3.ext

and copy the following content:

authorityKeyIdentifier=keyid,issuer

basicConstraints=CA:FALSE

keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment

subjectAltName = @alt_names

[alt_names]

DNS.1 = localhost

Write and quit again by typing

:wq

You can verify the files are in the directory by typing

ls -la

Which will show all files in the ~/ssl/ directory. Next paste the following line which will generate a RSA private key:

openssl genrsa -des3 -out ~/ssl/rootCA.key 2048

Next we will generate the root certificate which will be valid for 1024 days:

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:

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.

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:

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

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

Next find the virtualhost configuration which looks something like this:

<VirtualHost _default_:443>

# 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:

<VirtualHost *:443>

# 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

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 looks like this:

SSLCertificateFile “/ssl/server.crt”

SSLCertificateKeyFile “/ssl/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:

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

Related Articles

2 Comments

  • Gregg Lybbert

    I did all of this but now I can’t get the MAMP servers to start. I double checked all of my steps and I can’t find anything I may be missing. Any ideas?

    • Rogier Lankhorst

      Do you see any errors in mamp/logs?

Leave a Comment