Making WordPress and CloudFlare Flexible SSL work together is a fine art, but this article will walk you through exactly how to do it.
We’ve been touting CloudFlare since we first stumbled upon it a couple of years ago.
In the last week they took a massive step in enabling HTTPS / SSL for all clients – free or premium.
If, like us, you see the ability to run free SSL on your website as a good thing, and you want to enable this neat feature on your WordPress sites then you’ve got a few things you need to do.
We’ve done it, we’ve encountered the pitfalls, and this article is designed to help you get past most of them without too much trouble.
What exactly is CloudFlare’s Flexible SSL?
I’ll assume here you know how CloudFlare itself actually works – When a visitor loads your website they’re not actually directly connected to your web server, they’re connected to CloudFlare.
When you enable SSL on CloudFlare, you say “when a visitor is browsing my site, communicate with them over HTTPS/SSL”. With Flexible SSL enabled, CloudFlare will talk to your visitors over SSL, but will talk with your web server over non-SSL.
This means that the communication channel is not 100% SSL. As always it’s broken up into 2 stages:
- Visitor <=> CloudFlare
- CloudFlare <=> Your Web Server
The difference now is that with Flexible SSL, the first stage is encrypted.
Is this ideal? No. Is it better than what you had a week ago? Sure!
WordPress and CloudFlare Flexible SSL
As with all things that are simple, when combined with WordPress it’s never, ever as easy as you’d like.
You can’t just pop into CloudFlare and turn on Flexible SSL.
Why? Because with Flexible SSL, the web requests that hit your actual WordPress site are actually still “non-SSL”. This means that when WordPress responds with assets/links, it’s still using the non-SSL protocol: “HTTP://” instead of “HTTPS://”.
You need a way to “trick” WordPress into serving the site as-if it’s actually running on HTTPS.
To facilitate this, we’ve created a very simple WordPress plugin to do just that. It examines the traffic and request headers coming to your WordPress site and if it sees it’s coming from CloudFlare, and it’s HTTPS, we turn on SSL for WordPress, tricking it into believing it’s an HTTPS/SSL connection.
We’ve also found that if you want all your visitors to browse using HTTPS instead of HTTP by default, your best bet is to not change your WordPress URL within the General Settings of your site. Read that sentence again.
Instead, you should use CloudFlare page rules to automatically redirect your visitors to SSL for you. This means it’s much less likely that you’ll break your website while setting up SSL and while it’s running.
Step-by-Step How To: Enabling CloudFlare (Flexible) SSL On WordPress
If you want this to work, and you don’t want to break your site, read all these steps carefully and understand them fully before you make any changes on your site.
If you skip a part, or you mix it up, you stand to break your site.
- At no point do you need to change your website’s URL under Settings -> General -> Website Address (URL)
- Install our simple CloudFlare Flexible SSL WordPress plugin from WordPress.org and activate it.
- Browse to your website using HTTPS instead of HTTP. Your website should load as normal. If it doesn’t, you probably have certain assets such as CSS or JPEGs that are hard-coded to use HTTP and not HTTPS.
- Once you have confirmed your website properly loads under HTTPS, you now will want to force all visitors to use it. This is best done by CloudFlare, and not on your WordPress site. Within CloudFlare go to the Page Rules section for your domain and enter a rule just as shown in the screenshot below:
The rule should be:
Always Use HTTPS – On
Once this is saved, after a few minutes, CloudFlare will start forcing all traffic over SSL.
Full SSL vs Flexible SSL
Is flexible SSL better than no SSL whatsoever?
It’s debatable and up for discussion. That said, I prefer it.
The ideal scenario is Full SSL. This is where your visitors communicate with CloudFlare over SSL (same as Flexible SSL) – but also that CloudFlare communicates with your web server over SSL too. The only way to get this is to have an SSL certificate installed on your web server.
If you want, you can even use a Self-signed certificate! This isn’t a problem because your visitors wont see any certificate warnings in their browsers, and you’ll have the advantage that ALL your traffic is encrypted over SSL.
Ideally what you would like is to have valid, certified SSL certificate, but at least with Flexible SSL, and Full SSL modes you’re making progress towards that without the added costs.
Once you get Flexible SSL up and running, talk with your web host to see what your options are with self-signed certificates and when you can, move to Full SSL with CloudFlare.
Questions or Comments?
Please use the comments section below to report issues or suggestions you may have.