Secure your blog or site with HTTPS using free SSL certificate from Cloudflare

HTTPS is the secure version of HTTP protocol for commuincation between client and server. This type of communication requires a certificate from a trusted source which is used to establish a secure connection. Typically, most of the web-hosting companies like GoDaddy etc provides this paid service by verifying your identity. Cloudflare has introduced Universal free SSL certificates which you can use with custom domain from blogger, wordpress blog or any website. Just to add this free SSL certificate will require you to use Cloudflare DNS and this free certificate may not be supported on old browsers for which you will have to upgrade to their paid service.

Setting up Cloudflare Account :-

First thing that you have to do is to setup an account with Cloudflare in order to use their free SSL

• Visit Cloudflare website and signup for their free account.
• After signup, add your website and click on Scan DNS Records. It will take upto 1-2 minutes to scan your domain and retrieve the DNS records.
• Once the scanning is done, Cloudflare will give you two names for name-servers, which you will have to modify in your Domain Registrar's website.
• Open your domain registrar dashboard and look for the option of "Change Name Servers" (This option could be under manage your domain and DNS).
• Once you have changed the custom name servers, check Cloudflare website status to detect the updated name servers in your domain registrar. Note, it may take up to 24 hours to reflect the changes.

Enabling SSL on Cloudflare for your domain :-

• Go to Cloudflare website, select Crypto tab.
• Select Flexible from the drop down (right side of SSL section).
• Congratulations, you got SSL enabled for your domain ! 

Redirecting HTTP requests to HTTPS :-

Now in order to serve all the requests over HTTPS, you need to add two rules in Cloudflare dashboard.

• Go to Cloudflare website, select Page Rules tab.
• Click on add new rule for adding Rule1 
• In the URL section, enter  http://*yourdomain.com/* and the settings should be "Always use HTTPS"

• Add another rule Rule2 as 
• In the URL section, enter  https://yourdomain.com/* and the settings should be "Forwarding URL" & "301-Permanent Redirect" to https://www.yourdomain.com/$1

• Add another rule Rule3 as 
• In the URL section, enter  http://yourdomain.com/* and the settings should be "Forwarding URL" & "301-Permanent Redirect" to https://www.yourdomain.com/$1

Verify SSL and resolving Mixed Content Warnings :-

Open your website in a browser and look for lock or secure sign to ensure that your website is using SSL. Now, in some cases, HTTPS may not work because of mixed content. Mixed content basically means there are few resources from your website like css, js or any other content which is still served over HTTP rather than HTTPS.

In order to check for mixed content errors, open the developer-tools from your browser and look for errors like :-

Mixed Content: The page at ‘https://yourdomain.com/’ was loaded over HTTPS, but requested an insecure script ‘http://<some-url>/script.js’. This request has been blocked; the content must be served over HTTPS

How to resolve mixed-content errors?

One hard way to resolve these errors is to scan your source code and replace HTTP with HTTPS.

If you have a blog at Blogger, you can visit this link by Google for step-by-step guide to resolve these errors. If you are using Wordpress, then you can install either of these plugins Wordpress HTTPS (SSL)  or Really Simple SSL.