What's the Protocol?

Web

On a recent project, @austegard recommended I look into using protocol-less URLs to load jQuery. My initial reaction was that of ignorance - “what is a protocol-less URL?” I quickly found an example:

//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

When I saw it, I thought, “That doesn’t look right. It won’t work.” But I was wrong. Sure, it’s missing an ‘http:’ or ‘https:’ prefix, but it works just fine. Look at the source for this page, and you’ll see that there is no ‘http’ or ‘https’ in the link above. But if you click on it, it loads jQuery without any trouble.

Is this the best way?

Protocolless URLs are interesting, but what’s the point? And what are the other options?

Suppose you have a website, such as contoso.com, and your website is available on both HTTP and HTTPS - at http://www.contoso.com and https://www.contoso.com. Next, suppose you want to load a javascript library from a different server, such as loading jQuery from the CDN link above on the ajax.googleapis.com server.

How can you add a script tag that loads jQuery?

There are four ways to add a reference to the jquery.min.js file:

1. Reference the HTTP version of jQuery

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">

This is the worst option, because when a user hits your site over HTTPS (at https://www.contoso.com), they will get nasty browser warning errors about mixed security, or their browser might silently not load jQuery. This is because the browser is connecting to a secure site and is reluctant to load insecure (HTTP) resources.

2. Reference the HTTPS version of jQuery

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">

This will get around the browser warnings, described in option 1, but it introduces an inefficiency - SSL is always used to load the jquery library, even when the user is hitting your site without SSL (http://www.contoso.com). Your site can load faster if you can remove this SSL dependency.

3. Use a snippet of javascript to load a reference

1
(‘https:’==document.location.protocol ? 'https://....' : 'http://....')

This will ensure that the proper protocol (HTTP or HTTPS) is used for loading jQuery, but this makes it much more tricky to add references to javascript libraries, and you can no longer have a simple script tag on your page for loading resources like jQuery.

4. Reference jQuery without a protocol

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">

This is the best option (and is recommended by Google), because when users connect to your insecure site (http://www.contoso.com), jQuery will load over HTTP, and when users connect to your secure site (https://www.contoso.com), jQuery will load over HTTPS.

Using a protocolless URL to include jQuery on your page (option 4) is, in my opinion, the best choice when you need to load resources from another server and when your site is available over both HTTP and HTTPS.


Setup

In order for a protocolless URL to work well, you need to ensure that the resource being linked to is available over both HTTP and HTTPS. In the example above, that means that jquery needs to be available at both of these URLs:

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

The reason for this is that some users will be on a HTTP page, and thus load jQuery via HTTP, while others will be on a HTTPS page, and thus load jQuery via HTTPS.

Will it work?

I was a bit unsure of this at first, but after testing it out, it seems to work well on Firefox, IE, and Chrome (I didn’t test any other browsers). So the support seems to be there. But is this just some weird quirk of URLs, or is it intentional? Interestingly, URLs are supposed to work like this - If you look at RFC 3986, you can see that protocolless URL is a proper, well formed URL according to internet standards. According to the RFC, a protocolless URL is properly identified as a “network-path reference,” but I prefer the term protocolless URL, as it’s easier to remember and more descriptive.

Address Bar

You can type a protocolless URL into your browser bar, and it will work, defaulting to HTTP

You can create an anchor tag with a protocolless URL on your page, and the link will pick up the protocol of the page that it’s on. In the screenshots, notice that since the protocol is not specified, the protocol in the tooltip matches the protocol in the address bar.

1
<a href="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">Test</a>

CSS/JS References

You can use protocolless URLs to add CSS or JS resources to your page

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js">

Warnings

It won’t work everywhere. There are some link parsers that may not be happy with it, such as some CMS WYSIWYG editors that might not accept a protocolless URL as valid. Other tools or libraries might mangle a protocolless URL, so be sure to test this out before deploying. But browsers support protocolless URLs, so as long as the javascript libraries and WYSIWYG editors on your site don’t mess things up, you should be fine.

Also, it appears that if you use a protocolless URL to reference a CSS file, IE7 and IE8 will download the CSS file twice. If only we could get everyone to move up to IE9…

References

Dave Ward - http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character
Steve Souders - http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download