How To Prevent Image Hotlinking in WordPress

This blog post explains what is Hotlinking in WordPress.

What is hotlinking?

Hotlinking is also known as inline linking or remote linking.

In simpler terms, it means displaying images, videos, gifs, and other media files on a website by linking to the images originating server. 

While it may seem harmless at first, hotlinking can have several adverse effects on your website’s performance and costs.

When another website hotlinks to your images, it steals your bandwidth, making your website slower for visitors and increasing your hosting costs (if paying per gigabyte). Moreover, hotlinking can lead to copyright issues and negatively impact your search engine optimization (SEO) ranking.

If you feel your website images are being hotlink, then it is a good idea to disable the ability to hotlink to your website entirely.

In this tutorial, we will show you two ways to disable hotlinking. 

How hotlinking in WordPress happens?

Hotlinking occurs when a website uses an image or media file that is hosted on another website’s server.

For example, let’s say you run a WordPress blog with photos of your recent holiday adventures. Someone else likes the photos that you have taken and decides to use them on their own website. They will use it by directly using the source URL of the image from your website, without downloading and re-uploading on their own website. This creates a link that is referred to as “Hotlinking”. 

Now whenever the other website receives traffic on the post with an image hotlinked from your website, it will start costing you server bandwidth because images will be served through your hosting. 

The problem with hotlinking is that it can cause the original website’s server to slow down (especially on shared hosting environments) if there are a significant number of requests coming in for the same image. Additionally, hotlinking can be a violation of copyright in some cases and can lead to legal issues.

Why hotlinking prevention is important?

To summarize the reasons you should consider preventing hotlinking on your WordPress website are as follows:

• Prevent overuse and misuse of your server bandwidth.

Trust us, you don’t want to wake up one day with a notice from your hosting provider that says that you are being charged hundreds of dollars more as bandwidth overages. 

• Reduction in website performance. 

Even if you stay within your bandwidth allocation, it is best to disable hotlinking because repeated requests from third-party websites could slow your website down.

• Copyright concerns.

You might buy your images from marketplaces and use them on your website and someone else might hotlink and use them on their website, and it can cause a copyright infringement if the license doesn’t allow the image to be used on multiple websites.

• Negative impact on SEO

If somebody else uses your images and Google values their website more than yours, the visibility of your website in Google Images will be reduced. It can also cause duplication issues, and both sites will be negatively affected. 

Methods to prevent hotlinking in WordPress

There are several methods to prevent hotlinking in WordPress websites. Let’s look into two options.

Method 1: Adding rules into Apache (.htaccess) or Nginx config files 

.htaccess rules for blocking hotlinking

You can manually disable hotlinking if you are hosting your WordPress website that uses an Apache server. 

You will need to add the following lines of code in your .htaccess file, which is usually found in the public_html folder.

Before you make the edit, it is better to keep a backup of your .htaccess file. 

/* Prevent image hotlinking in WordPress */
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?other-websites-if-any.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

Here’s what the rule does:

• The first line checks if the HTTP Referer header is not empty.
• The next few lines check if the HTTP Referer header does not match the allowed domains. In this case, the domains that are allowed to hotlink your images are yourwebsite.com, google.com, facebook.com, twitter.com, and other-websites-if-any.com. The [NC] flag makes the condition case-insensitive.
• The last line specifies the types of files that should be blocked from hotlinking. In this case, it’s .jpg, .jpeg, .png, and .gif files. The -[F] flag returns a 403 Forbidden response to the client if the conditions are met.

So, any requests for hotlinked images from domains other than the ones specified will be blocked with a 403 Forbidden error. 

Nginx config file rules for blocking hotlinking

If you are hosting on a Nginx-based server then you will need to add the following rules in the config file to block hotlinking. 

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

Here’s how the above code works:

• The location block matches any requests for files with extensions .gif, .png, or .jpeg/jpg.
• The valid_referers directive specifies the domains allowed to refer to the files. In this case, none and block are used to prevent any referrers from the same domain or blocked referrers. mydomain.com and *.mydomain.com allow requests from the domain and its subdomains; you can replace mydomain with your own website URL.
• The if statement checks if the referer is invalid. If the request comes from an invalid referer, the server responds with a 403 Forbidden status code.

This rule prevents other websites from displaying your images directly by hotlinking them. It is a good way to protect your image resources and prevent other websites from using your website’s bandwidth, which can affect your website’s speed and performance.

Method 2: Using Cloudflare to block site scraping

Cloudflare is a popular choice amongst WordPress website creators to use as CDN and improve WordPress site security. 

One little-known feature of Cloudflare is to use it to disallow hotlinking on your website. Once you have configured Cloudflare on your WordPress website, you can disable hotlinking under the option called “Scrape Shield” 

By default, enabling this rule will block all hotlinks from all search engines and websites other than your own. You can customize the rules by following the guidelines in Cloudflare documentation.

Prevent hotlinking in your WordPress website

Preventing hotlinking is especially useful for websites that have a lot of media content, like images and videos. People can easily link to the media hosted on your server, causing your server’s performance to degrade and costing you a lot of bandwidth. 

The methods highlighted in this tutorial are the easiest and sure ways to prevent hotlinking on your WordPress websites. Be sure to allow search engines and social media sites to use your images; if you disallow them, it may cause your rankings to suffer and images do not appear on your social channels.