Table of contents
Why disable hotlinking?
In a recent project, we encountered a very interesting situation where bots would go over the content that got posted on the portal, get the image URL, and repost it on different forums, sites, portals, or applications.
We noticed that this behavior was happening because of the traffic that came with a very short duration and was directed to image assets and not the actual pages that were showing those images.
While getting those images and posting them somewhere else wasn’t the issue, the problem was the fact that they linked directly to our image URL, and that created 2 issues:
- traffic bandwidth being stolen, as the assets are loaded from our server
- site getting notifications about non-conventional traffic from ad partners that were scanning the traffic at the DNS level
Given that the ad part was vital for the site, we decided to go with the option of disabling hotlinking for image assets.
How to disable hotlinking?
The most common for disable hotlinking is to block other sites/referrers from accessing the image URL.
We’re going to use the referer option to see from where the call comes and decide if we allow it to render that asset or not.
My approach was like this. If the referer is:
- blank
- our domain
- any of the other domains/subdomains we want to allow
then we show the image.
The “blank” option in there means that if someone copies the image URL and pastes it directly in the browser it will work because there is no referer for that request. It’s accessing the link directly.
Apache
To do this Apache, you will need to edit the .htaccess file and add the following lines.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?otherdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
- line 2 – you have the blank referer
- line 3 – your domain
- line 4 – other domain
- line 5 – the extensions you want to protect, those listed will only be accessed by the allowed domains.
After that, you will need to restart Apache
systemctl restart apache2
Nginx
To do this in Nginx, you will need to edit the .conf file that controls this behavior on your site.
Most common nginx.conf or website.conf
/etc/nginx/nginx.conf
/etc/nginx/sites-enabled/website.conf
And in there you can add the following lines
location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked website.com *.website.com otherdomain.com;
if ($invalid_referer) {
return 403;
}
}
After that, you will need to restart Nginx
systemctl restart nginx
Note: if you run Nginx with Cloudflare, the rule from above might not work. This was the case on our end as well. So we ended up using the Cloudflare method to disable hotlinking.
Cloudflare
If you don’t want to mess with the server settings directly or if for some reason you don’t have access to make those changes, you can still disable hotlinking with Cloudflare.
Go to your site account in Cloudflare and you will find the Scrape Shield item on the left sidebar. In there, you have the option to turn on Hotlink Protection.
Turning Hotlink Protection on will work only with images for the free version of Cloudflare.
Once you turn it on, in the Security section you will start to see blocked requests by the Hotlink protection service.
Conclusion
No matter the setup you’re running, you’ll be able to disable image hotlinking with one of the methods listed above.
Also, you can go into much more detail if you really want, by allowing certain user agents to still link those images (Google Image Bot for example).
One thing that is worth mentioning is that this method is not bulletproof. Agents can fake a different referer if they really want and still be able to embed your image.
