Hotlinking is embedding content from one website on another website. For instance, someone might see a lovely photo on your website and decide to embed it on their website, using the original image URL. In the same way other websites can include videos, fonts or even JavaScript files.

The practice is bad for both your website and the website on which the resource is embedded. If someone embeds an image that is hosted on your server then you are paying for the bandwidth every time the image is downloaded. And the website on which the photo is embedded can’t be sure that the image will continue to be available. If you remove the image then it is also no longer shown on the website that is doing the hotlinking.

You can stop websites hotlinking to your website by adding a rule to your .htaccess file. On cPanel servers you can also enable and configure hotlink protection via the control panel.

Hotlinking example

To illustrate how hotlink protection works, let’s imagine that I own example.com and that another website, penguins-unite.io, has embedded an image on its website that is hosted on my server:

<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <meta charset="utf-8" />
    <title>Penguins Unite!</title>
  </head>

  <body>
    <h1>The online meeting place for all penguins</h1>
    <img src="http://example.com/wp-content/uploads/2021/11/king-penguins.jpg" width="640" height="427" alt="Penguin Unite!" />
  </body>
</html>

As the owner of example.com I can prevent the image is downloaded from my server. In cPanel, you can do so via Security » Hotlink Protection. On the page you can simply click the Enable button to enable hotlink protection. The only other thing to check are the URLs and extensions that should be protected.

The Hotlink Protection page lets you enable (or disable) hotlinking with the click of a button. You can also define which file extensions should be protected. By default, various image file format are protected, but you can change the defaults.
Image: blocking image hotlinking in cPanel.

By default, cPanel’s hotlink protection blocks jpg, jpeg, gif, png and bmp files. You might want to tweak the list. For instance, if you host your own video files then you can add extensions such as mp4, ogv and webm to the list. Or, if you use custom fonts then you can add the font extensions as well. It all depends on the content on your website.

When you enable hotlink protection cPanel adds a rule to the .htaccess file for the domains you specified. The default rule looks like this:

# Block hotlinking requests
RewriteCond %{HTTP_REFERER} !^http://example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://example.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

The hotlinked image is now no longer showing on the penguins-unite.io website. Instead, it is blocked with an error 403 (“forbidden”).

A screenshot of the website that is doing the hotlinking. The image is no longer shown, and the requests for the page show that the image was blocked with an error 403 (forbidden).
Image: the hotlink protection in action.

Redirecting URLs

You can also redirect rather than block hotlinking requests. If you do so via cPanel, do not click the “Allow direct requests” checkbox. It will break your hotlinking rule. Just enter the URL (or the path to) the destination.

You can have lots of fun with this feature. For instance, here I redirect hotlinking requests to an image named do-not-hotlink.jpg.

The cPanel Hotlink Protection page again. In the image I have added the path to an image. Any hotlinking requests will now be redirect to that image.
Image: redirecting hotlinking requests.

The rule in the .htaccess file is similar to the previous one. The only difference is that the rewrite rule now redirects to the replacement image.

# Redirect hotlinking requests
RewriteCond %{HTTP_REFERER} !^http://example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://example.com$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.example.com$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ /wp-content/uploads/2021/11/do-not-hotlink.jpg [R,NC]

The replacement image do-not-hotlink.jpg is a photo of a My Little Pony character. So, the penguins-unite.io website now shows an image of a cute little pony rather than a penguin-related image.

The website that is doing the hotlinking now shows the replacement image. It is a photo of a My Little Pony character.
Image: redirecting a hotlinking request. Credit: furbymama on pixabay.com.

If you look at the requests for the page you see that the king-penguins.jpg file now has the status code 302, which is a redirect. The redirect goes to the image of the pony.

Hanlon’s razor

Although hotlinking is a nuisance, it is usually done out of ignorance rather than malice. Someone probably used a WYSIWYG editor and simply copied and pasted the URL of an image on your website, without realising that the image will be downloaded from your server. Blocking the requests is easy and should be sufficient. Please don’t use the redirect feature to display offensive content on the website that is hotlinking.