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)

Comments

Hridya Siva said…
Can you please explain how to include authority (domain name) in case of external resource
12/07/2012, 16:35
Johannes 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!
24/07/2012, 00:09
Post a Comment

Popular posts from this blog

Understanding ITIL Service Management the UML way…

-
Image
I originally had a great deal of difficult reconciling the differences amongst ITIL Change Management, Incident Management, and Problem Management. Having researched on the subjects and understanding them better now, I’ve tried to put the concepts together using a UML class diagram to capture my understanding and to keep it imprinted. Similarly, I wanted to differentiate the various categories of changes (Standard, Emergency, Normal) using an easy to understand & self-explanatory manner – a UML Activity Diagram!
Read more

How to depict (Professional-Looking) Logical Network Diagrams in Astah

-
Image
I have always had to create (professional-looking) UML diagrams using Visio-like icons. You’ve got to admit that showing a bunch of boring UML boxes hardly interests anyone less technical (like anyone whose designation has the words “manager” or “director”). This is actually possible in Astah! I’ve created a template for future projects that allows me to produce logical network diagrams that look like the following: To create this diagram, you need to do the following: Assign various icons to stereotypes. I created the following for my use: Create a new UML Deployment Diagram Every element in the diagram is created as a Node The nodes are subsequently assigned the appropriate <<stereotype>>. E.g. Internet is <<internet>>, WebZone FW is <<firewall>>, Web LB is <<loadBalancer>> Ensure the “Icon Notation” is set to “Customized Icon” for each node Instead of the boring boxes, the corresponding icons automatically gets displayed!
Read more