Hotlinking is bad – It could be quite annoying and concerning when someone copies full link to a media source such as an image or video on your website and uses that link to embed an image or video on someone’s website.
It also means that you are paying for hosting space but someone is using it for free. It is not just money, but lose of bandwidth, server performance, page load time, site traffic, reputation and many more.
In this tutorial I will show you how to prevent hotlinking of images or videos by unwanted websites.
What is Hotlinking and Bandwidth Theft?
According Altlab “Bandwidth theft or “hotlinking” is direct linking to a web site’s files (images, video, etc.). An example would be using an <img> tag to display a JPEG image you found on someone else’s web page so it will appear on your own site, eBay auction listing, weblog, forum message post, etc.
Bandwidth refers to the amount of data transferred from a web site to a user’s computer. When you view a web page, you are using that site’s bandwidth to display the files. Since web hosts charge based on the amount of data transferred, bandwidth is an issue. If a site is over its monthly bandwidth, it’s billed for the extra data or taken offline.”
How to prevent Hot-linking in Apache?
This method applies if your WordPress website is running on Apache webserver.
- FTP to root of your website and edit .htaccess file to add the following code.
/* 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\.)?linkedin.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?instagram.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?pinterest.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?gmail.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]How to prevent Hot-linking in Nginx?
This method applies if your WordPress website is running on nginx webserver.
Edit nginx.conf file to add the following code
location ~ .(gif|png|jpg|jpe?g|css|ico)$ {
valid_referers none blocked yourwebsite.com *.yourwebsite.com google.com *.google.com facebook.com *.facebook.com gmail.com *.gmail.com twitter.com *.twitter.com pinterest.com *.pinterest.com instagram.com *.instagram.com;
if ($invalid_referer) {
return 403;
}
}Here, valid_referers line is used to whitelist the sites that are allowed to hotlink your images. In other words, this line contains the list of sites allowed to hotlink images from your server. Note that this line must include your own website and other websites which you want to allow to hotlink your images.
PS. This technique is not limited to WordPress sites only but can be used on any website running on Apache or Nginx server.
