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 browse…


This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav

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"/>

will be fine but

<img src="https://RajeshKumarYadav.com/img/logo.png"/>

will through error.

Example 2 -

For Website URL - https://RajeshKumarYadav.com

<img src="https://RajeshKumarYadav.com/img/logo.png"/>

will be fine but

<img src="http://RajeshKumarYadav.com/img/logo.png"/>

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"/>

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.


This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav


Print Share Comment Cite Upload Translate Updates
APA

Rajesh Kumar Yadav | Sciencx (2021-05-27T06:42:43+00:00) HTML : Using a protocol-independent absolute path. Retrieved from https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/

MLA
" » HTML : Using a protocol-independent absolute path." Rajesh Kumar Yadav | Sciencx - Thursday May 27, 2021, https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/
HARVARD
Rajesh Kumar Yadav | Sciencx Thursday May 27, 2021 » HTML : Using a protocol-independent absolute path., viewed ,<https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/>
VANCOUVER
Rajesh Kumar Yadav | Sciencx - » HTML : Using a protocol-independent absolute path. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/
CHICAGO
" » HTML : Using a protocol-independent absolute path." Rajesh Kumar Yadav | Sciencx - Accessed . https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/
IEEE
" » HTML : Using a protocol-independent absolute path." Rajesh Kumar Yadav | Sciencx [Online]. Available: https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/. [Accessed: ]
rf:citation
» HTML : Using a protocol-independent absolute path | Rajesh Kumar Yadav | Sciencx | https://www.scien.cx/2021/05/27/html-using-a-protocol-independent-absolute-path/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.