Consider a scenario, you have finally managed to create and host your first web app under a Linux system and you wanted your web app to lure continuous user traffic, you beautified it with some custom images of which you have full copyright.
However, while comparing different web apps with a similar spectrum to yours, you discover your custom images are being used without your consent. These secondary sites are using your images’ direct link to display them on their platforms. Each time your web app loads, your custom images also load on their web app platforms.
This issue is called image hotlinking and it’s quite difficult to link it to copyright violation since these platforms are only mirroring your images. If you are lucky enough to be using Nginx as your primary web server, we can find a workaround for this issue.
This article guide will walk us through configuring the Nginx web server to prevent image hotlinking in Linux.
Problem Statement
We will need access to the following resources for this article to be more practical and relatable:
- A remote machine with a known IP address (192.168.100.29).
- A host machine with a known IP address (192.168.100.3).
- Nginx is installed on the remote machine.
- Some image files are stored on the remote machine web directory.
Block Image Hotlinking in Nginx Web Server
We first need to access the default website Nginx configuration file:
$ sudo nano /etc/nginx/sites-available/default
Alternatively, if you have configured a virtual host and want to prevent image hotlinking to a specific web app e.g your_site.com, the path to the web app Nginx configuration file will be something like:
$ sudo nano /etc/nginx/sites-enabled/your_site.conf
We will add the following lines of code inside the server {} block:
location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked ubuntumint.com *.ubuntumint.com;
if ($invalid_referer) {
return 403;
}
}
The line entry valid_referers points to web apps to prevent image hotlinking from all domains except our domain (e.g ubuntumint.com)
If you want to block image hotlinking for files in a specific directory, then add the following lines in your NGINX configuration file.
location /uploads/ {
valid_referers none blocked ubuntumint.com *.ubuntumint.com;
if ($invalid_referer) {
return 403;
}
}
Save the file changes and restart Nginx:
$ sudo systemctl restart nginx
Testing Image Hotlinking in Nginx
Supposing our remote machine has the following image “leafy.png” on the web directory and you try to hotlink from our host computing using the Curl command in the following manner:
$ curl -H "Referer: http://192.168.100.3/" -I https://www.ubuntumint.com/secrets/leafy.png
The 403 Forbidden error in the attempt confirms that we have successfully stopped image hotlinking. Stopping image hotlinking preserves the integrity and identity of your web apps from being overexposed.
