Introduction to protocol-relative URLs

Recently I learned an amazing new trick, the protocol-relative URL, where the scheme of a URL (the http bit) can be dropped and your browser will use the same scheme that the page’s URL uses. This is very useful for when you have a website on http & https. For example you can set an image URL to be:

//demo.com/horse.png

and if you browse to

http://www.demo.com

then it will load the image from

http://demo.com/horse.png

but if you got to

https://www.demo.com

then it will load the image from

https://demo.com/horse.png – and this works with CSS & JavaScript too!

This is not some odd browser trick, this is in the standard for how URLs work!

To be clear this is similar, but not the same as absolute & relative URLs.

SharePoint

SharePoint (and for this post, this has only been checked with 2010 so your mileage may vary on newer/older versions) does not follow this standard and actually breaks protocol-relative URL’s in two ways.

Front End

If you are working on the SharePoint UI and putting content in a content editor web part or an text column in a list and you edit the HTML and put in a protocol-relative URL SharePoint and hit save SharePoint will “fix” it by putting the current scheme in for you! So no matter what you do, on the front end you are completely stuffed.

Example

You put in <img src=”//sharepoint/horse.png”/> SharePoint will change it to <img src=”http://sharepoint/horse.png”/> (assuming your page is on a http scheme).

Back End

The other scenario is you are working with the SharePoint web services, for example the list service, and setting the HTML that way – SharePoint once again will try and “fix” things. Interesting it does something completely different to the front end. I guess the front end uses JavaScript and the back end uses some other code. It removes the attribute completely from the HTML.

Example

You put in <img src=”//sharepoint/horse.png”/> SharePoint will change it to <img /> – yip the src attribute is gone.