How to Block Image Hotlinking But Allow Google

We work so hard to build our website, and make it engaging with beautiful images, videos and other content. Now imagine someone using your content on their site, as if it was their own, without your permission or knowledge. This not only costs you money but also slows down your website. It is known as hotlinking and needs to be prevented. In this article, we will learn what is image hotlinking, why it is harmful and some of the different ways to block image hotlinking.

What is Image Hotlinking

Image Hotlinking is when someone displays an image on their website by linking to the image’s URL on your site. In this case, the image is served from your site, instead of from their server. Many websites use this method to display images and other files on their website, without actually hosting or serving them from their web servers.

Why Block Image Hotlinking

There are several reasons why it is important to block image hotlinking:

1. Costs You More money : Every time your site’s hotlinked image is loaded on another site, it costs more data bandwidth for you. What if a high traffic website hotlinks your site’s image. It can seriously increase your data as well as network bandwidth costs.

2. Violation of Law : Most sites explicitly mention that use its content without prior permission is illegal. So if another site displays your site’s content on their site, as if it is their own, then it is a clear breach of law.

3. Increased server load : When someone hotlinks an image on your site, then every time anyone views this image on their site, it is actually served from your server. It means the request to serve the image URL is sent to your server. So your server needs to serve more requests unnecessarily.

In other words, image hotlinking allows other websites to serve your content as theirs, and display images on their site using your server and data bandwidth, costing you more money and resources. It is unethical and piracy. That is why it should be blocked.

How to Block Image Hotlinking But Allow Google

There are several ways to block image hotlinking from most websites, while allowing credible ones like Google.

1. CDN

Many websites employ CDN (content delivery network) to serve their web content fast and save server resources. Most CDNs like Cloudflare already provide hotlink protection out of the box. The site administrator has to simply enable it from their Cloudflare Admin dashboard. It does not require any coding or configuration.

In fact, their hotlink protection automatically blocks known bots while allowing popular search engines. So you don’t need to keep checking if any bot is stealing your content, or if any known search engine is being blocked accidentally. This way your site will continue to be crawled but at the same time it will block suspicious visitors.

Also, the CDNs keep updating these rules over time, based on emerging threats so you will continue to remain updated. Lastly, they also allow users to override and customize these rules as per their requirement.

2. Apache

Apache is one of the most popular web servers used widely by websites, apps and blogs. It is commonly used to run WordPress websites and blogs. If you do not use CDNs, then you will need to modify your server configuration to block image hotlinking.

For this purpose, open .htaccess file located at your website’s root directory, in a text editor. Add the following lines to it.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]

In the above code, the second line allows blank referrers. In some cases, user firewall automatically erases the referrer information, and such users need to be allowed from accessing your content. The next line allows traffic from your website. The next 3 lines allow popular search engines to access your content.

You can add more RewriteCond directives to allow known sites and search engines from accessing your content.

3. NGINX

NGINX is a popular web server that allows you to run high traffic websites. It is commonly used as reverse proxy, along with Apache server. Often, you may not want your upstream web server to process requests for static files such as images and videos. Such requests are directly served by NGINX server. So you can disable hotlinking directly in NGINX. For this purpose, open NGINX config file in a text editor. Add the following lines.

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

In the above code, we add a location block for image files. We also mention a list of valid referrers such as Google, Bing, etc. and your own domain. NGINX will check the value of referrer in each request for an image URL. If it matches any of the allowed domains, the request will be served. Else it will return ‘403 Access Forbidden’ response. Please note, you can also block other file types such as PDF, MP3, MP4, etc. from being hotlinked this way.

4. WordPress

If you run a WordPress site or blog, then there are many plugins that block image hotlinking. They are very useful for people without coding experience or resources. You don’t need to write any code. These plugins will automatically modify the .htaccess file for you. But always ensure to check the reviews of these plugins and also if they are being maintained actively. So if you are beginner, you can go with this solution, but over time, it is advisable to block hotlinking using CDN or server.

5. cPanel

Many web administrators use cPanel to manage their site. It also provides a built in image hotlinking blocker. You can easily enable it as you turn on a setting. You can check its documentation for detailed steps.

Conclusion

In this article, we have learnt several ways to prevent image hotlinking on a website. Although these methods are primarily applicable for images, you can also use them to block videos and documents. Depending on your site configuration and requirements, you can use any of the above methods. It is highly recommended to block image hotlinking to avoid your content from being stolen, especially if you run a high traffic site.

Also read:
How to Remove Trailing Slash in NGINX
How to Change Port Number in Apache
How to Password Protect Directory in Apache