OMFG! Protocol Relative Hyperlinking!

Today, I ran across something at work with my co-worker Sean that just hit us as a “duh” moment. I’ve been a web developer for a LONG time, and this little gem was never in my arsenal of web knowledge.

The sad part about this little tidbit is that it would have saved me and the team I’m on a ton of time. You see, we work quite a bit with secure web sites using https, SSL protocol. But it’s a fickle thing, because web browsers hate it if anything on the page is linked without SSL if you’re already in SSL. In our development environments, we don’t have certificates installed, so sometimes we forget to put that elusive little “s” at the end of the http. What happens then for those who don’t know is your customer’s browser is experience on your site is abruptly halted to prompt you that there’s unsecured content on the page! GASP!

Needless to say that’s mud in your face when you present your awesome secured site to your customers. What ensues then is a mad search and replace for that lone link sitting in some obscure corner of your html that has that hard coded “http”!

The epiphany is you can use what’s called a Protocol-Relative Hyperlink, so you can just create a image link for example like this:

<img src="//yoursite.com/yourimage.gif" />

instead of coding in the full URL:

<img src="https://yoursite.com/yourimage.gif" />

So the // in front acts just like a relative link for your protocol, picking up whatever you were at, SSL or not! It’s so simple it’s hard to believe I missed it, heck, that’s probably why we missed it! Unreal…

So, now I know, and I’m writing it in here so I never forget, and who knows, maybe it’ll help someone else too.