windowssslxampp

How to Create Valid SSL in localhost for XAMPP


How can I use a secure connection (SSL) in my XAMPP in Windows?

I get the following error when I open the localhost page:

connection not secure


Solution

  • In my XAMPP install I basically have a clone to all the site that I managed. And All of them (of course) use SSL/HTTPS.

    enter image description here

    Here’s the step by step guide:

    In this step we are going to crate SSL and setup “site.test” website.

    enter image description here

    1. Navigate to Apache directory in XAMPP.

    In regular install it’s in C:\xampp\apache.

    enter image description here

    2. Create a folder in that page.

    This is where we will store our cert. In this example I will create “crt” folder. So we will have C:\xampp\apache\crt

    enter image description here

    3. Add this files.

    enter image description here

    4. Edit cert.conf and Run make-cert.bat

    Change {{DOMAIN}} text using the domain we want to use, in this case site.test and save.

    Double click the make-cert.bat and input the domain site.test when prompted. And just do enter in other question since we already set the default from cert.conf.

    enter image description here

    Note: I don’t know how to do text replace in .bat script, if you do, let me know in the comment how to do it and I will update make-cert.bat to automatically replace the {{DOMAIN}} with the domain input.

    enter image description here

    5. Install the cert in windows.

    After that, you will see site.test folder created. In that folder we will have server.crt and server.key. This is our SSL certificate.

    Double click on the server.crt to install it on Windows so Windows can trust it.

    enter image description here

    And then select Local Machine as Store Location.

    enter image description here

    And then Select “Place all certificate in the following store” and click browse and select Trusted Root Certification Authorities.

    enter image description here

    Click Next and Finish.

    And now this cert is installed and trusted in Windows. The next thing is how to use this cert in XAMPP.

    enter image description here

    6. Add the site in Windows hosts

    127.0.0.1 site.test
    
    

    This will tell windows to load XAMPP when we visit http://site.test You can try and it will show XAMPP dashboard page.

    enter image description here

    7. Add the site in XAMPP conf.

    We need to enable SSL for this domain and let XAMPP know where we store the SSL Cert. So we need to edit C:\xampp\apache\conf\extra\httpd-xampp.conf

    And add this code at the bottom:

     ## site.test
     <VirtualHost *:80>
         DocumentRoot "C:/xampp/htdocs"
         ServerName site.test
         ServerAlias *.site.test
     </VirtualHost>
     <VirtualHost *:443>
         DocumentRoot "C:/xampp/htdocs"
         ServerName site.test
         ServerAlias *.site.test
         SSLEngine on
         SSLCertificateFile "crt/site.test/server.crt"
         SSLCertificateKeyFile "crt/site.test/server.key"
     </VirtualHost>
    

    After that, you will need to restart Apache in XAMPP. It’s very simple, simply open XAMPP Control Panel and Stop and re-Start Apache Module.

    Tips: In XAMPP conf, as you can see you can change the domain root directory if needed. Eg. as sub-dir in htdocs.

    enter image description here

    8. Restart your browser and Done!

    This is required to load the certificate. And visit the domain on your browser, and you will see green lock!

    enter image description here

    enter image description here

    I hope this tutorial is useful!

    Source: https://shellcreeper.com/how-to-create-valid-ssl-in-localhost-for-xampp/