Two forward slashes in a url/src/href attribute [duplicate]

by

The “two forward slashes” are a common shorthand for “request the referenced resource using whatever protocol is being used to load the current page”.

Best known as “protocol relative URLs”, they are particularly useful when elements — such as the JS file in your example — could be served and/or requested from either a http or a https context. By using protocol relative URLs, you can avoid implementing

if (window.location.protocol === 'http:') {
    myResourceUrl="http://example.com/my-resource.js";
} else {
    myResourceUrl="https://example.com/my-resource.js";
}

type of logic all over your codebase (assuming, of course, that the server at example.com is able to serve content through both http and https).

A prominent real-world example is the Magento 1.X E-Commerce engine: for performance reasons, the category and product pages use plain http by default, whereas the checkout is https enabled.

If some resources (e.g. promotional banners in the site’s header) are referenced via non protocol relative URLs (i.e. http://example.com/banner.jpg), customers reaching the https enabled checkout are greeted with a rather unfriendly

“there are insecure elements on this page”

prompt – which, one can safely assume, isn’t exactly great for business.

If the aforementioned resource is referenced via //example.com/banner.jpg though, the browser takes care of loading it via the proper protocol both on the plain http product/category pages and in the https-enabled checkout flow.

tl;dr: With even the slightest possibility of a mixed http/https environment, just use the double slash/protocol relative URLs to reference resources — assuming that the host serving them supports both http and https.

More Related Contents:

  1. Why use protocol-relative URLs at all?
  2. Is it valid to replace http:// with // in a ?
  3. How to allow http content within an iframe on a https site [duplicate]
  4. How do I do awesome refreshless page changes like GitHub do?
  5. Max parallel HTTP connections in a browser?
  6. What is the boundary in multipart/form-data?
  7. Disabled form inputs do not appear in the request
  8. Is a URL allowed to contain a space?
  9. Is either GET or POST more secure than the other?
  10. Using PUT method in HTML form
  11. Relative path in HTML
  12. URI starting with two slashes … how do they behave?
  13. Why is form enctype=multipart/form-data required when uploading a file?
  14. Absolute URLs omitting the protocol (scheme) in order to preserve the one of the current page
  15. Cross Domain Form POSTing
  16. WCF service to accept a post encoded multipart/form-data
  17. HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)
  18. Should PUT and DELETE be used in forms?
  19. Do HTTP POST methods send data as a QueryString?
  20. How should I choose between GET and POST methods in HTML forms?
  21. How to avoid sending input fields which are hidden by display:none to a server?
  22. Large file upload though html form (more than 2 GB)
  23. What characters must be escaped in an HTTP query string?
  24. Valid content-type for XML, HTML and XHTML documents
  25. How to fix “insecure content was loaded over HTTPS, but requested an insecure resource”
  26. Can’t show some websites in iframe tag
  27. Adding http request header to a a href link [duplicate]
  28. create a domain name pointing to an IP of port different than 80
  29. What does the question mark at then end of a css include url do?
  30. Custom HTTP Request headers in HTML

Leave a Comment