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