Tutorial: Adding Hotlink Protection to Wordpress

What is Hotlinking?

Hotlinking (also known as inline linking, piggybacking, leeching and bandwidth theft) refers to when one site links directly to an object on a second site. Typically, the object is a picture that can then be displayed on the linking site without the owner having to copy the actual file from the second site.

How Hotlinking can Affect your Wordpress Blog

Hotlinking not only allows another site to use your content without permission but also uses your bandwidth to do it. Every time a user surfs to the page of the offending site, the actual image shown is downloaded from your server to the user’s browser, even though the user is not on one of your web pages. This can degrade performance on your site or even cause your site to run over the bandwidth limit allotted by your web host - typically resulting in additional charges or even a suspension of service.

How not to Solve the Problem

A large proportion of web hosts provide the CPanel front-end for clients to set up and maintain their websites. Recent versions of CPanel contain a security script called “Hotlink Protection”, designed to allow easy protection for all client sites against hotlinking. Unfortunately, this script can cause Wordpress to malfunction. For more information on why this happens and how to fix it, see the post “Fixing the CPanel HotLink Error in Wordpress”.

Adding Hotlink Protection

The following tools and access are required:

1. A text editor. Notepad will do, though Notepad++ is a fantastic editor.
2. Full read/write access to the Wordpress blog’s installation directory
3. An FTP client (if the site is not being hosted on the local machine). Of course a login/password to the server would also be required. SmartFTP is a good (and free) client.

Open the text editor and enter the following code.

RewriteEngine On
 RewriteCond %{HTTP_REFERER} !^http://(.+\.)?blink7\.com/ [NC]
 RewriteCond %{HTTP_REFERER} !^http://(.+\.)?google\.com/ [NC]
 RewriteCond %{HTTP_REFERER} !^$
 RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

In the second line of code Replace blink7\.com with the root URL of the Wordpress blog
For example … http://www.mysite.com = mysite\.com
And http://blog.mysite.org = mysite\.org
Save the file as htaccess.txt

Open the FTP client and login to site where the blog is installed. Navigate to the following subdirectory:
/wp-content/uploads
Drill down further to a directory containing picture uploads (JPEF, GIF, …)

Upload htacess.txt to the FTP directory
Rename the file to .htaccess

Eventually, this file will have to be uploaded and renamed in every subdirectory that contains uploaded files. For now, proceed to the next section to verify that the htaccess file performs correctly.

Testing Hotlink Protection

Testing the htaccess file involves two parts

• Verifying that the Wordpress blog still links properly to the files protected by the htaccess file
• Ensuring that external sites cannot hotlink to the files protected by the htaccess file

Open a browser window and navigate to the section of a blog whose uploaded pictures are in the directory with the htaccess file. Right-click on the picture and select Copy Image Location… from the pop-up menu. This will be the test picture.

Firefox:

Internet Explorer:

Hit the refresh/reload button on the web browser.
Ensure the pictures still display correctly.

Clear the browser cache (Firefox 2.x)

• Select the menu item Tools –> Clear Private Data…
• Ensure the option “Browsing History” is selected. Click on the Clear Private Data Now button

Clear the browser cache (Internet Explorer 7.x):

• Select the menu item Tools –> Internet Options
• Click on the Delete button, located underneath the “Browsing History” heading.
• Click on the Delete Files button, located beside the “Temporary Internet Files” title. Click on the Close button. Click on the OK button to return to the main browser

Surf to the following URL:

http://www.htaccesstools.com/test-hotlink-protection/

Paste the previously-copied URL for the test picture into the text box.
Click on the Test Hotlink Protection button.

If the htaccess has been configured properly, a red x or the text “Hotlinked Image” will show on the screen. The actual image should NOT show on this page if the access rules have been set up correctly.

Once verification has been completed, copy the .htaccess file to other file upload subdirectories. Typically, Wordpress creates one subdirectory for each year/month of uploads.

Further Modifications

The example code allow is designed to allow hotlinking from the blog itself and the Google search engine. The Google.com line can be removed, though Google’s image search can be a rich source of search engine traffic. Similarly, the Google line can be changed to allow hotlinking from a different URL. More servers can be added by duplicating the RewriteCond for the blog’s URL and changing the parameters accordingly.