Xampp Ssl Localhost

XAMPP - Setup HTTPS/SSL localhost on macOS. Dev; Last update: 2021-04-06 ☰ Table of Content. Check XAMPP SSL config. Backup httpd-ssl.conf. Edit httpd-ssl.conf. Setup HTTPS/SSL localhost. Create SSL folder to store SSL files. In the file xampp apache conf extra httpd-ssl.conf, under the comment SSL Virtual Host Context pages on port 443 meaning https is looked up under different document root. Simply change the document root to the same one and problem is fixed.

Often it is necessary to be able to test with SSL in a development environment, as sometimes things just wont work without SSL, especially now that some browsers such as Chrome are becoming more insistent on security being done properly. It therefore became necessary for me to work out how to setup a self-signed SSL certificate for localhost with my XAMPP install on Windows. I was unable to find any such instructions on the Apache Friends website, so after reading a little, I muddled through and this is what I did for my setup on Windows.

Note: I run a whole lot of WordPress instances but I use localhost to access them, ie I use say http://localhost/wordpresstest, so I don’t have virtual hosts setup to access it like http://wordpresstest.com.au. As such these instructions work for when you have your web content in the default htdocs folder and are just using localhost to access all web content.

The 6 Step Process


Step 1 – Editing Config


Open C:xamppphpphp.ini

For the SSL we are going to use openssl, so we need to make sure that the openssl line is not commented out. Ie remove the semi colon (;) in front of the line

extension=openssl

Save.

Now, open: C:xamppapacheconfhttpd.conf

Make sure that the rewrite_module is uncommented (ie no semi colon at the start of the line). For me, it was already uncommented.

LoadModule rewrite_module modules/mod_rewrite.so

Step 2 – Prepare for V3 Certificate


In C:xamppapache create a file named V3.ext with the following content:

subjectAltName = @alt_names
[alt_names]
subjectAltName = @alt_names
[alt_names]
DNS.1 =localhost
DNS.2 =127.0.0.1

Then edit C:xamppapachemakecert.bat (open with something other than notepad.exe) and change line 9 from:

binopenssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

to read:

binopenssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365 -extfile v3.ext

ie add -extfile v3.ext to the end of the line.

Step 3 – Create the Certificate


Open a command prompt (eg from the Windows start mennu type cmd in Windows search) then enter

cd /D C:xamppapache

Assuming you have installed xampp in C:xamppapache

Now enter:

makecert

Now you should see this:

C:xamppapache>makecert
Generating a RSA private key
..............++++++
...................++++++
writing new private key to 'privkey.pem'
Enter PEM pass phrase:

Enter in a pass phrase for decrypting your private server key, and press Enter. Eg I love to code

It will say:

Verifying - Enter PEM pass phrase:

Enter the passphrase again, press enter. Now you will see this:

-----
You are about to be asked to enter information that will be incorporated into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:

I am in Australia so I just pressed enter to use AU as the default

For some fields you can just press enter to skip the field. They are not necessary for the certificate to work.

Localhost directory xampp

State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:

For State, and Locality I pressed enter to use the defaults []. For Organization I chose to enter . so it would be left blank.

For Common Name enter localhost. It is important that this common name match the address that goes into a
browser, otherwise you will get extra warnings when navigating to your secure web pages. In my case this is localhost.

Common Name (e.g. server FQDN or YOUR name) []:

So enter localhost and then press enter.

Then it will say this:

Email Address []:

Enter your email address and press enter.
Then:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

You can safely skip these inputs by pressing enter.

Then it will say:

Enter pass phrase for privkey.pem:
Enter the passphrase that you chose earlier ie I love to code or whatever you entered.

This should succeed with a message:

writing RSA key
Signature ok
subject= C = AU, ST = Some-State, CN=localhost, emailAddress = [email protected]
Getting Private key
1 file(s) moved.
1 file(s) moved.


-----
Das Zertifikat wurde erstellt.
The certificate was provided.

Localhost Url Xampp Windows

Press any key to continue . . .

You are now finished creating your SSL certificate and private key. When we ran makecert, it actually ran a
makecert.bat script. The makecert.bat script will move your server private key and certificates in the
appropriate directories for you.
Eg C:xamppapacheconfssl.crtserver.crt
and C:xamppapacheconfssl.keyserver.key

Step 4 – Install the Certificate


Go to start menu, type the following and press enter:

certmgr.msc

Double click “Trusted Root Certification Authorities”. Right click “Certificates”, choose All Tasks ->
Import…

Wordpress localhost xampp

Click Next.

It will ask you to choose the certificate file. Click Browse and choose C:xamppapacheconfssl.crt
server.crt

Localhost

Click Next.


Next again,


then Finish.

Xampp Localhost Page

This will bring you a message. Click Yes.


Then it should say Import was successful.


Click OK.

Step 5 – Restart XAMPP Services


From the XAMPP Control Panel, click stop if and then once they are stopped, click start again.

This should enable https on localhost.

Step 6 – Test and Fix Firefox


Access https://localhost in your browser.

I found that it worked first time for Chrome, IE11, Safari 5.1.7 and Edge Version 87.0.664.66 but for Firefox you get a warning message about a potential security threat, due to the fact localhost is using a self-signed certificate.

localhost uses an invalid security certificate.

The certificate is not trusted because it is self-signed.

Jeet meeting

Error code: MOZILLA_PKIX_ERROR_SELF_SIGNED_CERT

The way I found to fix this was to add a certificate exception in the Firefox settings:

Click on Tools menu then Options
Click on Privacy & Security
scroll down to Certificates (almost at the bottom)

click on “View Certificates” button


on the “Servers” tab click “Add Exception” button

Localhost Directory Xampp


enter https://localhost and click “Get Certificate”

You get a warning message then, click “Confirm Security Exception”

After adding the certificate exception for localhost, it should now look something like this.

When you now try to access https://localhost you will still see a warning over the padlock but it now works.

Related Reading

As reference I used “Use HTTPS on Localhost (XAMPP, Windows).”

  • Hi friends,

    So many things I need help with. Where to start?
    Ok so first last week I installed Xampp + WordPress and managed to open a localhost website. THAT TOOK ME ABOUT 8 HOURS to figure out.
    Yes, that kind of a NOOB.

    Even so, I managed to download a theme and generally started to get the hang of it. But today, when I wanted to get back where I stopped, I couldn’t access the site.
    1. Should there be an identifiable “wordpress icon” to click to get a quick access to the website?
    2. I guess not, so I enter Xampp, press “start” on both “apache” and “SQL” and press Admin, but get an unable to connect message.
    3. Tried to type “localhost:8080” and reached the “ApacheFriends” page but have no idea where to go next. Tried to type different “commands” but didn’t work.
    4. Only when I type localhost:8080/GlobalIdeology (which is the temporary name of the wordpress site) I get to an index page with a “wordpress” folder. When I press that one, I get that same “unable to connect” page.

    So I have opened a localhost website using Xampp + WordPress but now I dont know where the door is. Can you please help me?

    Thank you,
    M

Wordpress Localhost Xampp

  • Are you sure Apache and SQL are both running? If they aren’t, try restarting the server. If XAMPP continues to give you trouble, seek help in XAMPP forums or by searching your particular error messages in Google.

    If servers are running, try localhost:8080/GlobalIdeology/wp-admin or localhost:8080/wp-admin

    Hey @mateoco,
    In XAMPP, by default, you don’t need at add :8080 after “localhost”, URL in your case should be http://localhost/GlobalIdeology.

    THAT TOOK ME ABOUT 8 HOURS to figure out. Yes, that kind of a NOOB.

    I suggest you uninstall XAMPP and follow the exact steps mentioned in the below article link for creating a local WordPress website:
    https://www.wpbeginner.com/wp-tutorials/how-to-create-a-local-wordpress-site-using-xampp/

    Hey @mateoco,
    You shall consider taking the backup of the website before uninstalling the server.

    Article on taking WordPress backup: https://wordpress.org/support/article/wordpress-backups/

    I only chimed in because I went through a similar problem with MAMP yesterday, and the solution was found by Googling the error message. I hesitate to have you re-build the whole thing when my solution was easily found and involved clicking a button. Saved me a LOT of time.

    A very simple and easy test of a WordPress site is to try and load the “readme.html” file. Being able to view it validates that the webserver configuration has the correct directory mapped and that the files are readable. Without having this correct it is a hopeless task with many more questions than answers. Once you have established that the correct directory is being accessed by the webserver, then it is a good time to start asking questions about PHP servers and databases etc.

    @mateoco As the only lady here (not a “guy”) who suggested you chat with XAMPP folks rather than nuking your setup, I’ll take a quick bow. Very glad you got a relatively painless fix.

    You can see the front end of your website on your local setup? Why not go to /wp-admin or /wp-login.php, log in, and begin editing?

    • This reply was modified 5 months ago by .

    The answer is quite simple if you follow these steps in right way you can sort out your problem.

    Press the Windows key.
    Type Notepad in the search field.
    In the search results, right-click Notepad and select Run as administrator.
    From Notepad, open the following file: c:WindowsSystem32Driversetchosts.
    Make the necessary changes to the file.
    Select File > Save to save your changes.

    I hope it will helpful for you.