Prevent Hotlinking of your Amazon S3 Images
Let’s say you are using Amazon S3 to host images and other media files. Anyone can view these images on your website and you’ve also allowed other sites to use these images as long as they credit the source, that is, your site.
Now consider a different scenario. Someone like a picture on your wesite and posts a direct link of that picture to social sites like Facebook or Twitter. The image goes viral and within minutes, it gets seen by thousands of other people .
Hotlinking Images Means a Higher Bill
When people link directly to an image instead of the web page that is containing that image, others will see the image but without ever coming to your website and you’ll still have to pay Amazon for all the bandwidth that is consumed in serving that image.
If you are hosting files on a web server (say Apache), you can setup server side rules to prevent hotlinking but such a thing in not possible in Amazon S3. They do provide some kind of referral logs so can you figure out which other sites are hotlinking images but there’s no mechanism in Amazon S3 (and CloudFront) to deny requests based on the referral information.
How to Prevent Hot-Linking in Amazon S3
There’s a workaround that you may use to block hotlinking of selective images and files that you think are putting a major strain in your Amazon S3 budget.
When you upload a file to your Amazon S3 account, the service assigns a certain Content-Type to every file based on its extension. For instance, a .jpg file will have the Content-Type set as image/jpg while a .html file will have the Content-Type as text/html. A hidden feature in Amazon S3 is that you can manually assign any Content-Type to any file, irrespective of the file’s extension, and this is what you can use to prevent hotlinking.
Let’s say you have a page on your website called helloWorld.html that contains an image helloWorld.jpg hosted directly on Amazon S3.
If people are directly linking to the helloWorld.jpg image and you need a mechanism to redirect all that traffic to reach your original helloWorld.html web page, here’s what you should do:
Step 1. Create a new HTML text file on your desktop like the one below. You may change the URL in the code depending on where you want the visitor to go after he or she clicks on that hot linked image URL.
<html>
<head>
<title>Image has moved</title>
<script type="text/javascript">
window.location.href='http://labnol.org/helloWorld.html'
</script>
<link rel="canonical" href=http://labnol.org/helloWorld.html />
</head>
<body>
<a href=http://labnol.org/helloWorld.html>Hello World</a>
</body>
</html>Step 2. Save this HTML file as, say abc.html, and upload it to the same S3 bucket that already contains the helloWorld.jpg file.
Now on the S3 side, first rename the old image file (to say helloWorld.jpg.bak) and then rename the recently uploaded HTML file (abc.html) so that it has the same name and extension as your original image (helloWorld.jpg).
That’s it! If people directly link to your S3 file, they’ll automatically land on your website. Here’s a quick video illustration as well.
The logic is easy. When you uploaded the HTML file to Amazon S3, the content type was automatically set as HTML. When your renamed that HTML file on S3 to JPG, the content type remained unchanged and hence the file was served as a web page even though it had an image extension.
Since we are using the rel=canonical tag here, these ‘hotlinked’ image URLs will also bring to some Google juice to your website. You may use any of these free web based clients or the desktop clients to manage your Amazon S3 files without any coding.
Related: Amazon S3 Hosting Tips
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
