Setup Local SSL


In development security is obviously an important variable to the whole equation but it can be difficult to understand the many layers of security that take place from the request of a client to the delivery from a server. One of those layers that you may be aware of but unfamiliar with is Secure Sockets Layer (SSL); predecessor to Transport Layer Security (TLS). Essentially SSL is defined as:

the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

So if you are transferring sensitive data from a browser to a web service then in order to prevent data hijacking you must send the sensitive data through a secure socket (essentially a path that thieves and bandits can’t loot your messenger through on his way to the Emerald city where he will make your request). I’m not claiming to be an expert on this subject but in the development process it can be difficult to established said connection on a local environment so I wanted to provide a short tutorial of my successful attempt.

Environment Details

The process is similar no matter your environment so there still be some helpful nuggets here, but for the most part my instructions are based on the following:

  • Windows OS
  • XAMPP Version 1.8.2
  • Using VHosts (virtual host)

1) Create SSL Cert & Public Key

The first thing we need to do is create a SSL Certificate the will contain our public key and a server private key. Fortunately XAMPP already provides a couple things. 1) A pre-made solution which is included in everyone’s instance, so not the most secure. 2) A script for generating a brand new Certificate and public key. To execute this script/batch file, do the following:

From your Windows Command prompt or equivalent (I use Console2), change directory to your apache installation (my installation is in dropbox so may differ from typical installations:

cd c:\xampp\apache //Enter the path to your installation

From there you should see/run a .bat script called makecert:

ssl-to-local_01

NOTE: You may need to open this in your IDE or text editor to edit some path values, I had an issue with the OPENSSL_CONF set to the wrong path. Also if you want to set a new name for your certificates and key you can do that here. Once the script is as you would like it to be then run it:

makecert //that was easy

This will begin to walk you through generating the certificate and key so fill in each value accordingly. The value that matters the most is the “common_name”, this MUST be the domain address that you are trying to secure. So if I’m developing a site using a virtual host like, myproject.dev then common_name = myproject.dev

Enable Port 443 for Vhost

Usually around line 19 you will find the line you need to add or uncomment

NameVirtualHost *:80 // Around line 19
NameVirtualHost *:443

Also make a default for each port

<VirtualHost *:80> // Port 80
    DocumentRoot "c:/xampp/htdocs"
    ServerName localhost
</VirtualHost>
<VirtualHost *:443> // Port 443
    DocumentRoot "c:/xampp/htdocs"
    ServerName localhost
    ServerAlias localhost
 
    SSLEngine On // notice we turn on SSL
    SSLCertificateFile "conf/ssl.crt/server.crt" // path to your SSL certificate
    SSLCertificateKeyFile "conf/ssl.key/server.key" //path to your private key

    <Directory "c:/xampp/htdocs"> 
        Options Indexes FollowSymLinks Includes ExecCGI 
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Now that you have a vhost setup for a non-secure URL, apache will use your project’s directory. Now we just need to direct that url to HTTPS by updating your .htaccess file

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$ // Add these 2 lines
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Add Certificate and Public Key to Vhost & Require SSL

As you may have noticed from the previous step there a couple things happening when setting up a virtual host to use SSL

<VirtualHost myproject.dev:443> // Individual Vhost set to use port 443
   DocumentRoot "c:/xampp/htdocs/myproject.dev"
   ServerName myproject.dev
   ServerAlias myproject.dev

   SSLEngine On // notice we turn on SSL
   SSLCertificateFile "conf/ssl.crt/myproject.crt" // path to your SSL certificate
   SSLCertificateKeyFile "conf/ssl.key/myproject.key" // path to your private key

   <Directory "C:/xampp/htdocs/myproject.dev">
       Options Indexes FollowSymLinks ExecCGI Includes
       Order allow,deny
       AllowOverride All
       Allow from all
       SSLRequireSSL
   </Directory>
</VirtualHost>

Force Redirect http:// (:80) to https:// (:443)

This is not a requirement to your HTTP url to HTTPS but it is likely necessary considering that as a secure page you cannot load insecure content. This includes images, css, js, etc. If you are including/referencing resources they must be retrieved via HTTPS as well. Not to mention, what good is your site if the user forgets the “s” and sees a broken page, they won’t assume its their fault, they will assume your site is broken. So to start, below your :443 virtual host we need to make an :80 version (this way it exist to apache so that once it reaches your root directory you can THEN use .htaccess forces the HTTPS.

<VirtualHost myproject.dev:80> // Individual Vhost set to use port 80
   DocumentRoot "c:/xampp/htdocs/myproject.dev"
   ServerName myproject.dev
   ServerAlias myproject.dev

   SSLEngine On // notice we turn on SSL
   SSLCertificateFile "conf/ssl.crt/myproject.crt" // path to your SSL certificate
   SSLCertificateKeyFile "conf/ssl.key/myproject.key" // path to your private key

   <Directory "C:/xampp/htdocs/myproject.dev">
       Options Indexes FollowSymLinks ExecCGI Includes
       Order allow,deny
       AllowOverride All
       Allow from all
       SSLRequireSSL
   </Directory>
</VirtualHost>

Conclusion

If this is working properly you should see the green padlock in your address bar that will indicate a secure connection:

ssl-to-local_02

If you have any questions along the way feel free to post them and I will answer them or update the article accordingly the best I can. Again I’m no expert but I was able to get this working after many hours of research and figured this would help save you some time. If you would like I’ve included resources below as well

Resources

Here is a list of some of the resources I used to help me through this setup process