Hotlinking is a big problem for most developers and website owners. On this article we will explore what is hotlink, and how to effectively configure an image hotlink protection for Nginx.
Are you looking for a simple Nginx configuration to stop image hotlinking? Tired of this problem? Keep reading to learn how to stop hotlinking, we are going to show you the best way to stop image thiefs from using your websites graphics and photos.
What is Hotlinking?
Hotlinking is the practice of using your images in other web pages that you do not own. What does this mean for you?
It means someone else is using your images in their websites without your permission, this causes to consume your bandwidth from your servers (hosting).
On high traffic websites this can lead to a big bw usage, that you will be paying for, and if you are using a CDN service like Amazon Cloudfront or StackPath (MaxCDN), services that will bill you per GB used, then it will be even more expensive for you.
On the web performance side, as a website owner, it will add more unnecessary requests to your nginx webserver, as you will not only serve your own http / https image requests, but also the ones that are hot linked, that’s why you must prevent hotlink as soon as possible.
If this is image hot linking is happening to you, then on this post we will share a good image hotlink protection tip for Nginx that will prevent any hotlinking requests to your webserver.
Nginx anti hotlink configuration
How can I setup an anti-hotlinking configuration for Nginx?
Setting up a hotlink image protection in Nginx is pretty easy, it takes only 5 minutes of your time
On this example I will show you how I configured Nginx to prevent image hotlink in this website you are reading.
Anti-hotlinking Nginx configuration
In order to protect your images, you can insert this location block inside your Nginx virtual host configuration file:
location ~ .(gif|png|jpg|jpe?g)$ {
valid_referers none blocked yourwebsite.com *.yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}Make sure you replace “yourwebsite.com” with your real website URL address.
As you see, it is just a simple location block, who specifies which type of files you will be protecting, in this case we only used GIF, PNG, JPG JPE, JPEG file extensions, but you can even add CSS and ICO files if needed, as you see below:
location ~ .(gif|png|jpg|jpe?g|css|ico)$ {
valid_referers none blocked yourwebsite.com *.yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}valid_referers line is used to whitelist the sites that are allowed to hotlink your images contains the list of sites allowed to hotlink images from your server, this must include your own website, but also other websites owned by you, or that have your permission to use your server bw transfer.
Just in case, I would also add Google and Bing search engines to the list of allowed referers, to prevent any indexing – crawling image issues.
Remember to restart Nginx to apply this configuration
For CentOS, Debian & Ubuntu server based using init.d system
service nginx restart
For those who use systemd:
systemctl restart nginx
Nginx Hotlink Protection for a specific directory
If you want to protect a specific directory, and not all images, you must change your location block, as you see below:
location /images/ {
valid_referers none blocked yourwebsite.com *.yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}Conclusion
That’s all about protecting hotlinking of images on Nginx. At this time you should kno whow to how to prevent hotlink & protect your website from image hotlink on Nginx for the common and most used photo and image extensions, you will also be able to protect CSS and ICO icon file types.
This tutorial is useful for all kind of Nginx webserver web installations under Unix and Linux operating system (FreeBSD, Ubuntu server, CentOS, etc). It’s useful and something I overlooked in the past recent posts, but this was the time to publish the right tutorial for anti image hotlinking on nginx.
After this you should check the websites of the ones who were stealing your bandwidth, all files should now be responding with an http 403 status code, as specified on your Nginx hotlink protection configuration, you can also use tools like this to check if everything is protected ok.