,

How to Prevent Image Hotlinking in WordPress

How to Prevent Hotlinking in WordPress

Hotlinking is a very common but unethical practice on the Internet. It’s when another website uses your website’s images on their site, making your server load the image and taking up your bandwidth. And if you have any amount traffic on your website, you are most likely a victim of it yourself.

The technical term for hotlinking is inline linking but can also be known as leeching, direct linking, and offsite image grabbing.

Fortunately, there is a quick and easy way to prevent this from happening to your WordPress site. And as an added bonus, there’s a way to make your website profit off of these thieves. Let’s get right to it:

What is Hotlinking

First, let’s get a bit technical and draw out the definition of the term and what actually qualifies as hotlinking.

You probably have at least one image on your website. That image is stored on your website and server for you to use. But if one day, one of your visitors sees an image that they like on your website and decides to use it, they can infringe on copyright laws to download the image from your website and host it on their website for them to use. Though this is illegal, it is another issue and is not actually considered to be hotlinking.

Now, let’s say that while the visitor decides to use your image, but instead of downloading the image for them to keep, they just display the image inline and link to your image file. That is hotlinking and if you ask me, it’s worse than someone outright stealing your images.

There are two things that must happen for an act to be considered hotlinking:

  1. The image must be displayed inline on the offending website.
  2. The image is being served from an image file on your website or server.

Consequences of Hotlinking

When someone serves an image on their website from your server, they are not just stealing your work, they are costing you bandwidth, which translates into money.

If you are charged for usage, which is common for those on VPS hosting plans, you will see a direct increase in hosting costs as a result of hotlinking. If you are on any other hosting plan that caps your usage, you will also see artificially inflated numbers that might drive you to spend more money on increased resources.

You can see how hotlinking really affects your business’ hosting costs. But fortunately, there is a very simple way to prevent this in WordPress.

How to Prevent Hotlinking in WordPress

In order to prevent your image from being displayed on other websites, all you have to do is add a snippet of code in your .htaccess file or your Nginx configuration file.

Apache Servers

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourotherwebsite.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://imagehost.com/ad.jpg [NC,R,L]

Let’s go over each line, one by one.

Line 1: Enables the redirection.
Line 2: Allows blank referrers to view your images.
Line 3: Allows your website to view your images. Replace “yourwebsite.com” with your actual URL without the “www”.
Line 4: Allows any other websites to view your images. If you do not have any such websites, take this line out.
Line 5: Replaces hotlinked images with an alternate image. Make sure this image is not hosted in your root directory. You can use a third-party service like Dropbox, Imgur, or Flickr to distribute the image. Replace “http://imagehost.com/ad.jpg” with the location of the image.

Line 5 is where you can exploit the thievery if you are already a victim of hotlinking. At Zen WP, we have all hotlinked images display an ad that we created just for this purpose:

How to Prevent Hotlinking in WordPress

However, if you don’t want a different image to display and simply want to block your images from displaying on other sites, this is the snippet to use:

 RewriteEngine on
 RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
 RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L] 

Nginx

Copy the code snippet below and paste it on your NGINX config file.

location ~ .(gif|png|jpeg|jpg|svg)$ {
      valid_referers none blocked ~.google. ~.bing. ~.yahoo. yourdomain.com *.yourwebsite.com;
      if ($invalid_referer) {
         return   403;
     }
 }

Sign Up for New Content