We’ve recently started using Cloudflare with a lot of our projects to speed up the sites, especially ones with heavy image content. Webflow can be a bit of a bugger when it comes to Cloudflare so we’ve create a post on how to get Cloudflare to proxy all your content, including the Webflow files such as images that don’t ‘sit’ on your domain but rather on the Webflow website-files.com CDN so that Cloudflare can optimise those as well and not just you HTML. You can find it here.
We’ve seen some great improvements to many projects, especially ones where clients don’t continue to optimise images after we hand over the site, not to mention the great page rules and cache control settings you get with Cloudflare.
For those struggling with this we’ve also created a Cloudflare Worker Script that only focuses on optimising images using Cloudflare’s Image Resizer. You can find that post here.
@flashsites Nice, never knew this existed, which is great as you can still utilise the CMS while also using Github and whomever you want after that. Most project we like to handover and forget if they don’t need ongoing work, so might be a hassle as a lot of our clients like to just use the Editor for changes and then hit publish and forget. So think this solution might have more for them to handle than they’d like. With Cloudflare we just create their page rules and they can manage Webflow.
I’ve added some content to the post to ensure that Cloudflare never misses anything and all assets are cached on Cloudflare. Hope this helps anyone that didn’t get the full benefit or had some images that we’re being optimised.
The problem with this approach is one of security. The user’s browser connection to Cloudflare is secure (protected by SSL), but Cloudflare’s connection to the Webflow-hosted project is not. The lack of end-to-end encryption potentially opens up a man-in-the-middle attack vector and snooping that may be unacceptable to many companies. Private and personally identifiable information can now pass the wire in clear text between Cloudflare’s infrastructure and everything between that and Webflow servers. The lack of end-to-end security could also introduce a severe issue for GDPR compliance.
Webflow should support using DNS Validation for the Let’s Encrypt certificate issuance process so that certificates can be issued automatically for proxied sites. As of now, they don’t, which is why you are advocating disabling SSL on Webflow since the inability of Webflow to renew the SSL certificate would break the hosting setup with Cloudflare.
Don’t use this method unless you and your team know the risk and potential liability. You most certainly would need to divulge this in a privacy policy. I would advise against it as I fall on the side of privacy first.
Cloudflare has the option to encrypt traffic end-to-end, and I’ve been able to set this up successfully with Webflow.
We simply need to change the SSL settings to “Full (Strict)” in Cloudflare, and then can enable the proxy in a few minutes once those changes propagate. No changes required in Webflow, and everything works perfectly.
Hi Jakes,
Thank you for the very detailed tutorial. It seems Cloudflare is sunsetting “Apps” and therefore it is now impossible to use Cassette or any other apps. At least for now.
@J8kes, I’d love to know how Webflow determines when to renew a certificate, or how it establishes a validation chain seeing it’s not the DNS provider. Your note here seems like it’s just based on a user accessing a page that’s not HTTPS.
My roundabout question is to see if setting up a Cloudflare health check that fetches directly from Webflow would be sufficient in making sure Webflow renews the certificate. I also realize it’s probably using a .well-known path to establish trust, so the site would either not be able to force redirection to HTTPS or specifically exclude those requests from that setting.
