How to Prevent Image Hotlinking in NGINX

Last updated on September 9th, 2024 at 05:04 am

Image hotlinking is when another website links to images on your website images without hosting those images on their own server. It slows down your website and increases your data bandwidth. It is also content piracy since it allows others to serve your content as theirs. So it is important to disable image hotlinking on your website. Here’s how to prevent image hotlinking in NGINX.

What is Image Hotlinking

Typically, websites link to images hosted on their own servers. This is costly since site owners have to pay for the storage as well network bandwidth used to download images from your site. So some websites link to images hosted on other websites such as yours, on their web pages. They don’t even bother to download the image and host it on their own servers.

Now when someone loads such a web page, then all images on that are loaded from your server, instead of theirs. So you have to pay for the network bandwidth used to download those images, not to mention its storage costs also. These days image hotlinking is done even by bots that simply crawl your site, note down the image URLs and deliver it to another site owner. If the other website turns out to be a high traffic one such as social media site or forum then it will be a huge problem for you.

Why Prevent Image Hotlinking

Image hotlinking results in unnecessary requests to images on your site. Every time a visitor loads a web page hotlinking to your site’s images, your server has to process the request. This increases your server load, reduces website performance and increases your data bandwidth costs. That is why it is essential to block hotlinking of images on your website.

In fact, not just images, the same method can be used to link to other files such as PDFs, spreadsheets, etc. on your website. So you have to very alert about it. Doing this is just one of the many steps to harden NGINX server.

How to Prevent Image Hotlinking in NGINX

Here are the steps to prevent image hotlinking in NGINX.

1. Open NGINX Configuration File

Open terminal and run the following command to open NGINX server configuration file.

$ sudo vi /etc/nginx/nginx.conf

If you have configured separate virtual hosts for your website (e.g www.website.com), such as /etc/nginx/sites-enabled/website.conf then open its configuration with the following command

$ sudo vi /etc/nginx/sites-enabled/website.conf

Bonus Read : How to Harden NGINX Server

2. Disable Image Hotlinking in NGINX

Add the following location block inside server block to prevent image hotlinking in NGINX from all domains except your domain (e.g website.com)

location ~ .(gif|png|jpe?g)$ {
   valid_referers none blocked website.com *.website.com;
   if ($invalid_referer) {
      return 403;
   }
}

Let us look at the above code line by line. The first line will match various image file extensions. If you want to add any other extension, you can add a new pipe “|” along with the new extension.

In the next line, valid_referers lists all the domains that are allowed to link to your website images. Mention your website (e.g. website.com) in it. You can also add any other domains such as trusted search engines Google, Bing, etc. that you want to give access to. You can also include IP addresses here.

If the request is from a domain/IP that is not mentioned in valid_referers NGINX will include it in invalid_referer and return “403: Access Forbidden” response.

Bonus Read : How to Setup NGINX Virtual Hosts on CentOS

If you want to prevent hotlinking for files in a specific directory such as /uploads/ then add the following lines in your NGINX configuration file.

location /uploads/ {
   valid_referers none blocked mywebsite.com *.mywebsite.com;
   if ($invalid_referer) {
      return 403;
   }
}

Bonus Read : How to Enable CORS in NGINX

3. Restart NGINX Server

Finally, run the following command to check syntax of your updated config file.

$ sudo nginx -t

If there are no errors, run the following command to restart NGINX server.

$ sudo service nginx reload #debian/ubuntu
$ systemctl restart nginx #redhat/centos

4. Verify Changes

You can verify the changes by running the following cURL command that simulates image hotlinking request from a referrer example.com that is not allowed in our NGINX configuration, to our site’s image  www.website.com/image.jpg.

curl -H "Referer: https://example.com" -I https://www.website.com/image.jpg

You will get the following response.

HTTP/1.1 403 Forbidden
Server: nginx/1.19.0 (Ubuntu)
...

But please note, you can always directly access the same image. Here is the command to test it.

$ curl -I https://www.website.com/image.jpg

Conclusion

In this article, we have learnt how to stop image hotlinking to your site. As mentioned earlier, it is important to do this to prevent other websites from linking to your site’s images. We have learnt how to disable hotlinking from one site. You can also block hotlinking using other HTTP attributes such as IP address, user agent, domain, etc. On the other hand, you can also allow trusted search engines such as Google to hotlink to your images. Hopefully the above tutorial will help you prevent image hotlinking in NGINX.

Ubiq makes it easy to visualize data in minutes, and monitor in real-time dashboards. Try it today!

Sreeram Sreenivasan

Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI & software development.