13 February 2012

Solving Mixed-Content Warnings

Web applications can be written to work with HTTP as well as HTTPS schemes.

To do so, URLs to resources should be encoded as relative URLs.

For example, on a site (softwarehard.blogspot.com), all URLs to resources should be encoded as “/images/imageResource.jpg” or “images/imageResource.jpg” 
instead of “http://softwarehard.blogspot.com/images/imageResource.jpg”

Doing so will allow for the resource to be served in both HTTP and HTTPS schemes depending on the the page request.

However, if an external resource is required, the authority (domain name) needs to be included. The most portable way to include the external resource is to use a scheme-less URL.

For example: “//cdn.blogger.com/js/jquery.js”

Note that neither HTTP nor HTTPS have been specified and doing so will allow us to skirt the mixed-content issue.

This is valid under the URI RFC

However, the caveats are that:

  1. this works well in web browsers but will likely break in email clients!
  2. there is also a minor downside to using this in IE 7 & 8 for stylesheet in that the CSS resource will be downloaded twice (explained here)


Hridya Siva said...

Can you please explain how to include authority (domain name) in case of external resource

Johannes Kuah said...

Hi Siva,

As in the blog entry, if the authoritative domain name is cdn.blogger.com, the (schemeless) URL should then be "//cdn.blogger.com". Hope this helps!