How to Set Up Valid SSL in Localhost for XAMPP Server (Generating a Verifiable Certificate for your website on a Local machine)

Introduction:

Protecting data and communication is paramount in today’s security-conscious web development landscape. This is where Secure Sockets Layer (SSL) certificates come in. By establishing encrypted connections, SSL adds a vital layer of trust and prevents sensitive information from falling into the wrong hands. For local development environments like XAMPP, setting up SSL offers numerous benefits:

• Data Security: Encryption safeguards sensitive data like login credentials, passwords, and application data while in transit between your browser and XAMPP.
• Enhanced Testing: SSL allows you to test secure features and functionalities within your local environment before deploying them live.
• Confidence and Trust: An SSL-enabled XAMPP creates a more realistic development environment, mimicking the secure conditions of live sites.

Step-by-Step Guide:

You can definitely run the SSL setup guide on your powerful machine to perform this experiment. This is my PC specification with an Operating system, Ubuntu 23.04 system with 64GB RAM and an i9 Xeon processor. While it works on systems with lower specs (2GB RAM and i3), your setup has plenty of muscle for this task. Enjoy creating secure connections on your XAMPP!

1. Root Certificate Generation:

• This step establishes the foundation of your certificate hierarchy.
• Generate a private key (root-key.pem) using openssl genpkey.
• Create a self-signed root certificate (root-cert.pem) with openssl req.
• Ensure the CN (Common Name) matches your desired root certificate identity (e.g., "IIT Jammu").

1.openssl genpkey -algorithm RSA -out root-key.pem  
2.openssl req -x509 -new -key root-key.pem -out root-cert.pem -subj "/CN=IIT Jammu"

2. Intermediate CA Certificate:

• This certificate acts as a bridge between the root and server certificates, adding an extra layer of security.
• Generate a private key (intermediate-key.pem) for the CA.
• Create a certificate signing request (intermediate-csr.pem).
• Sign the request with the root certificate (intermediate-cert.pem), granting the CA signing authority.
• Include the basicConstraints=critical,CA:TRUE extension to mark as a CA certificate.

1. openssl genpkey -algorithm RSA -out intermediate-key.pem  

2. openssl req -new -key intermediate-key.pem -out intermediate-csr.pem -subj "/CN=IIT MANDI" 

3.openssl x509 -req -in intermediate-csr.pem -CA root-cert.pem -CAkey root-key.pem -CAcreateserial -out intermediate-cert.pem -extfile <(printf "basicConstraints=critical,CA:TRUE\n")

3. Server Certificate with SAN (Subject Alternative Name):

• This certificate identifies your specific XAMPP server and allows for secure connections.
• Generate a private key (server-key.pem) for the server.
• Create a certificate signing request (server-csr.pem).
• Sign the request with the intermediate CA certificate (server-cert.pem).
• Use the subjectAltName=DNS:sites.local extension to specify the domain name you'll use for secure access (replace sites.local accordingly).

1.openssl genpkey -algorithm RSA -out server-key.pem 
2.openssl req -new -key server-key.pem -out server-csr.pem -subj "/CN=localhost"
3.openssl x509 -req -in server-csr.pem -CA intermediate-cert.pem -CAkey intermediate-key.pem -CAcreateserial -out server-cert.pem -extfile <(printf "subjectAltName=DNS:sites.local")

4. Create Certificate Chain:

• Combine the certificates in the correct order for verification: root-cert.pem -> intermediate-cert.pem -> server-cert.pem.
• Save the combined chain as chain.pem.

1.cat root-cert.pem intermediate-cert.pem server-cert.pem > chain.pem 

—--------------Here i am verifiying my key—--------------------------
2.openssl verify -CAfile chain.pem server-cert.pem

5. Verify Your Key:

• Use openssl verify with the combined chain as the CA file (chain.pem) to ensure the server certificate is valid.

Copy Certificates to XAMPP Directory:
1.sudo cp root-cert.pem intermediate-cert.pem server-cert.pem /opt/lampp/etc/ssl.crt/ 
2.sudo cp server-key.pem /opt/lampp/etc/ssl.key/

6. Configure XAMPP:

• Replace the placeholders in the commands with your actual paths and filenames.
• Copy the certificates and key to the appropriate XAMPP directories.

1. sudo nano /opt/lampp/etc/extra/httpd-ssl.conf
2.Update the following directives:
     1.SSLCertificateFile "/opt/lampp/etc/ssl/server-cert.pem"
     2.SSLCertificateKeyFile "/opt/lampp/etc/ssl/private/server-key.pem"
     3.SSLCertificateChainFile "/opt/lampp/etc/ssl/chain.pem"

7. Configure SSL in httpd-ssl.conf:

• Update the directives with the paths to your certificates and key.
• Ensure you have the correct syntax and spacing.

sudo /opt/lampp/lampp restart

8. Restart XAMPP and Verify:

• Restart XAMPP for the changes to take effect.
• Access your XAMPP website using https://sites.local (replace with your chosen domain name).
• Your browser should display a secure connection padlock.

Additional Tips:

• Consider using a third-party certificate authority (CA) for production environments to ensure wider trust and browser compatibility.
• If you encounter issues, double-check paths, filenames, and syntax carefully.
• For more complex setups, consult the XAMPP documentation or seek help from experienced users.

If you like my content and want more articles like this, then follow me on Medium (https://medium.com/@2022pct0020)
Linkedin(https://www.linkedin.com/in/tarun-kumar-singh-b75624166/)

Github(https://github.com/Tarunkumarsing)