As many are aware, CloudFlare launched Universal SSL several months ago. We saw lots of customers sign up and start using these new, free SSL certificates. For many customers that didn’t already have an SSL certificate, they were able to use “Flexible SSL”.
Flexible SSL creates a secure (HTTPS) connection between the website visitor and CloudFlare and then an in-secure (HTTP) connection between CloudFlare and the origin server. For any site using absolute links to assets (i.e. javascript, css, and image files), this can lead to a “Mixed Content” error.
Mixed Content = Mixed Protocol
What is “Mixed Content”? This can be understood as mixed protocol. When the webpage is loaded over SSL (HTTPS protocol), most browsers expect all of the assets to be loaded over the same protocol. Some browsers will display an error about loading “insecure content” while others will just block the insecure content outright.
This error only applies to pages loaded over SSL, since the browser is working to make sure that secure pages only load equally secure assets.
Wordpress Plugin Updates
The latest version of the CloudFlare plugin for Wordpress works to resolve a lot of these errors by altering the protocol within the links to assets. Where currently your Wordpress site may link to your stylesheet like this:
http://www.example.com/wp/wp-content/themes/twentyfifteen/style.css?ver=4.1
We’ll remove the “http:” part to make this into a relative protocol:
//www.example.com/wp/wp-content/themes/twentyfifteen/style.css?ver=4.1
A further update to this rewriting doesn’t enable this rewriting for canonical URLs, since Google and other search engines expect this to be an absolute URL. Google also recommends securing your site with SSL, and being able to enable Flexible SSL is a great way to achieve this SEO boost!
Relative Protocol
A relative protocol //www.example.com tells your browser to load the asset over the same protocol as the main page. If your site loads over HTTPS, then the browser will try to load the asset over HTTPS as well. (In other words, NOT mixed. Everything is over HTTPS!)
This approach has no negative side effects for customers who don’t enable SSL (or who have traffic visit over HTTP as well as HTTPS), since if the page is loaded over HTTP, the assets will be loaded on the same protocol.
Best Practices using Wordpress and Flexible SSL
Protocol rewriting is on by default in our current version of the Wordpress plugin, so you should be able to enable Flexible SSL on your account and have traffic go to https://www.yourdomain.com.
CloudFlare recommends also adding a page rule for http://www.yourdomain.com* that redirects all traffic to HTTPS (assuming that Wordpress is set up for the WWW subdomain and isn’t within a directory on your domain).
With these two changes we can secure all traffic to your Wordpress site between the customer and CloudFlare’s server.
Limitations of Protocol Rewriting
While this improvement should allow many Wordpress users to enable Flexible SSL without any other changes to their website, there are a few items to consider:
If after upgrading to the latest version of the Wordpress plugin, you still get “Mixed Content” errors, it’s likely that a plugin you are using adds assets to the site though javascript. The ways and methods to do this vary greatly, so it’s not currently possible to catch all of these instances. Plugin developers are encouraged to link to assets relatively or use Wordpress’s built-in methods for adding assets to the page.
It’s also important to note the limitation of Flexible SSL. For websites that collect credit cards and other secure information, it’s important to secure this information from the customer all the way to your server, so we recommend using Full SSL and having an SSL certificate on your server because this also secures the traffic between CloudFlare and your origin.