Protocol Relative URLs

Thanks to the excellent Paul Irish and HTML5 Boilerplate, I discovered an excellent nugget of information recently, that’s incredibly useful when building sites / web apps that need to work both on secure (https://) and non-secure (http://) URLs. This includes all Facebook apps since October 2011.

When linking to an external JS, css or image file that is available over both https:// and https://, you can use a URL of the form:


for example (loading the jQuery library from Google’s CDN):

<script src="//"></script>

Your browser will request the asset using whichever protocol you’re viewing the current page in.

This has implications if your viewing a page locally via file://, which is why you’re always better off using a local web server rather than opening a file directly. There’s also an issue that causes IE7 and IE8 to download the file twice when this method is used in <link> tags or @imports statement within CSS, so I would say it’s best of avoided there. More details here.

This technique allows you to quickly and easily avoid the dreaded ‘this page contains both secure and nonsecure items’ warning in Internet Explorer.


Tags: , , ,

Leave a Reply