Simple SSL with Xampp

SIMPLE_SSL_WITH_XAMPP.md

Simple SSL with Xampp

In Xampp there's an out-of-the-box Apache SSL configuration with a pre-installed (although expired) root certificate, which pointing to localhost domain. With a little bit of tweaking and freshly generated certs, we will use this built-in config with some tweaks for future web development. This guide is for Windows environment.

1. First, visit .\xampp\apache folder and execute makecert.bat. Figure out a password for all pass phrase questions. Hit enter for every default or empty values (these are configured at .\xampp\apache\conf\openssl.cnf file). Make sure you also enter a value for this question: Common Name (e.g. server FQDN or YOUR name) []:. I choose the localhost domain, because this is what the pre-installed cert comes with. I should note that, because how browsers handling cookies, a domain name with a dot (like dev.localhost, or www.localhost) would be better (Explaining .localhost TLD), but for the sake of this tutorial, we will try to recreate what the built-in Xampp certificate should do. Other thing to not that because the lack of Subject Alternative Names (DNS or IP address) in the certificate, Chrome will still not trust this.

2. Place this file at .\xampp\apache\conf\httpd-localhost-ssl.conf location with the following content:

   ################################################################################
   # Original location: conf/httpd.conf
   ################################################################################
   
   # W3 Total Cache
   LoadModule deflate_module modules/mod_deflate.so
   LoadModule expires_module modules/mod_expires.so
   LoadModule ext_filter_module modules/mod_ext_filter.so
   LoadModule filter_module modules/mod_filter.so
   
   # http2 support
   LoadModule http2_module modules/mod_http2.so
   
   ################################################################################
   # Original location: conf/extra/httpd-ssl.conf
   ################################################################################
   
   <VirtualHost _default_:443>
       ServerName localhost
       ServerAdmin admin@localhost
   
       # http2 support
       Protocols h2 h2c http/1.1
   </VirtualHost>
   

   Finally, you need to place this call at the end of .\xampp\apache\conf\httpd.conf file (back it up first!):

   Include conf/httpd-localhost-ssl.conf
   

   You can emit the Wordpress related config if you want. It also sets up the needed settings for HTTP/2 support under SSL. The original VirtualHost setting defined at .\xampp\apache\conf\extra\httpd-ssl.conf with the following content:

   ServerName www.example.com:443
   ServerAdmin [email protected]
   

   Obviously this domain is a mismatch with the built-in and newly generated certificates, so we need to change this. Because of how often we reinstall Xampp, I choosed to place all modification in a new Apache config file.

3. You need to import the cert from .\xampp\apache\conf\ssl.crt\server.crt as "Trusted Root Certification Authority" both in Firefox/IE/Edge and whitelist your site in Chrome (sorry...).

4. If you choose a domain name with a dot, you need to add this to your hosts file:

   127.0.0.1 dev.localhost

TODO

Obviously this method needs some improvement, most importantly, Chrome. We need to edit .\xampp\apache\makecert.bat to also define DNS or IP for alternative subject names, but because I develop under Firefox and only use Chrome for accessibility and Lighthouse testing, this is fine for me. Recommended read: https://letsencrypt.org/docs/certificates-for-localhost/

The plus side of this config that tries to stay true for the original Xampp configuration as much as possible, without setting up another virtual hosts.

I think the built-in SSL configuration needs some love from the Xampp Team as well. The built-in cert expired months ago. My recommendations are:

• Have a clear documentation how to setup SSL with Xampp, because HTTPS is the new HTTP. We need to develop and test in the final form of our sites. Lighthouse testing is part of the Wordpress frontend development, not an afterthought on live environment.
• Update the built-in localhost cert after expiration or re-generate at every Xampp release. The first option would be better for developers.
• Revision Xampp's SSL configs and settle around a single domain name, which everyone need to use (if you want yours, that's fine, you can still dig deep in Apache configs). Because of how browsers handling cookies, I recommend something with a dot under these reserved TLDs.

Improvements welcome for this document!

Dint worked ;(