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 HTTPS/SSL localhost
Open Terminal
4. Create SSL folder to store SSL files
cd
/Applications/XAMPP/xamppfiles/etc/
mkdir ssl
cd ssl
5. Create SSL CSR & private key
You can use any file name here (just replace localhost)
openssl req -new -newkey rsa:2048 -nodes -keyout localhost.key -out localhost.csr
Enter info as below. Note: change localhost to your localhost domain name (ex: www.domain.name)
Country Name (2 letter code) [AU]:VN
State or Province Name (full name) [Some-State]:HCM
Locality Name (eg, city) []:HCM
Organization Name (eg, company) [Internet Widgits Pty Ltd]:VN
Organizational Unit Name (eg, section) []:VN
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:[email protected]
There are 2 more infos may be asked:
- A challenge password
- An optional company name
Leave these info BLANK (just Enter, no need input anything)
6. Create .ext file
touch localhost.ext
Copy & paste below content to v3.ext file
Note: change localhost to your localhost domain name
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
7. Create SSL CRT
openssl x509 -req -sha256 -extfile localhost.ext -days 3650 -in localhost.csr -signkey localhost.key -out localhost.crt
8. Add SSL CRT to macOS Keychain
- Double click on localhost.crt on Finder
- Select Keychain: System then click Add
- Find & double click on localhost cert in Keychain Access
- Expand Trust, select When using this certificates: Always Trust
- Close the window and click Update Settings
9. 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>
10. Open Chrome and access https://localhost. Congratulation!
