Goal: Run XAMPP on ports 8080/8443 (to avoid conflicts) with a trusted SSL certificate.

1. Configure Ports (Avoid Conflicts)

• File:C:\xampp\apache\conf\httpd.conf
  • Change Listen 80 → Listen 8080
  • Change ServerName localhost:80 → ServerName localhost:8080
• File:C:\xampp\apache\conf\extra\httpd-ssl.conf
  • Change Listen 443 → Listen 8443
  • Change <VirtualHost _default_:443> → <VirtualHost _default_:8443>

2. Create Certificate Config

• Action: Create a new file C:\xampp\apache\conf\cert.conf
• Content:Ini, TOML[req] distinguished_name = req_distinguished_name x509_extensions = v3_req prompt = no [req_distinguished_name] C = US ST = State L = City O = Localhost OU = Org CN = localhost [v3_req] keyUsage = digitalSignature, keyEncipherment, dataEncipherment extendedKeyUsage = serverAuth subjectAltName = @alt_names [alt_names] DNS.1 = localhost IP.1 = 127.0.0.1

3. Generate the Certificate

• Action: Open PowerShell/Terminal in C:\xampp\apache\bin
• Command:PowerShell.\openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout "C:\xampp\apache\conf\ssl.key\server.key" -out "C:\xampp\apache\conf\ssl.crt\server.crt" -config "C:\xampp\apache\conf\cert.conf" -sha256

4. Configure Apache to Use It

• File: C:\xampp\apache\conf\extra\httpd-ssl.conf
• Check these lines:ApacheSSLCertificateFile "conf/ssl.crt/server.crt" SSLCertificateKeyFile "conf/ssl.key/server.key"

5. Trust the Certificate (The Critical Step)

1. Go to C:\xampp\apache\conf\ssl.crt.
2. Double-click server.crt → Install Certificate.
3. Select Local Machine.
4. Important: Place in “Trusted Root Certification Authorities”.

6. Restart & Test

• Restart Apache in XAMPP.
• URL: https://localhost:8443/

To access your site as https://google.local, you need to set up a Virtual Host.

Important Limitation: Since your Apache is running on port 8443 (because port 443 is blocked), your URL will technically be https://google.local:8443. To get rid of the :8443 and have just https://google.local, you would need to fix the conflict with your “Local” app so Apache can use port 443 again.

For now, let’s set it up on your current secure port (8443).

Step 1: Update the Windows “Hosts” File

This tells Windows that “google.local” means “this computer”.

1. Click Start, search for Notepad.
2. Right-click Notepad and select Run as administrator.
3. Open this file: C:\Windows\System32\drivers\etc\hosts (You may need to change the file filter from “Text Documents” to “All Files” to see it).
4. Add this line at the very bottom:127.0.0.1 google.local
5. Save and close.

Step 2: Configure Apache Virtual Hosts

This tells Apache which folder to serve when someone asks for “google.local”.

1. Open C:\xampp\apache\conf\extra\httpd-vhosts.conf.
2. Add this block to the bottom of the file:Apache<VirtualHost *:8443> DocumentRoot "C:/xampp/htdocs/google" ServerName google.local SSLEngine on SSLCertificateFile "conf/ssl.crt/server.crt" SSLCertificateKeyFile "conf/ssl.key/server.key" </VirtualHost> (Make sure you actually have a folder named google inside htdocs).

Step 3: Update Your Certificate (Crucial!)

Your current certificate is only valid for “localhost”. If you visit “google.local”, Chrome will scream at you again. We need to add “google.local” to the certificate.

1. Open your C:\xampp\apache\conf\cert.conf.
2. Update the [alt_names] section at the bottom to include your new domain:Ini, TOML[alt_names] DNS.1 = localhost DNS.2 = google.local IP.1 = 127.0.0.1
3. Regenerate the certificate (Run this in PowerShell at C:\xampp\apache\bin):PowerShell.\openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout "C:\xampp\apache\conf\ssl.key\server.key" -out "C:\xampp\apache\conf\ssl.crt\server.crt" -config "C:\xampp\apache\conf\cert.conf" -sha256

Step 4: Re-install the Certificate

Since the file changed (again), Windows needs to trust the new version.

1. Go to C:\xampp\apache\conf\ssl.crt.
2. Double-click server.crt -> Install Certificate.
3. Local Machine -> Trusted Root Certification Authorities.
4. Finish.

Step 5: Restart and Test

1. Restart Apache.
2. Visit: https://google.local:8443

You should see your website with a secure Green Padlock.

Perfect 👌
Here is a clean, save-worthy recap you can keep as notes, documentation, or reuse in a course.

Fixing HTTPS (mkcert) on Brave for https://localhost (Ubuntu + XAMPP)

🎯 Problem

• HTTPS worked in Chrome and Firefox
• Failed in Brave with:ERR_CERT_AUTHORITY_INVALID
• Certificate was issued by mkcert

🔍 Root Cause

• Brave was installed as a Snap package
• Snap browsers are sandboxed
• Snap does NOT properly trust system Certificate Authorities
• mkcert installs its CA into the system trust store
• Result: Brave Snap could not see mkcert’s CA

✅ Final Working Solution (Correct & Professional)

✔ Use Brave installed via APT (.deb), not Snap

🧱 Step-by-Step Final Solution

1️⃣ Ensure mkcert CA is installed (already done, but important)

mkcert -install

2️⃣ Remove Brave Snap (if installed)

sudo snap remove brave

(In your case, it was already removed)

3️⃣ Add Brave official APT repository

sudo curl -fsSLo /usr/share/keyrings/brave-browser-archive-keyring.gpg \
https://brave-browser-apt-release.s3.brave.com/brave-browser-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/brave-browser-archive-keyring.gpg] \
https://brave-browser-apt-release.s3.brave.com/ stable main" | \
sudo tee /etc/apt/sources.list.d/brave-browser-release.list

4️⃣ Update package list

sudo apt update

(Chrome repo errors are irrelevant and can be ignored)

5️⃣ Install Brave (APT version)

sudo apt install -y brave-browser

6️⃣ Verify Brave source (CRITICAL)

which brave
which brave-browser

✅ Correct result:

/usr/bin/brave-browser

❌ Wrong (must NOT be):

/snap/bin/brave

7️⃣ Launch Brave and test

brave-browser

Open:

https://localhost/dashboard/

✅ Result:

• 🔒 Secure lock icon
• No privacy warning
• mkcert certificate trusted

🧠 Key Takeaways (Very Important)

🔑 Golden Rule

For local HTTPS development, never use Snap browsers

Why?

• Snap browsers:
  • Don’t reliably read system CA store
  • Break mkcert / local TLS
• APT (.deb) browsers:
  • Use system trust store correctly
  • Behave like real production browsers

📌 Recommended Setup for Developers