HTTP and HTTPS with Google CDN

One little trick that I learned not too long ago was the ability to load a file from Google's CDN (or any CDN for that matter) relative to the protocol of the page, e.g. if the page is HTTPS, the CDN content would load HTTPS, and vice versa.

In virtually all CDN examples you'll see something like this:

But what if my page is HTTPS?  Do I somehow have to go through and either by hand, or with Javascript, update all src values to be HTTPS?

Nope.  There's a much shorter way that's part of the official URL spec that's compatible with really old browsers, such as IE 3 and Netscape 3.


Did you see that it was missing "HTTP:" at the beginning?  It may look weird, but it's a perfectly valid src attribute.  All the browser does is infer the protocol from the current location.

UPDATE: The primary reason for this is so that all elements on an HTTP page remain HTTP thus avoiding the overhead of HTTPS calls.  Similarly, we want all elements on an HTTPS page to be secure in order to avoid that nasty security dialog that could pop up to inform people that the page is only "somewhat" secure.