Creating SSL certificate for XAMPP to load pages in localhost under secure HTTPS connection

The days when SSL wasn’t really mandatory and the browsers didn’t show that scary “Not Secure” label are long gone. Now every modern bowser will show a “Not Secure” label in any website that does not load under the https protocol.

Example of how Chrome shows a page that does not load under https

This affected those who were using the .dev TLD for local development environment too.

But in my case, I had a domain name setup for localhost, http://site.quark. (Why I chose quark is a story for another time 😉)

Usually when I design and develop websites or web apps for clients, I initially deploy the site on my local xampp server, then upload to a live site when they are partially completed. This was not really a big problem until Google decided to show that “Not Secure” label on Chrome browser and the other browsers followed after it.

Hence, I had to setup my xampp server to load all my sites on https://site.quark instead of http://site.quark.

In this article, I will be sharing how to setup your xampp server to load on HTTPS connection step by step.

Step 1: Creating certificates

1. In your xampp installation folder go to the Apache directory. In my case, it is F:\xampp\apache

2. Create a folder in it to store the certificate. I created as crt so it will be F:\xampp\apache\crt

3. Create 2 files in the folder and name them as cert.conf (conf is the extension) and make-cert.bat (this is a bat file)

4. Open the cert.conf via your code editor and paste the code below and save it.

5. Next open your make-cert.bat file via your code editor and paste the code below

Note that the days here are set to 3650, which means you can create a certificate for 10 years. You can change the number of days, if you need.

6. Now run the make-cert.bat file and enter the details that are requested. You need to change the domain name for the one you are planning to use. In my case, it is site.quark

While all infomation you enter here can be not accurate, it is important that you set the Common Name to the exact domain name you are planning to use. Which is again in my case, it’s site.quark

7. If you have done the above steps properly, you will be seeing a new folder created inside the directory F:\xampp\apache\crt with the name site.quark it will be different if you have given a different domain name. If you go inside F:\xampp\apache\site.quark you will see 2 more files with the names server.crt and server.key been added too, which is our SSL certificate.

SSL Certificates

Step 2: Installing the certificates

1. Open the server.crt file and click on Install Certificate button which will take you to the Certificate Import Wizard

2. Then select Current User or Local Machine

3. Then choose Place all certificate in the following store and browse and choose Trusted Root Certification Authorities.

4. Once you are done, click Next and Finish. Now that the certificates are installed and trusted by Windows, we need to make xampp to use the certs.

Step 3: Adding the domain to Windows host

1. Now that the certificate is installed and ready to be used on your localmachine, the browser will not recognize it unless you load that under the domain name that you created the certificate for. Which is site.quark in my case. In order to do that, navigate to C:\Windows\System32\drivers\etc and edit the hosts file and add the following line of code at the bottom

127.0.0.1 site.quark

Which will look like this

2. Then save the file, where of course you will run in to a problem when Windows says you will need administrator permission. You can follow this tutorial on how to edit the hosts file. https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

3. Now that you have pointed the domain to 127.0.0.1 it will ask Windows to load xampp when we visit the site site.quark on your browser. You can test it by visiting http://site.quark to see the xampp dashboard

Step 4: Enabling SSL for XAMPP

1. Now go to F:\xampp\apache\conf\extra and edit the httpd-xampp.conf file by opening it in your code editor and add the following lines of codes.

#site.quark
<VirtualHost *:80>
     DocumentRoot “F:/xampp/htdocs”
     ServerName site.quark
     ServerAlias *.site.quark
</VirtualHost>
<virtualhost *:443>
     ServerAdmin nuski@site.quark
     DocumentRoot “F:/xampp/htdocs”
     ServerName site.quark
     ServerAlias *.site.quark
     ErrorLog “logs/site.quark-error.log” 
     CustomLog “logs/site.quark-access.log” common
     SSLEngine on
     SSLCertificateFile “crt/site.quark/server.crt”
     SSLCertificateKeyFile “crt/site.quark/server.key”
 </VirtualHost>

Which sould look like this.

2. Make sure you have entered the correct detail for ServerName and ServerAlias which is site.quark in my case and point the certificate path and save it.

3. Once you saved the file, you will need to restart Apache from the xampp control panel by clicking Stop and Start the Apache Module.

4. Now restart the browser to load the certificate and visit the domain https://site.quark (your custom domain name which is site.quark in mine) which should load under Secure Connection with that padlock icon on the address bar.

5. Additional step: Windows being Windows, sometimes it might not work for you. Simply restart your Windows and try again (duh)

Well, that’s about it. I guess you find this article useful. If you know a different method, please let me know in the comments.