[macOS] XAMPP - Setup localhost HTTPS

Preparation

1. Check XAMPP SSL config

Open /Applications/XAMPP/xamppfiles/etc/httpd.conf and make sure your settings are the same as below:

LoadModule socache_shmcb_module lib/httpd/modules/mod_socache_shmcb.soLoadModule ssl_module modules/mod_ssl.so

<IfModule ssl_module>
<IfDefine SSL>
Include etc/extra/httpd-ssl.conf
</IfDefine>
</IfModule>

Test SSL config with this command:

sudo /Applications/XAMPP/xamppfiles/xampp enablessl

2. Backup httpd-ssl.conf

• Go to: /Applications/XAMPP/xamppfiles/etc/extra
• Copy httpd-ssl.conf & paste as httpd-ssl.conf.bak

3. Edit httpd-ssl.conf

• Open /Applications/XAMPP/xamppfiles/etc/extra/httpd-ssl.conf
• Change default port from 8443 to 443

#Listen 8443
Listen 443

• Find this line and remove everything below it

## SSL Virtual Host Context

Setup localhost HTTPS

1. Create localhost SSL certificate

Follow my guide here: Create localhost SSL certificate (to setup HTTPS)

2. Config SSL in XAMPP virtual host

Open /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

Update your config:

from

<VirtualHost *:80>
ServerName localhost
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
</VirtualHost>

to

<VirtualHost *:443>
ServerName localhost
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
SSLEngine on
SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl/localhost.crt"
SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl/localhost.key"
</VirtualHost>

Note: replace /Applications/XAMPP/xamppfiles/etc/ssl/ with your SSL files folder.

3. Open Chrome and access https://localhost. Congratulation!