Hotlinking
What is it?
Hotlinking is where you reference a resource that is not on your webserver. For webdevelopers this ends up looking like
<img src="http://otherwebsite.com/pictures/pic.png" alt="pic" />
Whereas one that doesn't hotlink would be
By relative file path
<img src="/Pictures/pic.png" alt="pic" />
By absolute file path
<img src="/Pictures/pic.png" alt="pic" />
By URL
<img src="http://myWebsite.com/Pictures/pic.png" alt="pic" />
Why is it disliked
The reason this is generally looked down upon, is because every time you hotlink, the clientside makes a request to the hotlinked site. As an example, if you have a huge list of hotlinked images from 140 sites, each time you view the page with that huge list of hotlinked images, the browser makes 140 requests to all those sites to retrieve those images, which eats into the bandwidth of all those sites. If any of those requests end up very slow, this causes the page to load all the images slower with some rendering quickly from the request completing quickly, and some rendering slowly from the request completing slowly.
Additionally, if any of these sites are compromised and the images graffiti'd, the graffiti on these images, renders in your site.
On top of wasting bandwidth, you run into image link "rotting" which in my experience, rots a lot quicker than linking to top level URLs(i.e. linking to https://risingthumb.xyz as opposed to https://risingthumb.xyz/about as the about directory is more likely to move than the top level / directory). This means some of these requests will complete to the site, but will return a 404.
On top of this, if you're a website owner who can manage and configure their webserver, you can configure your webserver to return data that is chunkier in a compressed format. As an example for Apache2 in your enabled site you can add lines that look like:
AddOutputFilterByType DEFLATE application/javascript
# or compress by file type extension
<files *.wasm>
SetOutputFilter DEFLATE
</files>
This is provided by mod_filter. If you run an apache2 webserver, worth a look.
=> mod_filter documentationNote this works for Apache2. Your webserver of choice(nginx, lighttpd, rchttp etc might or might not have support for this).
Why is it not talked about anymore?
The reason hotlinking isn't talked about anymore, is that most frontend webdevelopers actively embrace it, as they hotlink a lot of javascript from external sources... making requests for them. As they are not involved in the "webpacking" process, or optimising html/videos/images/javascript bundles for web consumption most of these webdevelopers are ignorant of this.
Additionally, most of these servers are hosted in western countries, which connect well to western users. Developers are often some of the most technologically-dependent people, so pay for and have faster internet speeds than your average joe. This means slow requests aren't felt as much by them. Additionally, they don't live in any infrastructures where internet sucks and data has to be used and preserved.
Furthermore, if requests are slow for external sites, but fast for the handful of sites most requests are made(and cached) between... like Google, YouTube... etc. Well, call me a conspiracy theorist, but it's in their interest for smaller sites to be squashed by slower requests elsewhere, but quick requests to them, so their embeded material gets used, and trackers(see tracking pixels) included when using their embeds to get a more complete and cohesive dataset about web use.
=> Tracking pixelsWhat can I do about this?
You can do a few things:
- Stop hotlinking to other sites.
- Embed/hotlink only to sites you want to choke out, dislike, disrespect etc. Doing this strengthens the association of hotlinking as an action of disrespect.
- Avoid pulling javascript from other sources, but pack it together. I believe this is default behaviour for Angular as it uses Webpack(and React?), but I don't know for certain.
- Download all the images you want from other sites, locally host them on your own site. What if they change often? Then cache them regularly. Use cronjobs for caching them.
- Look into your webserver settings to see if there's tools for compressing the responses you send back to users.
The disadvantages of hotlinking can be compared slightly to the disadvantages of dynamic linking- as when things move, it breaks, and as in dynamic linking, performance degrades when pulling in these dynamically linked libs(where it isn't when it's all statically linked into one binary).