The Ultimate Guide to Setting up CloudFlare Free Universal SSL on Your Site
Universal SSL is a free service offered by Cloudflare which is a global CDN provider. Whether you are using a free plan or a paid plan, you can use Universal SSL to encypt your website traffic.
It doesn’t require you to have a SSL certificate on your own server although it’s recommended that you install a valid SSL certificate on your server. In this tutorial, I will show you how to setup Cloudflare free Universal SSL. I assume that you are already using a free plan with CloudFlare.
If you don’t have a SSL certificate on your server
If this is case, follow the steps below.
Log into your Cloudflare dashboard. Select one of your websites. Then click Crypto icon.
In the SSL setting, select Fexible.
Fexible SSL means traffic between your visitors and cloudflare servers are encrypted, but traffice between Cloudflare servers and your origin server is not encrypted since you don’t have a SSL certificate on your server.
Now enter the following text into your browser address bar. Replace yourdomain.com with your actual domain name. Note the URL scheme is https.
https://yourdomain.com
It can take up to 24 hours for Universal SSL to be activated for free customers. So right now you might get redirected to plain http connection. You can also try to clear your browser history, cache and cookie to see if you can access your site via https.
After Universal SSL is activated for your website. Your visitors can use both http and https to visit your site. You can use CloudFlare page rule to force https connection for your WordPress site. But before that, I recommend you install the CloudFlare WordPress plugin first.
Install CloudFlare WordPress Plugin
Go to your WordPress dashboard. Select Plugins and search for CloudFlare. Install and activate it.
Once activated, go to Settings > CloudFlare. Scroll down to the end of the page and enter your CloudFlare Domain name, API key and API email. If you don’t know your API key and API email, just click Get this link on the right. It will take you to your CloudFlare account setting and you will find your API key and API email.
Disable developement mode and enable HTTPS procotol rewritting. Finally, click update options. Now CloudFlare plugin is working on your site.
It’s very important to enable HTTPS protocoal rewritting. I will explain in just a moment.
Force HTTPS connction with CloudFlare Page Rule
As I said ealier, your visitor can visit your site using both HTTP and HTTPS scheme. If you want to redirect HTTP connections to HTTPS, you can utilise Cloudflare Page rule.
Go to your CloudFlare dashboard. Click on Page Rules icon.
Add a URL pattern like http://*yourdomain.com/* in the text field. Then enable always use https. Save your settings.
Now all HTTP connection on your site will be redirected to HTTPS.
It important to enable HTTPS protocol rewritting in the CloudFlare WordPress plugin. If your don’t enble it and you set always use https page rule, then your css file, javascript, image on your page will still use HTTP and your site will look ugly because browsers prevent these http resources from loading while your base page is served on HTTPS.
HTTPS protocol rewritting convert HTTP links to HTTPS links so your css file, javascript, images will be served on HTTPS connection.
Note that since you origin server does not have an SSL certificate, there will be no encryption between CloudFlare and your origin server.
If You Have SSL Certificate on You Server
You can easily get a free SSL certificate from Let’s Encrypt and I highly encourage you to do it. Check out the following post to see how to get a free SSL certificate with Nginx web server.
Let’s Encrypt SSL Certificate deployment on Nginx
After you have configured SSL certificate on your server and your site is served on HTTPS connection, the only thing left to do is to go to CloudFlare dashboard, click Cypto icon. In the SSL setting, select Strict.
That’s all you need to do.
CloudFlare offers three SSL settings for free plan.
- Flexible
- Full
- Strict
Flexible is used when origin server does not have SSL certificate. Full is used when origin server have an SSL ceritifcate which can be self-signed. Strict is used when origin server have an valid SSL certificate. Valid means your certificate is issued by trusted certificate authorities. Self-signed certificate is invalid.
It’s recommended that you select Strict because traffic between CloudFlare and your origin server will be encrypted and will not be hijacked by hackers.
Note that if you have configured SSL certificate on your origin server and your website is protected by CloudFlare, then your visitor will see that the SSL certificate of your website is issued by Comodo or GlobalSign. The SSL cerificate of your origin server is only visible to CloudFlare. If you are a business or enterprise customer, you can upload a custome SSL certificate to CloudFlare so your visitor can see your own SSL certificate. In addition, in the SSL setting, you can’t select the off option. You must select Full or Strict. Strict is recommended.
Notify Google about the Change of Protocol
You should add the https version of site to Google Search Console. Google treats http version and https version of your site as different web properties. In the https property submit a new sitemap which start with https://.
After you submit the https version of your site, you should check your indexing status and crawl error of https site in Google Search Console. http indexing should go to zero and https indexing should be starting to go up.
You can also enter the following text in Google search box to check your site’s index status.
site:yourdomain.com
Encouraging Modern Browser Use
If you are a free customer, then CloudFlare requires that your visitor use a modern browser in order for HTTPS connection to work. Modern browsers support the cutting-edge ECDSA cipher suite which impose significantly less load on CloudFlare server than traditional old RSA cipher suite. Modern browsers also have support for SNI (Server Name Indication) which is a TLS extension that allows CloudFlare to install multiple SSL certifacates on one IP address.
You can use A Better Browser which is an CloudFlare app to encourage your visitor to use a modern browser. In CloudFlare dashboard, click Apps icon.
Enable A Better Browser App. Click Setup to set the version of browsers.
Additional Benefits
CloudFlare enables HTTP/2 protocol automatically for your website if you setup Universal SSL. As the newest updated version of HTTP protocol, HTTP/2 use TCP connection much more efficiently than the old HTTP/1.1 protocol therefore it can significantly speed up your website.
Go to HTTP/2 test page to see if your site support HTTP/2.
You can also go to Google Chrome’s Developer Tool, click the Network tab to see which version of HTTP protocol is used for specific elements on your website. In the screenshot below, h2 stands for HTTP/2.
It’s important to note that HTTP/2 protocol happens between your visitors and CloudFlare servers. Communications between CloudFlare and your origin server is unable to utilise HTTP/2 protocol even if you install a SSL certificate and enable HTTP/2 on your origin server. However, if you are a business or enterprise customer, you can enable Railgun web optimization between the two to speed up communication.
