Explain Codes LogoExplain Codes Logo

Absolute URLs omitting the protocol (scheme) in order to preserve the one of the current page

web-development
protocol-relative-urls
mixed-content-scenarios
security-bottleneck
Nikita BarsukovbyNikita Barsukov·Jan 11, 2025
TLDR

Benefit from protocol-relative URLs. Use // before links to allow the browser to choose the same scheme (HTTP or HTTPS) as the current page.

Example:

<!-- a harmless squirrel offering you an acorn [URL] 🐿️ --> <a href="//example.com/page">Accio Page</a>

This provides security and compatibility without needing to state the protocol explicitly.

Unraveling protocol-relative URLs

When it comes to URLs, omitting the protocol (also known as the scheme) allows the web resources to borrow the protocol of the current page that's referencing them. This interesting pattern is referred to as the network-path reference in RFC 3986. One of the biggest perks here is the elimination of mixed content scenarios— situations where an HTTPS page includes HTTP resources, causing a security bottleneck in modern browsers.

Traps and pitfalls

While the concept seems tantalizingly simple, it does come with its fine print. For instance, some of the more traditional browsers out there, like IE7 and IE8, don't always play by the rules when it comes to these types of URLs. Especially when they're used within <link> tags or CSS @import rules. You might find the browser attempting to download files instead of just showing them.

A brief history and acceptance

The term Protocol Relative URL was plastered across the web development lexicon by none other than Paul Irish. His writings shed light on the potential of this URL scheme enhancement in a broad spectrum. Google’s HTML/CSS style guide embraced their usage, as well as HTML5 Boilerplate. But use them wisely! Especially in edge cases like IE6 with Google Analytics where things could get a bit hairy.

It’s time for a test-drive

Before you take protocol-relative URLs for a spin, ensure you do comprehensive cross-browser testing. Resources like "Can I Use" offer you insights into which features are available in different browsers and their versions. Forewarned is forearmed: familiarize yourself with potential shortcomings and have a backup plan (like graceful degradation or polyfills) ready to go.

SEO and Accessibility—More Than Just Fancy Words!

Besides ensuring better security and compatibility, protocol-relative URLs are also crucial for Search Engine Optimization (SEO). By using these URLs consistently across your site, you can prevent the pesky "duplicate content" issue that can arise across HTTP and HTTPS schemes. Always remember: Google's robots are your friends, treat them nicely!

In terms of web accessibility, delivering content securely and reliably across different protocols is a mark of an inclusive user experience.

Note of Caution: Don't Go Overboard!

Despite their perks, there's a growing trend to bypass protocol-relative URLs because best web practice is all in for HTTPS-only resources. As the internet leans towards better security, enforcing HTTPS in your URLs ensures that your resources stay secure. While protocol-relative URLs can give you flexibility, the winds of change are clearly favoring the more secure, protocol-centric approach.