Am I doing a bad (hotlink-y) thing?

[DrakoTheDragon]

This might be a dumb question, but please bear with me. I'm pretty new to this indie web thing :/

On my website, you can see a green sidebar with cycling site buttons at the very top. As opposed to the buttons I have listed on my index page, these ones appear on like…40% of my site, as there's an identical bar on many different pages.

I've hosted any buttons myself when hotlinking isn’t allowed. But I'm worried that the ones I am hotlinking are costing the hosts even more bandwidth due to how many unique times those images are called upon. Is this even a thing? And if so, is it bad? I'd rather not host ALL those buttons myself, but I will if it's a problem.

[Melooon]

Normally when someone visits your site, the images that load are cached in their browser and they don't load again until that person clears their cache. So if someone loads an image on one page of your site, then visits 100 pages that all have that same image, the image does not re-download load 100 times, it loads once for that person, then comes from their browser cache 99 times.

Sooo, how many times you put an image on your site is not an issue, its how many unique visitors you get (and that will always be a much bigger number anyway).

There are other threads related to hot linking that discuss the actual hotink more, but for your question directly, no, putting it on multiple pages has no impact 

[mrparker]

To expand further on what Melooon said, it is true that if it is already cached in the visitor's browser that it is just fetched from there. However, cache rules vary from site to site for various reasons - all stemming from how they have configured their servers. It is considered bad practice only because at that point you're kinda freeloading off of their bandwidth. Not all providers provide free bandwidth, not all hosts are created equal, so that cost goes from you to them - and not because it's their site being visited, but yours at that point.

Another thing that can cause issues is that you're exposing your page to link rot. The image can move, or the host can go down and the image you're linking goes with it. If you can't find another host with that image, you've officially lost it to time.

Another thing too is you're placing an immense amount of trust in the owner of the site to not be malicious. Just by you putting it into an image tag on your page, I can see not only the geography of your visitors, but also see what websites they are visiting. If this image is a particularly popular image used in a lot of sites, that's a lot of metadata about your visitors (who, potential demographics, their interests, your interests, etc) I can collect from that alone.

The above applies to anything you use in your page - not just images, everything you embed from a host that isn't yours can see all of these things.

If you can't trust the person in the same way like yourself, don't hot link - embed it instead. Sure, it takes away from your available space but really in practice it isn't much, and with compression you can keep the same visual quality while having more room for more things with modern compression formats such as avif, webp or jpeg2000.

Scripts are even more dangerous and require a lot more trust to hot link than images or other media, as then it gives me the ability to execute any code I want on your site, specific sites, or all if I wanted for any reason.

There are ways to ensure this doesn't happen, however so far in practice on the small web I rarely see people use those protections at all. It's not hard, but most people here are beginner/hobbyist programmers and aren't aware of this.

I don't think it's important for my explanation to delve into the concept of supply chain attacks and how to prevent them entirely, however the term for web development specifically is Sub-resource Integrity (SRI) and it takes a shasum of a script being imported and the browser performs a check on it to make sure it is indeed the script being fetched. If you'd like to take a deep dive into this, more information can be found on the MDN here: https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity

The above also applies to CSS as CSS can also be used to exfiltrate information similarly to how scripts can, depending on how your page is written and what can be done on it. CSS can also modify the page, in tandem with scripts, to phish your visitors for any reason. People use free hosts and hacked sites all the time to display phishing pages for popular sites and even banking services, largely because of the fact it's free to them and if it gets taken down it doesn't affect them hardly at all. This usually happens to wordpress sites, cause wordpress sites use similar plugins and some plugins have exploits in them, but regardless it can happen to anyone's site.

All of the above mentioned can be solved largely by just downloading a copy and serving it yourself. Prevents malicious people from later becoming malicious, assuming they aren't already, of course. Scripts on the other hand can be malicious hot linked or not, and require you to read and understand the code or at the very least trust the authors before doing this to be extra sure.

These are just some of the reasons that don't stem from the usual stuff like performance reasons and stuff like that. Performance reasons mainly are that you're serving images from a different host, which causes the browser to have to look up that host and connect to them, which depending on how many different hosts you're contacting it can add up and slow down the page load.