How to Prevent Image Hotlinking in WordPress?

“Should I keep or delete image links in WordPress?” This is a question that can be debated for a long time.

Even if after choosing managed WordPress hosting, you may have kept the default settings. But imagine, when you upload and insert an image into an article or page, a link is automatically added to the image itself.

And if your visitors click on that image in an article, they will be moved to another website or a page that only display the image in the original size. While in general, images are scaled to fit seamlessly to your articles. This phenomenon is called hotlinking or inline linking.

What is  Image Hotlinking?

Hotlinking, also known as “bandwidth theft”, is an improper practice carried out by individuals who create direct links to content (images, videos) hosted on other servers in order to use their computational and bandwidth resources.

A classic example consists of direct links to multimedia contents on a server A that are inserted in web pages served by server B; the visitor’s browser that accesses the web page on server B will make HTTP requests to server A to retrieve multimedia resources, causing wasted CPU and bandwidth, and ultimately money.

How Does Hotlinking Work?

You have to go back to the HTML code to understand first how the images are displayed on the web pages.

Without going into details, HTML is a simple language structured by markup: tags (in this case HTML tags) delimit each element of the page in a hierarchical way, framing the values and bringing attributes to their content (the width or the height of the image, or the alternative text allowing its description, for example).

The classic display of an image is realized with img tag for image and alt tag for description in the code of a page located on a website. For example, please consider the following scenarios.

HTML code of the server A website:

<img src=”/image.jpg” alt=”description” />

A website performing a hotlink thus simply proceeds, using in the attribute src (which means source) of the image tags, the direct address of your images.

This is what we usually do, for example, when we display our images from our own websites.

HTML code of the server B website:

<img src=”http://www.yourdomain.com/image.jpg” alt=”description” />

In the end, you end up with one of your images posted on a website that is not yours, without authorization from you, and the icing on the cake: the perpetrator of this mischief is stinging your bandwidth!

How to Detect Hotlinking?

This is not obvious!

You can still use tools such as TinEye. It is a website cum browser extension, which will be able to look for images similar to the one you indicate. It works very well, in the limit of the websites that TinEye indexes, and requires to check all your images by hand!

The other solution is to automate the detection of images loaded from a website other than yours. It’s technically more complex but it works very well.

In principle, the .htaccess file of the Apache server is responsible for intercepting the images before they are displayed.

How to Prevent Hotlinking in WordPress Using .htaccess

Let’s see how you can prevent hotlinking in your WordPress by inserting a few lines in the .htaccess file in the document root folder.

Log in to your hosting platform, use your login credentials in any FTP software (I’m using Filezilla), go to /public_html/ → and access your .htaccess file.

Imagine the impact that this kind of behavior can have if several of your images are displayed on forums with very high traffic?

First, you need to View/Edit (or create) the .htaccess file within the root directory of your website.

Once the file has been opened, paste the following lines at the end and save the file:

RewriteEngine on
RewriteCond "%{HTTP_REFERER}" "!^$"
RewriteCond "%{HTTP_REFERER}" "!www.yourdomain.com" [NC]
RewriteRule "\.(jpg|jpeg|png|gif|svg)$"    "-" [F,NC]

Note: Don’t forget to replace yourdomain.com with the name and extension of your website.

• The first line serves to activate mod_rewrite.
• The second line allows blank referrers. You should enable this as some visitors may use a personal firewall or antivirus program that deletes the page referrer information sent by the web browser.
• The third line, on the other hand, is the one that prevents the download and the hotlinking of the contents, when the HTTP_REFERER is not explicitly set to yourdomain.com, which is supposed to be the one to be protected. In this case, it is necessary to replace yourdomain.com  with the domain name you wish to protect.
• The fourth line specifies prohibited extensions, those that are inhibited by hotlinking.

In this case, you can specify any number of extensions separated by the “|” character. Also, in this case, the comparison is case insensitive and in case of a positive match, the request is rewritten on a null file, originating a 403 error.

From the browser, following the example of servers A and B did at the beginning, the web page loaded by server B would appear to have no contents loaded by A. The use of server A bandwidth and CPU in this way becomes negligible and limited only to processing the request by the rewrite engine.

Use Plugin to Avoid Hotlinking

As you probably know a plugin can extend the functionality of your website and thus prevent hotlinking on your website. Here are 2 of the most popular plugins in this area:

1. iThemes Security

iThemes Security fixes common vulnerabilities, stops automated attacks, and secures credentials. The plugin has a malware scanning system, as well as the ability to track users making content changes, as well as connections and disconnections. Many other features help you secure your website.

Wrapping up!

To see if you have blocked the hotlink via .htaccess or plugin, test your website on altlab.com, where you will have to enter the image address. If it is not displayed or the image you choose is displayed, the anti-hotlink will be active.

Do you know of other ways to remove links from WordPress images? If so, please share your way of doing it in the comments below.

*This is a guest post by Saud Razzak from Cloudways.