Here we examine why you would use a protocol relative URL.  Have you ever had this error in ie – “This page contains both secure and nonsecure items?” A protocol relative URL may also be called a “network-path reference” or “scheme-relative URL.” If your page is through HTTPS protocol, then it will request the assets be through HTTPS protocol also.  If an asset is requested through HTTP on an HTTPS page it will throw an error.  The error is “This page contains both secure and nonsecure items” error.  This is where the protocol relative URL can help.

This page contains both secure and non-secure items - Protocol Relative URL may be needed
This page contains both secure and nonsecure items

Protocol Relative URL - In use

Have you noticed when you use jQuery’s CDN, the URL looks like this?

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

This is a protocol relative URL.

 

Protocol Relative URL – Don’t break security!

According to Steve Yoast, this security issue is one of the few times relative URLs should be used.  In JavaScript or CSS, it will help ensure files and the current page are served over the same protocol.

 

Protocol Relative URL – Full examples

They can be used in HTML, CSS, or javascript.

Protocol Relative URL – HTML

Protocol Relative URL – CSS

Protocol Relative URL – Javascript

 

Read more on Protocol Relative URLs from Paul Irish. He points out, a protocol relative URL is more appropriately called a “network-path reference” or “scheme-relative URL.

I think it’s interesting that point Paul points out, “*Of course, if you’re viewing the file locally, it’ll try to request the file with the file://protocol.”

Search Terms:
protocol relative URL, network-path reference, scheme-relative URL, This page contains both secure and nonsecure items

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">