Enabling SSL on Blogger with a custom domain name

Tuesday, August 16, 2016
I was on a mission for the past few days to try and enable SSL for this web-site.  Not that there is anything confidential on the site but I just wanted to see if I could get that nice little green padlock to appear.

It turns out that Blogger supports SSL encryption on blogs hosted on their blogspot.com domain for everyone.  Therefore, I could have this blog hosted at https://flexency.blogspot.com/ (which redirects right back here, now) and I would get my encryption.....but I would lose my own domain name.  Once you switch to an alternate URL, like http://blog.flexency.com/, you lose your ability to enable encryption.

Enter CloudFlare to solve this problem with Flexible SSL.  Flexible SSL works by creating an SSL connection between your web browser and the CloudFlare network and a regular HTTP connection between CloudFlare and the back-end - Blogger in my case.  For a full description of this process, please see a very detailed posting on the CloudFlare web-site at https://blog.cloudflare.com/ssl-on-tumblr-wordpress-blogger-appengine-pos/

The benefit of FlexibleSSL is that the connection between your browser and the CloudFlare platform is protected by SSL.  This means that your ISP can not easily see what pages you are viewing.  They can still track DNS lookups (if you use their DNS) and the number of connections and/or bytes sent to the CloudFlare IP address.

Remember:  This site does not require you to login, store any personal information or ask you for any information.  Therefore, the fact that the connection between CloudFlare and Blogger is over HTTP is not a security concern.  Using a managed platform that is always patched against security vulnerabilities easily outweighs any *perceived* risk of this HTTP connection.  Please see http://blog.flexency.com/p/site-security.html for a full discussion of the trade-offs between a managed platform and an HTTPS connection

So by following these instructions, I started to enable encryption.  After getting all of the proper settings in place, I went my browser to test the connection.

And....

Mixed content error!!!  This means some elements of the page were served via HTTP when the entire page was supposed to be HTTPS

So I started moving all of my images to servers with SSL enabled.  I was actually able to move everything except the favicon.ico file.  This URL was automatically generated by Blogger and I was unable to figure out how to change it.  This 1 single (relatively unimportant) file was now causing a Mixed content error for every page on my blog.

After looking around, I found out that by editing my blog template and disabling this line: (a BIG Thank You to whoever posted this Stack Overflow answer --> http://stackoverflow.com/questions/33960856/delete-favicon-ico-file-from-blogger )
<b:include data='blog' name='all-head-content'/>

that pestering favicon.ico reference disappeared.  Apparently this is a Blogger macro that adds several headers - and the favicon.ico reference is hard-coded to be HTTP and not a relative URL.

Upon further investigation and editing my template, I found out that single above line ended up generating the following HTML on every page of my blog:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='http://blog.flexency.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://blog.flexency.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Flexency - Atom" href="http://blog.flexency.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Flexency - RSS" href="http://blog.flexency.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Flexency - Atom" href="https://www.blogger.com/feeds/3885535862729175922/posts/default" />
<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://blog.flexency.com/" />
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/4044097237-ieretrofit.js"></script>
<![endif]-->
<meta content='http://blog.flexency.com/' property='og:url'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

The exact HTML this generates on your blog may be different based on your template.  Just make sure to add back manually any important lines that also get removed when you try to get rid of favicon.ico

To find your exact headers, you can simply insert an HTML comment such as:
<!-- BEGIN headers-->

before the macro and another one directly after the macro.  The next time you reload your blog, you will be able to easily determine which lines are generated for your blog.

Happy blogging on Blogger with SSL.