{"id":280,"date":"2020-07-25T19:36:00","date_gmt":"2020-07-25T19:36:00","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=280"},"modified":"2021-03-22T19:49:20","modified_gmt":"2021-03-22T19:49:20","slug":"protocol-relative-url-network-path-reference-or-scheme-relative-url","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/protocol-relative-url-network-path-reference-or-scheme-relative-url\/","title":{"rendered":"Protocol Relative URL &#8211; Network-Path Reference or Scheme-Relative URL"},"content":{"rendered":"\n<p>Here we examine why you would use a\u00a0<strong>protocol relative URL<\/strong>.\u00a0 Have you ever had this error in ie &#8211; \u201cThis page contains both secure and nonsecure items?\u201d A protocol relative URL may also be called a\u00a0\u201c<strong>network-path reference<\/strong>\u201d or \u201c<strong>scheme-relative URL.<\/strong>\u201d If your page is through HTTPS protocol, then it will request the assets be through HTTPS protocol also. \u00a0If an asset is requested through HTTP on an HTTPS page it will throw an error. \u00a0The error is \u201cThis page contains both secure and nonsecure items\u201d error. \u00a0This is where the\u00a0protocol relative URL can help.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"265\" height=\"125\" src=\"https:\/\/wshop.fi\/eng\/wp-content\/uploads\/2021\/03\/ie-security.jpg\" alt=\"This page contains both secure and nonsecure items\" class=\"wp-image-281\"\/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL\u00a0&#8211; In use<\/h2>\n\n\n\n<p>Have you noticed when you use jQuery\u2019s CDN, the URL looks like this?<\/p>\n\n\n\n<p><code>\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js<\/code><\/p>\n\n\n\n<p>This is a&nbsp;<strong>protocol relative URL<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL &#8211; Don\u2019t break security!<\/h2>\n\n\n\n<p>According to\u00a0<a rel=\"noreferrer noopener\" href=\"http:\/\/yoast.com\/relative-urls-issues\/\" target=\"_blank\">Steve Yoast<\/a>, this security issue is one of the few times relative URLs should be used. \u00a0In\u00a0JavaScript or CSS, it will help ensure files and the current page\u00a0are served over the same protocol.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL &#8211; Full examples<\/h2>\n\n\n\n<p>They can be used in HTML, CSS, or javascript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL &#8211; HTML<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"\/\/surfingsuccess.com\/images\/logo.png\"><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL &#8211; CSS<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>#theinternet { background: url(\/\/mosthandsomemanever\/nicklefevre.png); }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Protocol Relative URL &#8211; Javascript<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>Read more on Protocol Relative URLs from&nbsp;<a href=\"http:\/\/paulirish.com\/2010\/the-protocol-relative-url\/\" target=\"_blank\" rel=\"noreferrer noopener\">Paul Irish<\/a>. He points out, a&nbsp;protocol relative URL is more appropriately called a&nbsp;\u201c<strong>network-path reference<\/strong>\u201d or \u201c<strong>scheme-relative URL.<\/strong>\u201d<\/p>\n\n\n\n<p>I think it\u2019s interesting that point Paul points out, \u201c*Of course, if you\u2019re viewing the file locally, it\u2019ll try to request the file with the&nbsp;<code>file:\/\/<\/code>protocol.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here we examine why you would use a\u00a0protocol relative URL.\u00a0 Have you ever had this error in ie &#8211; \u201cThis page contains both secure and nonsecure items?\u201d A protocol relative URL may also be called a\u00a0\u201cnetwork-path reference\u201d or \u201cscheme-relative URL.\u201d If your page is through HTTPS protocol, then it will request the assets be through [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-280","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":1,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/280\/revisions\/282"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}