🌓

Beware of Cloudflare’s Free SSL! Cloudflare SSL doesn't work in old browsers and there is no fallback either, the website will show a blank page and inevitably lose all your customers

by
on January 2, 2017
(2 minute read)

CloudFlare provides a free SSL certificate in their Free plan so you can have your websites through HTTPS which is great for security and SEO. What you should know, though, is that the SSL doesn’t work in old browsers and there is no fallback either, the website will show a blank page losing all you customers.

This is a major red flag that can harm your business very seriously. In my case, a SaaS product for the mass market is a huge problem. The affected systems and browsers are: all computers with Windows XP SP2 (all browsers except Firefox), Opera Classic <12.17, Android <3.0.

Internet Explorer displays a warning error that it can be bypassed although it is “not recommended” so you will probably lose the majority of users:

ie8 certificate error

In Google Chrome, things are different, you get a blocking error page as if the server had crashed or was down so not even the user has a clue.

CloudFlare’s solution

The solution CloudFlare provides is to upgrade to their paid Pro or Business plans which start at $20/month per website.

Free alternative solutions

Detect User Agent

Detect user agent and redirect only when compatible.

PHP code
// Redirect to HTTPS if HTTP and doesn't match an affected browser
if (
	( ( empty($_SERVER['HTTPS']) AND $_SERVER['HTTPS'] === 'off')
	// cloudflare free flexible ssl
	OR $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'http' ) AND
	preg_replace( '#(; Windows XP)|(; Android [0123]\.)|(Opera )#mi', '', $_SERVER['HTTP_USER_AGENT'] ) === $_SERVER['HTTP_USER_AGENT'] ) {
	header('Location: https://'.getenv('SERVER_NAME').getenv('REQUEST_URI'));
}

Use Let’s Encrypt

Please donate to keep this server up

Let’s Encrypt provides free SSL certificates that can be auto-renewed easily with a script. How to do this is out of the scope of this article although you’ll find many tutorials on how to implement it. You will probably need a VPS or a dedicated hosting to do this since shared hostings are quite limited when it comes to installing new modules.

Ignore users in old browsers

This is not something anyone can allow in their business, yet sometimes the security and SEO gains of HTTPS are above the few users still running such an old computer as Windows XP. Get your analytics stats out there and check how many users could be blocked by using CloudFlare’s HTTPS. In any case, the Let’s Encrypt certificate is the way I’d recommend.

References

Free 100% online banking account

💳 Get your free debit Mastercard

2 comments

  • Polly says:

    I’m having this issue. Thank you for this post. I searched everything looking for the reason my site isn’t showing on one of my old systems using XP (the most reliable in my opinion). Where do I add the php code? Thank you.

  • Xavi Author says:

    Hi Polly,
    You should add this code in the first file that gets executed, at the top. Usually it will be index.php

Treasure Chest

Get notified of new projects I make
Usually one email every 3 months

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));*/ /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();