Protocol relative URLs

Many times we have seen warnings similar to “This page contains both secure and nonsecure items” or “This page has insecure content.”. This happens when we are viewing a HTTPS site and some content on the site is loaded from HTTP. So when we try to view a site say https://www.example.com and we get this warning, that means some content on the site is getting loaded from a non https site, like http://www.example.com. These warning messages can be fixed by using protocol relative URLs.

What are protocol relative URLs?

A URL is usually similar to http://www.example.com/css/main.css or https://www.example.com/css/main.css. Both these URLs specify what protocol to be used (HTTP or HTTPS respectively). A protocol relative URL will be something similar to //www.example.com/css/main.css. In protocol relative URLs we do not specify the protocol which should be used to connect to the URL. When the protocol is not specified the browser uses the current protocol of the website. Hence, when you visit the site in HTTPS mode, the link will use HTTPS protocol and if you are using HTTP mode, it will take the HTTP protocol.

When to use?

The protocol relative URLs can be used in following cases, so that the users don’t get warnings on HTTPS protocol for non HTTPS resources. Also, make sure the resources you are using in the page are served over both HTTP and HTTPS protocol. They can be used in HTML, CSS, or JavaScript.

HTML
<img src="//example.com/images/logo.png">
CSS
#logo { background: url(//example.com/images/logo.png); }
JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

When not to use?

They should not be used the following cases:

Emails

Some email clients (e.g. Outlook) won’t try to use HTTP or HTTPs as the protocol, but will use the file:// protocol. the file:// protocol assumes that the resource referred is on the local machine, which won’t be the case.

Links or Canonical URLs

If we use protocol relative URLs in these cases, they can cause duplicate content issues between the http and https versions of the website.

Open Graph Tags

Open graph tags need absolute URLs with the protocol. If you have both http and https url you can used the secure_url to the property.

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

If you have only https URLs then you can just use the https urls for the og:image property

Conclusion

You should use protocol relative URLs for your CSS, JavaScript, custom fonts etc on your website if your site can be accessed from both http and https protocols. You should never use it for any of the resources in your emails, links, canonical URLs.

Related posts:

  1. How to enable HTTPS on WordPress using CloudFlare
  2. CSS !important Declarations
  3. Parts of URL
  4. Get various parts of URL using JavaScript

3 thoughts on “Protocol relative URLs”

Leave a Reply