How to Set Up an SSL Certificate in Localhost for XAMPP

In this tutorial, we will be looking at how to set up a self-signed SSL certificate on localhost using XAMPP, Apache, and OpenSSL.

By the end of the article:

• you will know what is the difference between Ports 80 and 443
• you will have a working self-signed SSL certificate on a specific custom domain within your localhost
• you will get familiar with some Apache configurations
• you will learn a bit about OpenSSL
• and last but not least, I hope you will enjoy the tutorial 💜

Prerequisites

In order to follow this tutorial, you’ll need to have a functional XAMPP environment, of course.

You’ll also need a custom domain set up through VirtualHost.

So if you don’t have it set up, make sure to go through this tutorial first. You’ll be ready to go in a couple of minutes.

For the purpose of this article, I use Laravel but feel free to use whatever framework or project suits you best.

You can even use a plain HTML page as long as you can reach the website through Apache.

Let’s get started!

Ports 80 and 443 — What’s the difference?

Let’s start XAMPP and turn on Apache.

Once it starts, you can notice two Ports: 80 and 443.

Port 80 is used for HTTP by default.

Port 443 is used for HTTPS.

If you go to a website that doesn’t have an SSL/TLS certificate, the request will go through HTTP, which means Port 80 is used and the connection is not secured.

It’s good to keep in mind that Port 80 is used to access an unsecured website, while Port 443 is used for secure connections.

We’ll use this information a bit later in the tutorial when we configure Apache.

Let’s move on to creating the SSL certificate.

🎥 Prefer a video guide instead? Check this out:

 

Create the SSL Certificate

We’ll now create a self-signed certificate using OpenSSL.

As mentioned above, this certificate should only be used on your local machine.

Luckily, XAMPP comes with a batch script which simplifies the creation of the certificate.

Go to the xampp\apache folder and open the file makecert.bat with your favorite code editor.

In addition to many other things, the script sets the validity period of the certificate to 365 days. You can modify this value as you wish.

We can set it to 1825, which means roughly 5 years.

Now, the more interesting part:

Because the script is quite old, it lacks some configurations that we need.

To resolve this, we’ll need to pass a new argument -extfile v3.ext to the same command mentioned above.

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 1825 -extfile v3.ext

We don’t have this file yet, so let’s go ahead and create it in the same xampp/apache folder.

The v3.ext file should have the following configurations:

Replace localvaren.com with your own domain.

And here’s the makecert.bat contents:

Now is the time to run the makecert.bat file.

You now have to go through the configuration wizard.

🚨 The information you introduce there can be dummy, but “Common Name (e.g server FQDN or YOUR name) []:” 🚨

This is basically asking for the actual name of the website, which in my case is localvaren.com.

Great! Now let’s install the certificate.

Install the SSL certificate

Go to xampp/apache/conf/ssl.crt folder and open the server.crt file.

In the first step click the Install Certificate… button.

Then choose the Local Machine option.

Then choose Place all certificates in the following store.

Then click the Browse… button and select Trusted Root Certification Authorities from the Select Certificate Store window.

Click OK, then Next.

Press Finish and the installation is complete.

Configure Apache

Now that we installed the certificate, let’s tell Apache how to use it.

Go to xampp/apache/conf folder and open the httpd.conf file with your favorite code editor.

Search for the following lines and make sure they are uncommented (commented lines have a # in front of them: # I’m a commented line):

LoadModule ssl_module modules/mod_ssl.so

Include conf/extra/httpd-ssl.conf

Next, let’s go to xampp/apache/conf/extra and open the httpd-vhosts.conf file.

Now it’s good to recall what I mentioned at the beginning of the tutorial about ports 80 and 443 because we have to create another VirtualHost that uses port 443.

We enable the SSLEngine, and specify the location of the SSLCertificateFile and SSLCertificateKeyFile.

All good, let’s restart Apache and then go to your https://yourdomain.com.

The site now has the 🔒 in front of the URL which means the connection is now secured and it has a valid SSL certificate.

This is what the certificate looks like from the browser.

Bear in mind, that sometimes the browsers might show that the connection is not secured and that the certificate is invalid.

You can try accessing the website through Incognito mode or try to clear the cache.

The browser however acknowledges the certificate and it should be okay since it’s a self-signed certificate and is not recognized by any authorities.

Redirect HTTP to HTTPS

One last thing.

If we access our website through http://yourdomain.com, it goes to the unsecured version.

It would be good to redirect us to the HTTPS version instead.

Let’s address this.

Open the xampp/apache/conf/extra/httpd-vhosts.conf file and add the RewriteEngine, RewriteCond and RewriteRule lines to the VirtualHost settings for Port 80.

In the end, it should look something like this:

Restart Apache from the XAMPP Control Panel, and then access your website through HTTP.

It should now redirect you to the HTTPS version.

That was it 🎉

---

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.      

Comments