Relative URLs - http/https

A handy, little-known trick that I’ve picked up while working on shopping carts, stat tracking, and other sites dealing with secure information, is the relative url with an optional protocol syntax.

You may have experienced sites that pop the generic warning stating “there are nonsecure items on this page” etc. in IE.

IE Secuirty Warning

This means that there are elements on the current https page that are not being referenced using the https protocol or scheme. This could potentially deter traffic by spooking your visitors, especially if they have sensitive information listed on the given page. Dynamically generating these links correctly can sometimes be a pain. This is what I’ve found for a work around.

According to RFC 3986, it is perfectly valid to use the syntax

var url = '//mysite.com/';

instead of

var url = 'https://mysite.com/';

for anchor tags, images, or anything else that can be referenced using https. This means that whether you are currently on an http/https page, the browser will render the link accordingly, sidestepping any nonsecure item issues.

The only known caveat is while using the relative syntax in IE7 or IE8 on or @import, the referenced file is downloaded twice.

I try to use this as much as possible when a situation calls for it, and not on stylesheets. The benefits greatly outweigh the negatives.