Fix Your Mixed Content Errors (Cloudflare Flexible SSL)

This morning we received a flurry of emails about various websites suddenly throwing mixed content (HTTPS) errors. Here’s what we saw, and a quick tip to fix it:

Quick Tip:

If you’re using Cloudflare’s SSL in Flexible mode, do yourself a favor and set it to Full instead. This is the first setting on the Crypto tab in Cloudflare. While you’re there, scroll to the bottom and turn  ON Automatic HTTPS Rewrites as well.

Figure 3: Set Cloudflare’s SSL feature to Full if it’s currently set to Flexible

Figure 4: Turn ON Cloudflare’s Automatic HTTPS Rewrites feature

Backstory

The underlying issue for us began yesterday (June 14th, 2017). All our sites use HTTPS. However, on some of those sites, the CSS file references suddenly were all starting with http:// causing browsers to not load those CSS files at all, and the resulting pages to look broken, as seen above in Figure 1 above.

After some digging, we found that the root cause was related to how Cloudflare rewrites http:// to https://. Cloudflare used to just automatically scan HTML for http:// asset references, and rewrite them all as https:// (a great feature!). No muss, no fuss, it just worked. However, it appears that Cloudflare’s rollout of an ON/OFF switch to control those automatic rewrites may have inadvertently turned automatic rewrites OFF for many of our sites. Having automatic rewriting be OFF was particularly problematic for a few of the sites that had also been using Cloudflare’s SSL in Flexible mode, meaning there were many http:// references that needed to be rewritten.

The Fix

The solution was to explicitly set Cloudflare’s new Automatic HTTPS Rewrites feature to ON, and also, to have Cloudflare talk to the actual source website over HTTPS (ie: Cloudflare’s SSL in Full mode) rather than over HTTP (ie: Cloudflare’s SSL in Flexible mode) in order to reduce the cases where automatic rewriting was even needed. We’ve rolled out those changes broadly, and all sites with these updated settings are working well. We highly recommend anyone using Cloudflare’s SSL in Flexible mode to make the changes we’ve outlined above in order to prevent mixed content warnings like we experienced. However, if you don’t have quick access to the Cloudflare dashboard, and you’re using WordPress, the Cloudflare Flexible SSL plugin also solves these mixed content issues.

Hope this helps!