Connecting to a Webflow site via SSL.

Connecting to a Webflow site via SSL.

Webflow is a relatively new HTML5/CSS3/Bootstrap-based prototyping service that some of our more technically inclined clients have been using. The web-based editor is impressive, allowing a great deal of control and flexibility. Webflow recently launched a CMS built around their existing framework and this offering has satisfied a niche need for one of our clients.

The problem, and it's a significant one, is that Webflow does not support SSL connections. Google has given preferential treatment to sites that use SSL for a couple of years now, and both Firefox and Chrome plan to make their iconography about non-SSL sites more obnoxious and alarming.

So what to do? One solution proposed was to leverage Cloudflare's CDN-on-steroids offering as this allowed the creation of interstitial SSL certificate between client's browsers and the Webflow servers. There are of course other inherent advantages to using Cloudflare, like their ability to more deftly handle DDoS attacks and deliver content from regionally based data centers.

Unfortunately a key aspect of the Cloudflare implementation is the assignment of nameservers to their Cloudflare nameservers. This created a policy collision with our client's IT department and we needed to find another solution.

The solution we found was to proxy the traffic through the server on which the legacy site had been hosted using Apache. Here's how to do this:

First, recognize that during these operations you may cause the site to become unavailable. Plan accordingly.

Second, the following Apache modules need to be enabled:

mod_rewrite

mod_ssl

mod_proxy

mod_proxy_http

On a Ubuntu server this is as simple as running the following commands. The a2enmod command is idempotent so if you will not do harm by running it on a module that's already enabled. Also, note that a restart of the Apache service is required, not just a reload.sudo a2enmod rewrite
sudo a2enmod ssl
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo service apache2 restart

Now you need to set up the apache configuration files for the site in question. Webflow is a little weird about how it handles redirects and it's easy to create an infinite redirect loop. Our solution was to use mod_rewrite at the server level to ensure that all traffic 301 redirected to https://www.example.com

The last and most crucial step was to set up the apache configuration file with the proxy specific instructions:# Webflow proxy setup
ProxyPreserveHost On
SSLProxyEngine on
ProxyPass / http://proxy.webflow.com/
ProxyPassReverse / http://proxy.webflow.com/