Hello Folks!, today i came up with a tip for all web developers who’re wondering how to install SSL in localhost (XAMPP). So finaly here is the solution for how to Create Valid SSL in localhost for XAMPP.
Google announced that SSL is must for all the sites in World Wide Web. Since 2018 Chrome browser updates has become a burden for local development. Not only they decided to disable .dev domain for local development, they also really have specific configuration in SSL Cert to show the site as secure.
On February 8, 2018 – Emily Schechter (Chrome Security Product Manager) quoted in her blog as “Chrome 68, the omnibox will display “Not secure” for all HTTP pages.” like below,
So to overcome this lets install SSL in localhost. Please follow my lead step by step to install SSL without any hassle.
For eg. lets keep a domain called proficientdesigners.test. Actually we can create any domain which is not available in the internet like .com, .net etc.
As a developer you may think about using the .dev domain. But unfortunately its been taken by google and its available in the internet globally like .com, .net so we avoid using .dev domain and thus we chose to us the .test domain.
Navigate to Apache directory in XAMPP C:\xampp\apache
Create a folder named cert in C:\xampp\apache location. This is where we will keep our SSL certificates. So now we will get a directory C:\xampp\apache\cert
Download below files and add it to C:\xampp\apache\cert
Edit cert.conf in the fields listed below through which you can generate a proper SSL cert with some valid information.
[ subject ] countryName_default stateOrProvinceName_default localityName_default organizationName_default commonName_default emailAddress_default [ alternate_names ] DNS.1
Run make-cert.bat by double clicking it. A cmd prompt window will open in which it’ll ask for you enter the valid domain name, in this eg we’re using domain name proficientdesigners.test
Follow the screenshots below:
No need to enter the Country Code if you’ve already configured that in cert.conf, so you can simply press Enter and you can follow the same process for other options too.
So finally the SSL certficate for proficientdesigners.test is created. Now lets install it in our local machine, for that double click the cert file which is located in C:\xampp\apache\cert\proficientdesigners.test\server.crt
After that follow the screenshots below:
So now finally to make proficientdesigners.test domain to work in the localhost we need to block it for DNS resolve globally in the internet.
So for that lets edit the Windows host file which is located in C:\Windows\System32\drivers\etc\hosts in which this below single line to be added at the end of line.
Now we need to configure SSL for proficientdesigners.test in apache config file, so for that lets edit C:\xampp\apache\conf\extra\httpd-vhosts.conf
Add the below lines at the last of httpd-vhosts.conf
## proficientdesigners.test <VirtualHost *:80> DocumentRoot "D:/htdocs/proficientdesigners.test" ServerName proficientdesigners.test ServerAlias *.proficientdesigners.test </VirtualHost> <VirtualHost *:443> DocumentRoot "D:/htdocs/proficientdesigners.test" ServerName proficientdesigners.test ServerAlias *.proficientdesigners.test SSLEngine on SSLCertificateFile "cert/proficientdesigners.test/server.crt" SSLCertificateKeyFile "cert/proficientdesigners.test/server.key" </VirtualHost>
Note: Please change the Document Root, ServerName, ServerAlias as per the domain which you use.
Finally we need to restart the apache in XAMPP to make the changes to work. That’s it Folks!!, now you’ve successfully installed the SSL and configured it in your localhost. I hope this tutorial will be useful for all the beginners, so if you still can’t able to make this work, please leave your doubts as comments below.