How to Setup Secure WebSocket with HTTPS in Apache

Secure WebSocket over TLS is strongly recommended for use in production environments and prevents data sniffing or modification from the time the data is submitted through the WebSocket protocol to the time it's received by the end-user.

This article will step you through the process of setting up secure WebSockets through HTTPS using an Apache webserver.

Create and Install your SSL Certificate

An SSL certificate is required for the WebSocket WSS (WebSocket Security) protocol to work in production environments that use the HTTPS protocol for the website. If your website uses an SSL certificate, you'll be required to use the WSS protocol for secure communications. There is no way around this.

Make sure that you create and install your SSL certificate first. If you've already completed this step, you can move onto the remaining WebSocket setup steps below.

Configure a Secure WebSocket in Apache

Thankfully, Apache has made this super simple to set up performing a few quick configuration updates and the ProxyPass and ProxyPassReverse directives.

To start, we'll need to enable the mod_proxy module in Apache with the following command-line command:

a2enmod proxy

Next, we'll need to load up the Apache configuration file that contains your virtual hosts. This is generally located in the following server directory:

/etc/apache2/sites-available/000-default.conf

Once you've found and opened the Apache configuration file, we'll need to load the mod_proxy module somewhere above your listing of virtual hosts:

LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so

Map the Secure WebSocket to a Proxy

Finally, we'll be using the ProxyPass and ProxyPassReverse directives to map the WebSocket data transferred to the correct location for anyone within your website or application that's listening.

Let's assume that our WebSocket connection will take place at the following URL:

wss://[our-domain]/wss

Since the /wss directory technically doesn't exist on our server, we'll need to map it to a secure port using a proxy inside our Apache virtual host node for our website:

<VirtualHost *:80 *:443>
	....
	ProxyPass /wss ws://[our-domain]:[secure-port]
	ProxyPassReverse /wss ws://[our-domain]:[secure-port]
</VirtualHost>

You'll notice that a port is assigned to the ProxyPass and ProxyPassReverse directive URL's. Make sure that the port you select is available for use and that there are no restrictions to that port on your server. Some hosting providers close off most of your server's ports by default for security reasons and will require you to manually set up or request to allow access.

Restart Your Apache Webserver

To restart your Apache webserver, use the following command-line command:

sudo systemctl restart apache2

If no errors were found in your Apache configuration during the webserver restart, you should not see any error messages reported in the command-line console and all should be working as expected.

Conclusion

At this point, our secure WebSocket for HTTPS configuration should be set up successfully on our server.

As an example, you can tie this configuration together by creating a chat room with JavaScript to see how the client-side and server-side pieces work together.

Ubuntu with Apache is the easiest way to accomplish this. If anyone needs instructions on how to set this up in a Windows environment, let me know and I'll put something together.