How to set up CloudFlare’s Flexible SSL on WordPress

In August, Google announced they were going to start using https as a ranking signal for various reasons. At present, most developers and SEO people (deliberately refraining from using the word ‘expert’ because it’s thrown around far too much in the SEO world) agree switching a site from http to https has no real impact however Google did say they “may decide to strengthen” the signal in the future. In other words, in an ideal world, Google want all sites using https but for various reasons (including big financial ones) they can’t start hammering non-https sites overnight.

2015 will be a big year in the world of online security. Let’s encrypt (sponsored by Mozilla & Cisco among others) will go live and will provide free, easy to install encryption certs in an effort to make the web a safer place. Fast forward a few years or so and you’d imagine https will be standard… kinda like responsive web design is today. Knowing Google place some emphasis on https is almost a good enough reason to start using it, but right now, https is still hassle. Hassle that is absolutely worth it if you’re storing / transferring sensitive user data of course…

Whilst we wait on Let’s Encrypt to roll out (sometime in mid-2015), there is an alternative free solution to what can often be costly SSL certs… Cloudflare launched their free, Flexible SSL service a couple of months ago. It means connections from end users to Cloudflare are encrypted, however the connection from Cloudflare to your site’s server is not encrypted. This isn’t ideal, and could be slightly misleading for end users (who’ll now see the padlock symbol) but it’s better than zero encryption all together.

Here are the advantages of Flexible SSL over standard http:

• Partially encrypts data (from end user to cloudflare)
• Gets you a padlock symbol (which end users have been conditioned to associate with protection / security, so they’re likely to trust a site)
• Improves SEO (and may play a much bigger role in the future)

I’ve actually been using Flexible SSL on this site for the past month or so. I’ve recently started using it on other sites too. There are disadvantages to using it, the main one being the time involved in fixing mixed content error messages… many themes or plugins might use hardcoded http links to pull in css files, javascript files or media… they won’t be displayed by browsers by default… only https content will be displayed on a https site. Troubleshooting these errors can be hugely time consuming, but there are some plugins that can make life easier (listed below).

How to set up Flexible SSL on WordPress

1. Install and activate the Cloudflare plugin (if you haven’t already)
2. Install and activate the Cloudflare Flexible SSL Plugin
3. Visit https://yoursite.com in Chrome
4. If it’s not displaying correctly, check Chrome developer tools console. Welcome to hell. Installing and activating WordPress HTTPS (SSL) or SSL insecure content fixer may help fix these errors. If not, you’ll need to do some investigating and i’d recommend switching to the default wordpress theme temporarily as there’s a good chance your theme could be the culprit. If the theme isn’t the problem, some of your plugins are probably the issue so disable them all and re-enable one by one. W3TC cache caused redirect loops for me (disabling the minify option fixed it).
5. Once you’ve fixed all errors and you get the green padlock displaying, go to cloudflare and add a ‘page rule’ to your domain (see image below for example). Enter *yourdomain.com*, switch on ‘always use https’ and this will now ensure if you visit the http site, you’ll get redirected to the https version.

Below is what you’ll see if you have errors… notice the padlock symbol to the left of the url in the address bar… in this case i deliberately loaded an image from a http address which caused the problem.

This is how things should look once all problems are fixed (below). Note the green padlock and no warnings or errors in the chrome console…