Wie een pagina wil illustreren, kan het simpelst het adres van een afbeelding van elders invoegen: <img src="https://jouw-site.nl/wp-content/uploads/foto.jpg">. De afbeelding verschijnt op de andere site, maar het is jouw server die haar verstuurt, naar elke bezoeker van die site. De documentatie van Apache omschrijft de praktijk als het gebruik van jouw bandbreedte om de content van een andere site te leveren.
Hoe hotlinking werkt
Wanneer een browser een afbeelding laadt, vermeldt hij meestal in de HTTP-header Referer de pagina waarin die staat. MDN geeft aan dat deze header de origin, het pad en de parameters van de pagina kan bevatten, afhankelijk van de geldende referrer policy. Daaraan herken je verzoeken die van andere sites komen.
Waarom je je er druk om maakt
- Bandbreedte en belasting: een foto die op een drukbezochte pagina wordt overgenomen, vermenigvuldigt de verzoeken naar je hosting, wat zwaar weegt bij een beperkt pakket of bij betaling per verkeer.
- Gebruik van je beelden: jouw werk illustreert een andere site, vaak zonder toestemming of link naar jou.
- Imagorisico: je bestand kan op een dubieuze site verschijnen, en elke wijziging aan jouw kant is daar ook te zien.
Hoe je je beschermt
De bescherming steunt op de Referer-header, met twee beperkingen die de documentatie van Apache en Nginx noemt: hij is optioneel, dus sommige browsers of privacyinstellingen sturen hem niet mee, en hij is makkelijk te vervalsen. Je moet verzoeken zonder Referer dus doorlaten, en deze bescherming zien als een rem op gewone hotlinking, niet als een beveiligingsmaatregel.
Voor Apache stelt de documentatie in een .htaccess een eenvoudige regel voor:
SetEnvIf Referer example\.com localreferer
<FilesMatch "\.(jpg|png|gif)$">
Require env localreferer
</FilesMatch>Zo geschreven weigert deze regel ook verzoeken zonder Referer; de variant met mod_rewrite op dezelfde pagina laat ze door en kan een vervangende afbeelding tonen. Bij Nginx sorteert de referer-module ze in het server-blok:
location ~* \.(jpe?g|png|gif|webp|avif)$ {
valid_referers none blocked server_names *.example.com;
if ($invalid_referer) { return 403; }
}Achter een CDN bereiken afbeeldingen uit de cache je server niet meer: de bescherming moet dan in het CDN zelf worden ingeschakeld, zoals Hotlink Protection bij Cloudflare.
Voor WordPress
Blind blokkeren kan je afbeeldingen laten verdwijnen uit Google Afbeeldingen of uit linkvoorbeelden op sociale netwerken, die je bezoekers opleveren. Begin dus met observeren. WP Masquerade Pro biedt daarvoor detectie van hotlinking van afbeeldingen: in de modus Detecteren toont het de sites die je afbeeldingen weergeven, met het aantal verzoeken en de geschatte bandbreedte, zonder iets te blokkeren; in de modus Beschermen stuurt het een afbeelding "Afbeelding beschermd", een transparante pixel of een 403-fout terug, terwijl je eigen site, verzoeken zonder Referer, zoekmachines en sociale netwerken altijd worden doorgelaten. Het schrijft zijn regels in de .htaccess op Apache en LiteSpeed, en levert het blok om te kopiëren voor Nginx. Zoals elke bescherming van dit type ziet het geen afbeeldingen die via een CDN worden geleverd, en ook geen kopieën die elders worden gehost.
De gevolgen voor de vindbaarheid van afbeeldingen lees je in ons artikel over verbergen en de echte gevolgen voor SEO.