How to get HTTPS (SSL) on your localhost for local development with XAMPP (Protip).

Have you been searching all over the internet for understanding how to get HTTPS (SSL) on your localhost for development on a xampp server? Quickly setup HTTPS (SSL) on your local development server now. Well hopefully this will be the last place that you need to look to get a step by step of what to do and why you are doing it. These steps should help you whether you are working on a xampp server or any other server on Linux or Windows based systems, the key to achieve our goal will be the placement of the files in the places that your server is looking for them.

What we will be doing is generating a CA (CERTIFICATE AUTHORITY) Key that will be used to generate a CA Certificate that will be imported into your browers trusted certificate authorities. Then we will generate the server.csr (certificate signing request) and server.key (This key is the server key that your server will use to validate.).

Once these files are generated and placed in there proper places your localhost server just needs to be told to listen for https requests and boom! Your local environment will now have HTTPS (SSL) when you are working locally.

Tools to use:
Terminal
OpenSSL
Google Chrome

1. Open Terminal to the directory of your choice.

My system is a Linux system and my xampp server installs at:

/opt/lampp/

The directory that I choose to enter for the following step is the directory that holds the ssl.crt folder and ssl.key folder on my xampp server. which is here:

/opt/lampp/etc/

Once my terminal is in this directory I can follow the steps now.

2. Generate a CA Key

This is how to generate the CA Key
*That which is wrapped in {} can be what ever you set it to be. Example wonkasoft-CA.key

openssl genrsa -des3 -out {wonkasoft-CA}.key 2048

This command is going to prompt you for a password that you will need for the generation of your CA certificate.

3. Generate a CA Certificate

You will use the CA key to generate the CA Certificate with the following command:
*maintain naming conventions that will not be confusing for you.

openssl req -x509 -new -nodes -key {wonkasoft-CA}.key -sha256 -days 1024 -out {wonkasoft-CA}.pem

4. Import the CA.pem certificate into your browser

At this point the .pem file we just generated is what we are importing to the browsers settings. For Chrome it looks like this:

Top right of Chrome browser has three dots in which you can find settings, then go to advanced > privacy and security on left.

Then > Manage certificates, then click Authorities, then the import button

Once you import your .pem file you will be asked to check the items of trust for the CA.

5. Create two files for server certificate

In order to do this we are going to setup two files.
+ cat > {wonkasoft}.cnf
+ cat > {v3}.ext

This is what they need to contain:

{wonkasoft}.cnf
*{} show what you can change.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = req_distinguished_name

[req_distinguished_name]
C={US}
ST={CALIFORNIA}
L={MORENO VALLEY}
O={WONKASOFT, LLC}
emailAddress={rlister@wonkasoft.dev}
CN = {wonkasoft.dev}

---

{v3}.ext

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = wonkasoft.dev
DNS.2 = *.wonkasoft.dev
DNS.3 = localhost
DNS.4 = *.localhost

6. Generate server.csr certificate signing request

Now that the files have been created, lets generate server.csr for the server side certificate.
*Make sure that your naming conventions are the same as through the steps.
*my examples use the naming convention that I used and the file paths for my server.

openssl req -new -sha256 -nodes -out {wonkasoft}.csr -newkey rsa:2048 -keyout {ssl.key/server}.key -config <( cat {wonkasoft}.cnf )

7. Generate server.crt certificate

After generating your server.csr, now we can generate your server.crt like so:
*remember that the {} are not to be in the command.

openssl x509 -req -in {wonkasoft}.csr -CA {wonkasoft-CA}.pem -CAkey {wonkasoft-CA}.key -CAcreateserial -out {ssl.crt/server}.crt -days 1024 -sha256 -extfile v3.ext

8. Last step to change your server settings to https requests

Your server may be a little different, but you need to make a change to the following files:
+ hosts – found @ /etc/hosts
*{} just to show my choice of localhost domain replacement.

127.0.0.1 {wonkasoft.dev}
127.0.1.1 pop-os.localdomain pop-os

# The following lines are desirable for IPv6 capable hosts
::1     ip6-{wonkasoft.dev} ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

+ httpd-ssl.conf – found @ /opt/lampp/etc/extra/httpd-ssl.conf
*This is what I have placed at the end of this file.
*make sure that your paths are correct for your server.

<virtualhost *:443>

DocumentRoot /opt/lampp/htdocs
ServerName wonkasoft.dev:443
ServerAdmin yourname@example.com
ErrorLog /opt/lampp/logs/error_log
TransferLog /opt/lampp/logs/access_log

SetEnv APPLICATION_ENV development

SSLEngine on

SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL

SSLCertificateFile "/opt/lampp/etc/ssl.crt/server.crt"

SSLCertificateKeyFile "/opt/lampp/etc/ssl.key/server.key"

<filesmatch "\.(cgi|shtml|phtml|php)$">
SSLOptions +StdEnvVars
</filesmatch>
<directory "/opt/lampp/htdocs">
SSLOptions +StdEnvVars
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</directory>


BrowserMatch ".*MSIE.*" \
nokeepalive ssl-unclean-shutdown \
downgrade-1.0 force-response-1.0

CustomLog /opt/lampp/logs/ssl_request_log \
"%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

</virtualhost>

After making all these changes, make sure to restart your server. You shall now be able to view your local environment on https (ssl) protocol. Let us know this was helpful and if we can help you further.