Tag: prevent image hotlinking

If you have a website that serves images, especially news site, there are chances that other people want to use your images. Polite people will ask for the right to display your images on their websites. Not so polite people may download the images to their computer and upload to their site. Worse, they can link directly to your images from their site. By doing so, they have images to show with you paying the bandwidth. This technique is called hotlinking.

You may wonder, is there any method to stop this?

Fortunately, the answer is yes. In this post, we are going to find out how to disable  hotlinking for both Apache and Nginx servers. Let’s get started.

First thing first, find out what server you are running

Finding what kind of server you are running is quite simple. Currently, nginx and apache are the most popular servers. This post cover settings for these two only.

Here are the steps to find out what server that your website is running on:

1. Open your website on Chrome
2. Right click anywhere on the website and select inspect and switch to the network tab.
3. Reload your site and you’ll see something like this:

Let’s click on the line with your domain name. In my case, it’s www.binarycarpenter.com. There will be a new window opens on the right. Pay attention to the line start with the text “server”:

As you can see, my site is running on an nginx server. You’d have no problem saying what kind of server you are running if the text is different.

How to prevent other sites from linking directly to your images on Apache

To disable hotlinking on Apache, you need to have access to your server, not WordPress admin since you are going to enter some code in a file called .htaccess. If you have no idea what the file .htaccess is, you may want to read a bit about it here.

Basically, it’s a file on your server that let you write directives for your web server to do various things such as URL rewrite, manage file access …

To understand how .htaccess work may take a long time. However, to disable image hotlinking takes only a few minutes.

Now, let’s copy the following code and paste to the end of your .htaccess file that located at the same level with files such as wp-config.php, wp-content… If you don’t have that file, simply create it.

<IfModule mod_rewrite.c>
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?your_site\.com [NC]
    RewriteRule \.(gif|jpe?g?|png)$ - [NC,F,L]
</IfModule>

Make sure you replace your_site with your domain name (without extension) and com with your domain’s extension.

For example, your site is greatsite.org, the code would be:

<IfModule mod_rewrite.c>
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?greatsite\.org [NC]
    RewriteRule \.(gif|jpe?g?|png)$ - [NC,F,L]
</IfModule>

After that, save the file and you restart your server. Now, try to link to your images from other site (you can try on your localhost) and you’ll see a 403 error.

 

How to prevent other sites from linking directly to your images on Nginx

Now it’s time to apply some configurations to your nginx server to disable hotlinking. To successfully achieve this, you need to identify your server block. In one nginx config file, there maybe many server blocks.

Here, within my server block (for this site), I put the following code:

location ~* \.(jpg|jpeg|png|gif|swf|webp)$ {
     valid_referers none blocked binarycarpenter.com *.binarycarpenter.com;
     if ($invalid_referer) {
         return   403;
     }

 }

Make sure you replace my domain name with your own domain name.

Now, save the file and restart nginx.

On my site, I still see my images loading properly. However, if I try to link from other places (not from my domain), I’ll get a 403 error on the image:

Conclusion

As you can see, within a few minutes, you can prevent other from stealing your bandwidth. You may find this is difficult if you don’t know what .htaccess/apache/nginx are. If you need assistance, please leave a comment below.