Enabling SSL (https protocol) with xampp in a local PHP project

There are many advantages (and disadvantages) about using https in our websites. Some Browser API's only are accesible if the connection is secure (webkitSpeechRecognition, getUserMedia etc), you cannot load insecure resources (http) from secure websites (https) and a lot of others points.

You may probably tried to simply change the url in the browser with https instead of http at the beginning, however the only thing you'll find if you try to access in the browser will be Object not found!.

The problem talks by itself and we need to solve it , our virtual host doesn't provide SSL support for our project, therefore we are unable to use a secure connection.

Enable SSL for a localhost URL

By default, the localhost domain allow you to access any file inside the xampp/htdocs folder. For example, if you have an HTML file namely file.html located in C:/xampp/htdocs/file.html, then you can access it in the browser at http://localhost/file.html with the HTTP protocol easily. In the same way you can access the document with the HTTPS protocol at https://localhost/file.html.

If you access your files or projects using a virtual host, then you can follow the next step.

Enable SSL for a vhost on a single project

We suppose that you already mounted a normal virtual host in the *80 port and it may look similar to :

<VirtualHost 127.0.0.2:80>
  DocumentRoot "C:/xampp/htdocs/myproject/web"
  DirectoryIndex index.php

  <Directory "C:/xampp/htdocs/myproject/web">
	Options All
	AllowOverride All
	Require all granted
  </Directory>
</VirtualHost>

A normal vhost that points to the port 80 in a simple symfony 3 project, nothing special and it doesn't support https by itself.

To enable the SSL connection, you need to add the following lines inside another VirtualHost tag , basically with the same structure as you main VirtualHost tag but with the following information :

SSLEngine on
SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"

The previous lines will enable the SSL in your project. Note that the paths are relative, with a normal installed xampp distribution it should work, if it doesn't work try changing it to the absolute path. They're normally located inside the xampp/apache/conf/ssl.key/server.key and xampp/apache/conf/ssl.crt/server.crt.

<VirtualHost 127.0.0.2:443>
    DocumentRoot "C:/xampp/htdocs/myproject/web"
    ServerName myproject
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
    <Directory "C:/xampp/htdocs/myproject/web">
        Options All
	AllowOverride All
	Require all granted
    </Directory>
</VirtualHost>

Remember that the important point to enable the SSL are the properties SSLEngine, SSLCertificateFile and SSLCertificateKeyFile and the correct port (443).

Now add both VirtualHost in your httpd-vhosts.conf file :

# http
<VirtualHost 127.0.0.2:80>
    DocumentRoot "C:/xampp/htdocs/myproject/web"
    DirectoryIndex index.php

    <Directory "C:/xampp/htdocs/myproject/web">
        Options All
    	AllowOverride All
    	Require all granted
    </Directory>
</VirtualHost>

# https
<VirtualHost 127.0.0.2:443>
    DocumentRoot "C:/xampp/htdocs/myproject/web"
    ServerName myproject
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
    <Directory "C:/xampp/htdocs/myproject/web">
        Options All
    	AllowOverride All
    	Require all granted
    </Directory>
</VirtualHost>

Save the httpd-vhosts.conf file and restart the apache service and try to connect using the https protocol.

Have fun !