Until now, I never used HTTPS for local development domains. Now I had to use it for a project, and here is how to get it working on XAMPP with virtual hosts.
Update from May 31, 2018: Before the update, I described the creation of an SSL certificate as the first necessary step before setting up the virtual host. But your browser will display a warning regardless if there is a self-created cert or not, so I removed this part. You need to add your local site as an exception to not get the warning every time.
Update from June 1, 2018: Seems that you need the cert file, otherwise apache will not start, so I added this part back to the post.
Two steps are necessary for the solution:
- Creating an SSL certificate.
- Set up the virtual host.
The requirement is (of course) XAMPP.
Creating an SSL certificate
A good tutorial about creating a cert is on robsnotebook.com. It is from 2007, but works. To create a certificate, you can follow these steps on the command line:
- Go to the Apache directory
C:\xampp\apache
. - Run
makecert
. - Enter a PEM passphrase and the other information you are asked for. For Common Name, you should enter the domain you want to use for the virtual host, so the certificate is signed for that domain.
- After processing all steps, you maybe want to import the cert into your browser (it lives under
C:/xampp/apache/conf/ssl.crt/server.crt
). Nevertheless, you will get a warning about insecure self-signed certificate after loading your website – you need to add it as an exception.
Set up virtual host with HTTPS
Entry in the Windows hosts file
To let Windows know, for example, that the domain florianbrinkmann.test
should point to the IP address 127.0.0.1
(localhost), we have to insert an entry in the Windows hosts
file. The file can be found in C:\Windows\System32\drivers\etc
. To edit it, you need admin privileges (search for the editor in Windows, right-click on it and choose Run as administrator).
At the end of the hosts
file, add an entry with the following pattern:
127.0.0.1 florianbrinkmann.test
Code language: CSS (css)
You have to replace the domain with your own development domain. Afterwards, you can save and close the file.
Creating the Virtual Host in Apache
The virtual hosts in Apache can be found in the C:\xampp\apache\conf\extra\httpd-vhosts.conf
file. Open the file and insert an entry according to the following pattern (an answer from stackoverflow.com was very helpful – the related question also, it brought me to the article on SSL certificate setup):
<VirtualHost florianbrinkmann.test:80>
DocumentRoot "C:\xampp\htdocs\florianbrinkmann.test"
ServerName florianbrinkmann.test
<Directory "C:\xampp\htdocs\florianbrinkmann.test">
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
<VirtualHost florianbrinkmann.test:443>
DocumentRoot "C:\xampp\htdocs\florianbrinkmann.test"
ServerName florianbrinkmann.test
SSLEngine On
SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/server.crt"
SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/server.key"
<Directory "C:\xampp\htdocs\florianbrinkmann.test">
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
Code language: HTML, XML (xml)
Here you have to adjust the settings for DocumentRoot
, ServerName
, Directory
, and the domain in the VirtualHost
element. The first VirtualHost
is for HTTP connections, the second for HTTPS connections.
Maybe you have to uncomment the following line in the C:\xampp\apache\conf\httpd.conf
:
LoadModule ssl_module modules/mod_ssl.so
Now you can restart Apache and open your site with HTTPS (including browser warning…).
Browsers don't show my local website as "secure". How can I get rid of SSL warning on browsers?
Hi Azamat,
you can add your site as an exception, so that the browser does not check if the cert is from a trusted authority (how to do that exactly depends on the browser. In Firefox and Chrome, there is a button at the bottom of the warning, where you can add the site as an exception).
Best,
Florian
very simple way. It's working.
Thanks
Happy to hear that! 🙂
Do you have to make a new cert for each virtual host?
Hi Mike,
sorry for the late reply, your comment was marked as spam…
No, you do not need to create a cert per host. In the meantime I think you do not need to create a cert at all. Even if there is no cert, you can set an exception for the browser warning and use the local site via https.
Best,
Florian
Dear Sir,
If I am using XAMPP is it possible to run 2 virtual hosts on port 443. If yes, can you kindly advise on how to configure xampp.
Hi Andrew,
yes, you can just copy the code from the code box in the article and adjust the paths and the domain name. Then you can access the second domain via https, too.
Best,
Florian
Thank you very much! Your instructions worked great.
Well done, thank you. First set of instructions on the Internet that worked for me on Windows 10 + XAMPP.
Great to hear that, thanks for your comment Tom! 🙂
Thank you so much!! This helped alot.
Happy to hear that!
hi ,
I followed all the steps but its not working for me . my website is built using joomla .
Error: "HTTPS has not been enabled as it is not available on this server. HTTPS connection test failed with the following error: HTTPS version of the site returned an invalid HTTP status code."
can you please help . Thank you .
Hi Tashi,
it seems that SSL is not installed. Have you checked if the SSL module is loaded (at the end of my article is a paragraph on that)? Maybe that helps, otherwise I am not sure what could cause that error, sorry.
Best,
Florian
Thank you Florian. It's very easy and fast process to add SSL certificate on xampp. Thank you again, it is very useful for me.
Hi Manoj,
thanks for your comment, I’m happy to hear that! 🙂
Best,
Florian
Hi Florian,
Any idea to make the website only direct to HTTPS instead of HTTP?
Hey Demetrivs,
I wrote a post about this in German (I searched for a solution to make a multisite install with subdomains only accessible via https), maybe the
.htaccess
snippets work for you? 🙂https://florianbrinkmann.com/ssl-fuer-wordpress-netzwerk-mit-subdomains-erzwingen-1879/
If you do not want to touch the
.htaccess
, you could try a plugin like https://de.wordpress.org/plugins/wp-force-ssl/.Hope that helps!
Florian
A great article. Helped a lot.
Just want to point out one thing..
.dev domains will not work on chrome anymore while working on localhost. If you do this, Apache will refuse to start and throw some random errors.
https://webdevstudios.com/2017/12/12/google-chrome-63/
Hope this helps someone and they do not waste 1 hours as I did 🙂
Hi,
thanks for your comment! Yes, good point, I will update the example domain in the article 🙂
Best,
Florian
Thank you so much! I was doing a php course and just could not access the .dev domain, it kept showing some cert error. Once again thank you!!
Thanks A Lot