Blogger: How to Switch Blogspot Image Source HTTP Protocol to HTTPS via JavaScript

Sept 30, 2015 update:

Blogspot now can be served with HTTPS.

This method below can be used for Blogger blog with custom domain.

So, Google always encourages people on the web to use HTTPS, but the Blogger service hasn't fully implemented it until now.

I dunno what exactly keeps them from upgrading this neat service (Blogger), and, like, Google Fonts resources snippets (the Google Fonts snippets have already been updated, I noticed, just now).
I guess it's really technical, or political, or economical. Who knows?

As you might have noticed, or probably haven't, most (all) of Google's services can be served with both HTTP and HTTPS. Except Blogger blog URL (with the blogspot.com subdomain). It's only (until this date) served with HTTP.
If we try to use the HTTPS for our blog (not with custom domain), it will (still) be temporarily redirected to HTTP (302 redirect).

But when I tinkered around...
As I observed, the images from Blogspot can be served using HTTPS. They won't be redirected.
The advantage is, they are faster to load than when served with the HTTP.

Therefore, I typed a JavaScript snippet to switch all the protocol of images served from Blogspot to HTTPS.

The disadvantage of this front end technique is that the browser will do twice the work. But the first request will be cancelled (but depends on the browser though). Hence, it's still faster.
It's not really a disadvantage for modern browser actually.
But it is some kind of "burden" to Blogspot server because there are additional requests. Heehee. But you know, the servers are exquisitely gigantic smart godzillas. So.

---

Here the JavaScript goes (function (d) { "use strict"; var blogspot_images = Array.prototype.slice.call(d.querySelectorAll("img[src*='blogspot.com']")); blogspot_images.forEach(function (v) { var source = v.src; // or v.getAttribute("src"); // We don't need the g (global) RegEx flag, // because the protocol is always in front. v.setAttribute("src", source.replace(/http:\/\//, "https://")); }); }(document));

This is the newer snippet (updated)

(function (d) { "use strict"; var blogspot_images = Array.prototype.slice.call(d.querySelectorAll("img[src*='blogspot.com']")), replaceThis = function (a) { // We don't need the g (global) RegEx flag, // because the protocol is always in front. return a.replace(/http:\/\//, "https://"); }, tail = function (a) { var buffer; if (a) { buffer = a.split("/"); } else { return; } buffer = buffer[buffer.length - 1]; return buffer; }; blogspot_images.forEach(function (v) { var source = v.src, // or v.getAttribute("src"), parent = v.parentNode, // get the parent anchor [a] element parent_href; if (tail(parent.href) === tail(source)) { parent_href = parent.href; parent.setAttribute("href", replaceThis(parent_href)); // switch the parent [a] href } v.setAttribute("src", replaceThis(source)); // switch the [img] src }); }(document));

---

Placing it on your Blogger blog

Go to your template HTML setting, and jump to </body> (closing body tag).

Place it above (before the closing body tag) that, like so: <script> //<![CDATA[ // either snippet above... //]]> </script>

The <![CDATA[ ... ]]> comment is the "forbidden-character-escape-er". Even though there's nothing to escape from it, it's a recommended method whenever implementing script or CSS on Blogger.

More about escaping technique on this post

---

Details about the script

1. It is auto invoked, with parameter d, which is defined as the HTML DOM document object.
2. "use strict"; directive is a new feature in ECMA5 (supported in IE10, Chrome since version 31, Firefox since version 38, Safari since 7.1, Opera since 30, Android since 4.1, Chrome Android since 42; more at caniuse). Read more at MDN.
3. The blogspot_images variable consists of all img elements which have the (partial) blogspot.com strings in the src attribute.
   It needs to be converted to Array (using Array.prototype.slice.call()) so that the variable can be looped with forEach method.
4. Then the looping starts. It will switch the http:// strings into https://.

If it found no element with that criteria, then the function would do nothing.

About the "newer snippet"

I added the Lightbox parent-href-switcher. There's that Lightbox module on Blogger to show an image by clicking the anchor element that wraps the image.
So the "newer snippet" switches both the img and the a (anchor, the parent of img) elements.

The updated "newer snippet" has an additional comparing step before switching the parent element href.
If it has the same "tail", for instance the img has tail my_image.jpeg and the parent also has that, then the parent will be switched. If not, well, the parent href won't be changed.
If the parent element has no href attribute, then it will be left intact.

---

There you go

Test it on your blog. If it isn't improving anything, then just delete the script.
And when the Blogger team has announced the official "going totally secure", this snippet can be deleted, or just keep it. It won't burden the browser. But maybe delete it. Moar makes sense.

---

Manual method

If you have large photos on a post, you can switch the HTTP to HTTPS manually, by typing it, if they're not that many.

It will be better to do the manual method. So there'll be no double works for your blog visitors' browsers.
But it will take forever if you have pajillions of images.

---

The thing to remember about "totally secure" (later)

We need to avoid the "mixed contents". Modern browsers now restrict some things being loaded over mixed protocol-ed domains. Especially if the host is using HTTPS.

1. If the host is using HTTP, then it can load both HTTP and HTTPS resources.
2. If the host is using HTTPS, then it can only load resources with HTTPS protocols.
   Images (and maybe multimedia: audio/video) can be loaded with warnings if we use HTTP on a HTTPS page.
   But, like, iframe or script or CSS will be blocked.

---

Additional: combining this with the GoogleUserContent images

Go to this post