XAMPP: How to set up SSL/HTTPS for local Projects

In this tutorial, I would like to show you how to set up your XAMPP configuration in a way that you can access your local PHP projects via SSL and in the browser via an HTTPS URL. You can use that, for example, in the case that your online website is running over HTTPS and you want to use the same link structure also for testing.

In my tutorial about setting up virtual domains, I had already explained the basics of how to define arbitrary domains with XAMPP and Apache, which can then point to a local directory in the XAMPP installation. After this setup, initially, all domains can only be accessed via HTTP in the browser. In order to also allow URLs via HTTPS, the following steps are necessary additionally:

1. Create Certificate
2. Define VirtualHost
3. Restart Apache
4. Add Exceptions

In the following, we would like to go through each of these steps in detail.

Create Certificate

First, we have to create our own SSL certificate. Luckily, XAMPP already has a little script ready for us that we can use and open like this:

1. The script can be found in the Apache folder of the XAMPP installation, in a standard installation on Windows this is the path: C:\xampp\apache
2. In this folder we find the file makecert.bat, with a double-click on the file we can start the script.

After starting the script, the command line opens, where we only need to follow the instructions. First we have to enter a password for our key, that should look like this.

Generating a 2048 bit RSA private key
............+++
...................+++
writing new private key to 'privkey.pem'
Enter PEM pass phrase:

Here we can enter any password of our desire and then repeat it. Further questions follow, such as country (Country Name), city (Locality) or company (Organization Name). Here we can basically enter what we want or type in a point if we want to leave the field blank. This information will be used later in our certificate. As the "Common Name" (FQDN = Fully Qualified Domain Name) we enter "localhost" instead of a specific domain, since we need the certificate for our local host (we can nevertheless use the same certificate later for URLs of any name, so there is no need to repeat this step for each of our domains). Later, we can skip questions for so-called extra attributes such as for a "challenge password" or an "optional company name" by acknowledging them by entering a dot. Finally we have to repeat the password from the beginning again, then the certificate is created.

The whole procedure looks like this:

Generating a 2048 bit RSA private key
............+++
...................+++
writing new private key to 'privkey.pem'
Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:DE
State or Province Name (full name) [Some-State]:NRW
Locality Name (eg, city) []:BOT
Organization Name (eg, company) [Internet Widgits Pty Ltd]:STT
Organizational Unit Name (eg, section) []:WEB
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:local@example.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:.
An optional company name []:.
Enter pass phrase for privkey.pem:
writing RSA key
Signature ok
subject=/C=DE/ST=NRW/L=BOT/O=STT/OU=WEB/CN=localhost/emailAddress=local@example.com
Getting Private key
        1 File(s) moved.
        1 File(s) moved.

-----
The certificate was provided.

Press any key . . .

Now our certificate has been created and this step is done. The ready certificate was placed in the folders C:\xampp\apache\conf\ssl.crt and C:\xampp\apache\conf\ssl.key, provided we installed XAMPP in C:\xampp.

Define VirtualHost

In the next step, we have to set up a new VirtualHost for each domain we would like to make able to be called via HTTPS within the file C:\xampp\apache\conf\extra\httpd-vhosts.conf similar to what we did in the first tutorial.

At this point, it's important to know that HTTP is running on port 80, but SSL is on port 443. In the following, we'll define the URL example.com, which can then be called with both http://www.example.com and https://www.example.com afterwards. The first block applies to all requests over port 80 (i.e. for all requests starting with http://...) and looks something like the blocks from the first tutorial. Under DocumentRoot we can specify the root directory again.

# HTTP
<VirtualHost *:80>
 DocumentRoot "C:/xampp/htdocs/myproject"
 ServerName example.com
 ServerAlias www.example.com
</VirtualHost>
 
# HTTPS
<VirtualHost *:443>
 DocumentRoot "C:/xampp/htdocs/myproject"
 ServerName example.com
 ServerAlias www.example.com
 SSLEngine on
 SSLCertificateFile "conf/ssl.crt/server.crt"
 SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

The HTTPS requests are defined via the second block "<VirtualHost *:443>" (port 443). The DocumentRoot directory, ServerName, and ServerAlias specifications are identical to HTTP. In addition, now we have to switch on SSL and provide information about our SSL certificate and key. This tells the server that SSL should be used (SSLEngine on) and where to find the corresponding files. As you can see, we have defined the folders where our certificate has just been stored.

In the example here we have only defined one URL that should be reachable via HTTP as well as HTTPS. Each additional domain or URL must be defined in exactly the same way, we can write any number of blocks of this type among each other.

Restart Apache

For our changes to take effect, after saving the changed file, we must now restart Apache. For this, we open the XAMPP Control Panel and click on "Stop" behind the module "Apache" and then on "Start", so that the server restarts with the new configuration.

Add Exceptions

Now we are done with our configuration. However, when we visit one of our freshly defined HTTPS pages in the browser, we may receive the error message "This connection is not secure" with error code SEC_ERROR_UNKNOWN_ISSUER (depending on browser and browser settings). The Firefox browser, as an example, provides the dissuasive text "The owner of ... did not properly configure the site, Firefox did not connect to the site to protect your information from theft." In short, we can not just visit our website.

The reason is that we have created the certificate on our own and Firefox, Chrome and other browsers only trusts certificates from official certification authorities. For our local testing purposes that would of course be exaggerated, so we can confidently click on the button "Add an exception ...". In the dialogue that opens up, we should activate the option "Permanently save this exception", otherwise we will be asked again with each call. Afterwards we can click on "Confirm security exemption" and should now finally be able to see our website via the HTTPS URL.