How to install SSL certificate (HTTPS) on localhost

Your support helps keep this blog running! Secure payments via Paypal and Stripe.

I’m currently working on a project that requires the use of HTTPS for communication with Amazon S3 (cloud storage). I researched how to install an SSL certificate on my localhost, and this is the solution I came up with.

Important Note:

This tutorial will guide you through the process of creating a self-signed SSL certificate. By the end of this post, you will be able to use HTTPS on your localhost.

When you access your site via HTTPS in most browsers, you will initially see a ‘Not Secure’ warning, as shown in the screenshot below. To proceed, simply click on the ‘Advanced’ button (1) and then click the ‘Continue to yourdomain (unsafe)’ link (2).

Note that the HTTPS indicator in your browser’s address bar will continue to show a red warning (or similar “Not Secure” indicator) even after you proceed. This is expected behavior because you are using a self-signed certificate on your localhost.

See this warning on **localhost**, just hits on Advanced button(1) and hits Continue to…(2)

Table of Contents

Install WampServer

In this tutorial, we will be installing SSL on WampServer. This method should also work on other popular PHP development environments like Xampp, MAMP, and AppServ. I personally use WampServer for this guide.

Install OpenSSL

Next, we need to install OpenSSL. Download and install the appropriate version of OpenSSL for your computer. Since I use Win64, I downloaded the Win64 OpenSSL full version. I installed it to E:\OpenSSL-Win64, but you can install it anywhere on your machine.

Create Your Key and Certificate

We will now generate our self-signed SSL certificate on localhost. First, open your preferred command-line interface (such as CMD) and ensure it is run as Administrator. Next, navigate to the directory where you installed OpenSSL. For example, if your OpenSSL directory is E:\OpenSSL-Win64, you would use the following command to change the directory.

cd E:\OpenSSL-Win64\bin

Private Key

Create our private key on the command line. This step will ask you for a passphrase. You can make up any passphrase you want.

Now, run the command line below to generate your private key.

openssl genrsa -aes256 -out private.key 2048

Then run another command line.

openssl rsa -in private.key -out private.key

Certificate

Next, run the command to generate the certificate. When the system asks you a series of questions, you may leave the answers blank by hitting Enter for the default values. The only exception is the Common Name field; you must type localhost for this response.

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500

Once the command finishes, you will find the generated files, certificate.crt and private.key, in your OpenSSL folder. For my setup, this is E:\OpenSSL-Win64.

Move Your Private Key and Certificate Files to the Apache folder

We will move the private key and certificate files that we just created into the Apache folder.

Navigate to your Apache folder (E:\wamp64\bin\apache\apache2.4.46\conf). Then, create a new folder called “key” inside the conf folder. The result is E:\wamp64\bin\apache\apache2.4.46\conf\key
Move the private.key and certificate.crt into the new key folder.

Edit Your httpd.conf

In your httpd.conf (E:\wamp64\bin\apache\apache2.4.46\conf), find and uncomment the lines below. Uncomment means to remove “#” in front of the line.

LoadModule ssl_module modules/mod_ssl.so
Include conf/extra/httpd-ssl.conf
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

We do this to tell Apache to load the SSL module and load the httpd-ssl.conf, which we will edit in the next step.

Edit Your httpd-ssl.conf

Next, edit the httpd-ssl.conf (E:\wamp64\bin\apache\apache2.4.46\conf\extra) so your localhost can use the self-signed SSL certificate that we generated.

Edit the httpd-ssl.conf as below.

DocumentRoot "e:/wamp64/www"
ServerName localhost:443
ServerAdmin admin@example.com
ErrorLog "${SRVROOT}/logs/error.log"
TransferLog "${SRVROOT}/logs/access.log"
SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
CustomLog "${SRVROOT}/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

DocumentRoot is where document root of WampServer.

Restart WampServer

You must restart WampServer for the changes to take effect.

After the restart, the WampServer icon should turn green. If it doesn’t, right-click the WampServer icon, go to Tools, and select ‘Check httpd.conf syntax’ to identify and correct any syntax errors. Once the issue is fixed, restart WampServer one more time.

Your localhost should now be accessible using HTTPS

Additional

Setting Up a New Project (Including HTTPS)

Create a new Virtual Host for your project. In my example, the new project is yellowdev.local
- Note for Windows users: Temporarily disable your antivirus to allow WampServer to modify the Windows hosts file without interruption. Re-enable it once the new Virtual Host is successfully created.
Restart WampServer for the changes to take effect.
Verify the connection by visiting http://yellowdev.local in your browser.
Next, open the httpd-ssl.conf file (located at E:\wamp64\bin\apache\apache2.4.46\conf\extra)
Add the code for the new HTTPS Virtual Host below the last </VirtualHost> tag at the end of the file. This step effectively adds the new virtual host configuration for HTTPS access.

<VirtualHost *:443>
	ServerName yellowdev.local
	ServerAlias www.yellowdev.local
	DocumentRoot "e:/wamp64/www/yellowdev/web"
	SSLEngine on
	SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
	<Directory  "e:/wamp64/www/yellowdev/web/">
		SSLOptions +StdEnvVars
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		Require all granted
		AllowOverride All
	</Directory>
	BrowserMatch "MSIE [2-5]" \
        	 nokeepalive ssl-unclean-shutdown \
	         downgrade-1.0 force-response-1.0
	CustomLog "${SRVROOT}/logs/ssl_request.log" \
        	  "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>

Finally, restart WampServer to apply the changes.
You can now visit https://yellowdev.local.

Adding HTTPS Support to Existing Virtual Hosts

In my situation, I already had many projects configured as virtual hosts before setting up the self-signed certificate. While these projects can still be accessed normally using http://, they are not yet configured for https://. To enable HTTPS access for them, I need to add a corresponding virtual host entry in the httpd-ssl.conf file. The virtual host entry is the same as above.

If You Can Not Communicate with the External API HTTPS, follow these steps.

In my case, my project uses CraftCMS, and the images are stored in AWS S3. The issue I have is that no images are shown on the front end. I see the error from the browser console that says “Image transform cannot be created with HTTP 500 – Internal Server Error“. Meaning the project can not communicate with the external source, which is AWS S3 in my case.

Then I check the image on the backend, I view the image, and the image shows up, but the URL comes from the CloudFront CDN. Then I downloaded the image, and I got the error that says “cURL error 60: SSL certificate problem: unable to get local issuer certificate“. Yes, I know the self-signed certificate is not complete.

To fix the incomplete SSL certificate, follow the steps below.

Download the cacert.pem from this link. It is a zip file. Extract the file, you will have a cacert.pem.
Navigate to your WampServer folder (Xampp or MAMP that you use) and go to your “php\extras” folder. Then create a new “ssl” folder. Mine looks like this “E:\wamp64\bin\php\php7.4.24\extras\ssl“.
Move the cacert.pem into the “ssl” folder.
Next, open your php.ini and search for “curl.cainfo“.
- Note that you will need to update the php.ini from two places. One is at Wampserver>PHP {version you currently activate}>php.ini. This php.ini will remove the “cURL error 60” when you view the frameworks(eg, CraftCMS) on the browser. Another place is “E:\wamp64\bin\php\php{version you currently activate}\php.ini“. This php.ini will remove the “cURL error 60” when you update the frameworks(eg, CraftCMS) via the terminal.
In the php.ini, you will see “;curl.cainfo“. You want to uncomment it and add the absolute path for the cacert.pem. Below is my example in php.ini.

curl.cainfo = "E:\wamp64\bin\php\php7.4.24\extras\ssl\cacert.pem"

Finally, restart WampServer for the changes to take effect on your localhost. This should resolve the cURL error 60 issue, as it did for me.
If you are working with multiple PHP versions in your environment, remember to check which PHP version is currently being used by the project that connects to AWS S3. There is a chance that you switched the PHP version for another project and forgot to revert to the correct version needed for your AWS S3 requests. (This is exactly what happened to me today)

Wrap up

Since the process for configuring a self-signed certificate on localhost changes occasionally, I will make an effort to keep this guide updated. I hope this post saves you time. Please consider buying me a coffee to make me smile today.

The following are the reference links used for this article: Tutorial 1, Tutorial 2, and Tutorial 3.

Support with Card

Support with PayPal

Your support helps keep this blog running! Secure payments via Paypal and Stripe.