How to Install an SSL Certificate (HTTPS) on Localhost

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

I am currently working on a project that requires HTTPS to communicate with Amazon S3 (cloud storage). After researching how to install an SSL certificate on localhost, I have documented the solution below.

Update: WampServer Native HTTPS Support

Since version 3.3.2, WampServer includes built-in support for HTTPS. I am currently using WampServer 3.4.0. Here is how to enable HTTPS for a virtual host:

• Right-click the green WampServer icon and select “Wamp settings.”
• Enable the option “Wampserver ready to support HTTPS.”
• WampServer will automatically restart. Wait for the icon to turn green.
• Go back to “Wamp settings” and enable “Enable HTTPS for localhost.”
• Left-click the green WampServer icon and select “Your VirtualHosts.”
• Navigate to the “HTTPS mode for VirtualHost” menu.
• Hover over this menu to see all VirtualHosts created via WampServer. Select the one you wish to switch from http:// to https://.
• The server should restart automatically to apply the changes.

Tip: If a newly created VirtualHost does not appear in the “HTTPS mode for VirtualHost” menu, exit and restart WampServer entirely.

Manually Setting Up SSL in WampServer

If the built-in feature does not work for your environment, you can use this manual method. This process is also compatible with other PHP environments like XAMPP, MAMP, and AppServ.

Method 1: Install OpenSSL

First, download and install the appropriate version of OpenSSL. Since I use Win64, I installed the full Win64 OpenSSL version to E:\OpenSSL-Win64, though you can install it in any directory.

Create Your Key and Certificate

• Open your command-line interface (e.g., CMD) as an Administrator.
• Navigate to your OpenSSL binary folder:

cd E:\OpenSSL-Win64\bin

Generate a 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

Generate the 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 finished, certificate.crt and private.key will be available in your OpenSSL folder. For my setup, the OpenSSL folder is E:\OpenSSL-Win64.

Configure Apache

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

Move the Files:

Navigate to your Apache configuration folder (e.g., E:\wamp64\bin\apache\apache2.4.x\conf). Create a new folder named key and move both private.key and certificate.crt into it.

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"
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

Method 2: Using OpenSSL from WampServer

The new WampServer comes with the OpenSSL tool, you can create the private key and certificate files directly from your command line.

• Open Command Prompt as an Administrator.
• Navigate to your Apache bin directory by running this command: cd E:\wamp64\bin\apache\apache2.4.65\bin
• Run the following OpenSSL command to generate a self-signed certificate (server.crt) and a private key (server.key) for local development:

openssl req -new -x509 -nodes -out server.crt -keyout server.key -days 3650 -subj "/CN=localhost"

• Open your File Explorer and go to E:\wamp64\bin\apache\apache2.4.65\bin.
• Find the newly created server.crt and server.key files. Cut both of them.
• Paste the files into the configuration directory where Apache expects them: E:\wamp64\bin\apache\apache2.4.65\conf\
• Ensure your httpd-ssl.conf file (around line 157 and a bit below) points to both of these files correctly. It should look like this:

SSLCertificateFile "E:/wamp64/bin/apache/apache2.4.65/conf/server.crt"
SSLCertificateKeyFile "E:/wamp64/bin/apache/apache2.4.65/conf/server.key"

• Restart the Apache service from the Wampserver system tray icon.

This method works with apache2.4.65 that comes with WampServer. In the httpd-ssl.conf, by default the server.crt and server.key are already added in the file. You just need to make sure you generate both files and store them in the correct path.

Additional

Setting Up a New HTTPS Project for the manual OpenSSL configuration method.

• Configuring a New HTTPS Virtual Host:
  • Open the httpd-ssl.conf file where is located at E:\wamp64\bin\apache\apache2.4.46\conf\extra. You WampServer location will different from mine.
  • Append the new HTTPS Virtual Host configuration below the last </VirtualHost> tag at the end of the file to enable secure access. My example project is yellowdev.local.
  • In this step, the new virtual host is not created yet. We add the configuration for HTTPS first.

<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>   

• Create a new Virtual Host for your project:
  • In my example, the virtual host is yellowdev.local
  • This step, you tell WampServer to create the new virtual host for you.
• Restart WampServer to apply the changes.
• You can now visit https://yellowdev.local.

Adding HTTPS Support to Existing Virtual Hosts for the manual OpenSSL configuration method.

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 HTTPS virtual host configuration is the same as above. You just need to change the virtual host name, absolute project path and document root for your project. Finally, restart WampServer to take an effect from your changes.

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\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 (e.g., 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 (e.g., 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\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.

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