0 4 Votes

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

Tutorial by Stefan Trost | Last Update on 10/06/2018 | Created on 16/03/2018

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 virtual domains, I had already explained the basics of how to define domains with XAMPP and Apache, which can then point to a local directory in the XAMPP installation. After this setup, all domains can only be accessed via HTTP. In order to allow also HTTPS, the following steps are necessary additionally.

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) 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 a "Common Name" we enter the name of our URL. 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 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 and looks something like the blocks from the first tutorial. Under DocumentRoot we can specify the root directory.

# 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. The DocumentRoot directory, ServerName, and ServerAlias specifications are identical. In addition, we still need to provide information about our SSL certificate and key. This tells the server where to find the appropriate 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 and 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, 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, if we call our website via 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 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 only trusts certificates from official certification authorities. For our 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.

ReplyPositiveNegative

About the Author

Avatar AuthorYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile | Message

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own articles on askingbox.com. How to do.