Cloudflare as a DNS registrar with Webflow hosting
Why are there issues with Cloudflare and Webflow
Fundamentally, Cloudflare is a large network of servers that can improve the security, performance, and reliability of anything connected to the Internet.
Cloudflare does this by serving as a reverse proxy for your web traffic. All requests to and from your origin flow through Cloudflare and — as these requests pass through their network — they can apply various rules and optimizations to improve security, performance, and reliability.
Cloudflare allows you to use DNS only (gray clouds inside their UI) or use their proxy (orange clouds).
When you use the proxy (orange clouds) with a Webflow site, the site will go down when it’s time to renew the SSL cert (every 90 days).
Why does this break Webflow sites
Webflow uses Let’s Encrypt for SSL certificates and in order for Webflow to provision and install a certificate for a site, the DNS records need to be pointing to Webflow. When using Cloudflare’s proxy, that breaks that connection. Cloudflare uses those DNS records to get the site from Webflow and then serve them up.
Since this means DNS records aren’t directly pointing to Webflow, customers will see a 525 Handshake error when we attempt to renew that certificate. Our general response to customers in this instance is:
- Open your Cloudflare settings
- Check the Proxy Status on all domains that are added to the Webflow dashboard. If they are set to Proxied (orange cloud), toggle those to DNS only (grey cloud).
You can troubleshoot SSL errors using one of these tools
- SSL Checker
- SSL Server Test (Powered by Qualys SSL Labs)
- Why No Padlock? {Also checks if there are mixed content per URL}
We do post this information publicly in the University:
Webflow hosting is not compatible with the Cloudflare proxy. To avoid issues with SSL provisioning and renewal on your custom domain, you’ll need to set the proxy status of your DNS records to DNS Only in Cloudflare.
Learn more in the University: Connecting a custom domain | Cloudflare - Webflow University Documentation.
Why do people want to use the Cloudflare proxy?
In comparison to DNS-only load balancing, using Cloudflare’s proxy:
- Protects origin servers from DDoS attacks by hiding their IP addresses.
- Offers faster failover and more accurate routing, which can otherwise be affected by DNS caching.
- Integrates with other Cloudflare features such as caching, Workers, and the WAF.
- Features like
- Cloudflare Image Optimization · Cloudflare Image Optimization docs
- Maximum redirects, minimum effort: Announcing Bulk Redirects
- Bulk Redirects · Cloudflare Rules docs
- Reduces authoritative queries against Cloudflare, which can potentially save money for customers with usage-based billing.
- Supports customized session affinity and origin drain.
- More accurately geo-locates traffic, using the data center associated with the user making the request instead of the data center associated with a user’s recursive resolver.
How can customers still use Cloudflare with their Webflow site?
Enterprise customers can use Cloudflare by taking advantage of custom certificates. If a customer adds a custom SSL cert inside of Webflow, they’re no longer relying on Webflow and Let’s Encrypt to renew/provision the certificate which helps to solve this problem.
They’ll also need to add certificates inside of Cloudflare as well. When using Cloudflare, you can’t use wildcard subdomain certs issued from Cloudflare (aka DigiKey), and instead need Origin Certs with the explicit site names registered in Webflow.
This allows customers to use Webflow and to take advantage of all the features that Cloudflare provides.
One thing to note, this will require a paid plan in Cloudflare, but most companies who need this come from other platforms and will already have plans in place.