DEV Community

Cover image for HTML : Using a protocol-independent absolute path
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on

HTML : Using a protocol-independent absolute path

If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP.

This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in browsers, keeping all your asset requests within the same protocol.

Let's understand this with an example -

Example 1 -

For Website URL - http://RajeshKumarYadav.com

<img src="http://RajeshKumarYadav.com/img/logo.png"/>
Enter fullscreen mode Exit fullscreen mode

will be fine but

<img src="https://RajeshKumarYadav.com/img/logo.png"/>
Enter fullscreen mode Exit fullscreen mode

will through error.

Example 2 -

For Website URL - https://RajeshKumarYadav.com

<img src="https://RajeshKumarYadav.com/img/logo.png"/>
Enter fullscreen mode Exit fullscreen mode

will be fine but

<img src="http://RajeshKumarYadav.com/img/logo.png"/>
Enter fullscreen mode Exit fullscreen mode

will through error.

What's the fix then?

To fix the error, we should avoid writing protocol as http or https and we can call the assets as mentioned below -

<img src="//domain.com/img/logo.png"/>
Enter fullscreen mode Exit fullscreen mode

Here you can see we are using // only and if your website has http then image will also have http automatically, if your website has https in the URL then image will automatically have https.

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (0)