AWS image bed anti-leech

Original link: https://blog.shuiba.co/aws-hotlink-protection

Old bloggers should know that the pictures and videos on my blog are all placed on AWS S3 . After a year of free expiration, the fee is still very reasonable (about zero). According to the feedback from domestic bloggers, the official The cdn service CloudFront is also very powerful in the mainland of China, so I plan to “live” for a long time. However, there is a “historical problem” in the S3 + CloudFront building map bed – there is no anti-leech function. Although my nameless blog has few visitors (and no hackers), and according to the charging situation, the traffic on the picture bed is not large, but the traditional virtue of being prepared for danger in times of peace still made me decide to solve this problem when I was tossing the blog a while ago. Let’s talk about the conclusion first, it’s done ! direct access to pictures , citations from sites other than this blog , which perfectly meets my requirements.

Find out where to set up the anti-theft chain first

Before recording the specific practice, I want to make a long-winded word. In fact , when I checked the static blog generator earlier, I accidentally found the anti-leeching method of the S3 storage bucket, and I kept the webpage excitedly, thinking that it would be done if I just took a little time to update the storage bucket policy, and my mentality was very optimistic——

On the other hand, during this exploration, I accidentally learned about the anti-leeching method of the picture bed. I have time to check it out. If I succeed, I will add it to the previous blog post.

As a result, when I finally squeezed out time for further research, I found that because I use CloudFront (hereinafter referred to as CF) for distribution, the anti-leech should be set on the CF instead of the S3 bucket. It was already two years ago that I built the picture bed. Not to mention that I didn’t know how to draw cats and tigers at that time. After so many years, I basically don’t have any memories left.

To be honest, I also set it up step by step following the tutorials on the Internet. I don’t know much about the overall mechanism, so I feel a little guilty.

That being the case, I simply re-studied the mechanism of using S3 as a map bed, and the advantages of using CDN distribution, and by the way, verified the idea that anti-leech should be set on CDN.

I uploaded all the pictures to a certain storage bucket of S3, and set a policy of only CF reading, so no one except CF can directly access this bucket. Therefore, the anti-leech policy applied to S3 will not actually be triggered. To put it simply, the resources stored in S3 have only one outlet of CF, so if you want to limit the flow, you should make a fuss on CF.

When someone reads my blog, the browser will request the picture from CF. If it has been requested before, then CF will directly call the cache without reaching out to S3. You must know that the charging point of S3 lies in the size of the storage space and the number of requests, so using CF can not only speed up the image loading speed, but also save me money. Of course, CF is also charged, but like S3, there is also a certain amount of free quota for use. I didn’t check the exact amount, but according to the additional information I obtained when I checked the information, the CF must be cheaper than the S3, at least not more expensive. So I decided to actively use CDN distribution, because it can protect me and minimize the loss even if I am really hotlinked by resources.

To be honest, knowing this level, I found that the anti-leech link does not seem to be just needed, unless in addition to saving money, I am also annoyed by the pictures on my blog being quoted or stolen for no reason. After all, those who earnestly write blogs will also earnestly make pictures, which are all their own hard work, and it will still hurt to be stolen for no reason. My blog is about life, so the value of being stolen is not high, but after all, it’s okay to post private pictures on my blog, and I feel uncomfortable if they are posted elsewhere without permission. In short, I have a “cleanliness” who pays attention to the original spirit, and I don’t want the pictures on my blog to be displayed elsewhere. So I continued to investigate. Interestingly, I found that many people recommended switching to Cloudflare, and I finally remembered why I left such a sentence at the end of the article——

In short, I will use it first. Anyway, S3 and CloudFront have a one-year free period, and then switch to Cloudflare after the expiration.

CloudFront or Cloudflare?

After searching for a long time, I didn’t find a way to directly set up anti-leeching on CloudFront, but I understand that my needs are more suitable to use signed cookies instead of signed URLs. But I still haven’t figured out how to set it up, it seems that it can’t be done only on AWS. So I set my sights on Cloudflare. I like its interface design even more. In contrast, AWS is straight and masculine. Cloudflare directly has anti-leeching settings, which can be used simply by filling in, which is very suitable for technical novices like me. Then I learned that it can also host domain names, and it also has object storage service R2, which is more attractive than S3, so my DNA changed, and I wanted to “migrate the whole family”. Obviously, I decided to transfer the domain name last month. to Route 53.

Plan B is ready and eyeing it, Amazon, give me a little bit of courage! Then I found a way to restrict access with AWS WAF firewall. After a rough understanding, its functions are similar to the services provided by Cloudflare. Based on the idea of laying down the troubles without troubles, I decided to try WAF first. If the cost is unaffordable, it is not too late to move. So I set up step by step according to the introduction on the official blog, and successfully added the only whitelist domain name — blog.shuiba.co — using referer. I then tried accessing the image on the blog directly and it returned a 403 perfectly fine. I posted the picture on the newly created blogger for testing, but the picture could not be displayed. Some people say that Cloudflare only protects pictures but not other multimedia files such as videos. I have no conditions to test Cloudflare, but I have tested that WAF can protect videos.

detailed steps

When I wrote this blog post, I checked some information and found some strange methods, and each method has pros and cons, but because I am too layman, I can’t figure out the differences between them at all, and find the most suitable method for me. Methods. In any case, it is not easy to find a method that I can implement, and I will use it first.

Note: The parts omitted in the following steps are default.

Search for WAF in the service, select WAF & Shield;
Create a Web ACL, fill in the name such as HotlinkProtection , and CloudWatch will automatically write the same name;
Select Amazon CloudFront distributions for Resource type, and the Region will automatically change to Global (CloudFront) ;
Click Add AWS resources to associate the corresponding CF distribution, Next;
Click Add rules to select Add my own rules and rule groups , and select Rule Builder on the pop-up page to create custom rules;
Fill in the rule name such as Whitelist , Type defaults to Regular rule ;
Because the basic logic of this rule is – if the conditions are met, access is allowed, so if a request matches the statement , Inspect Single Header , Header field name fill in Referer , Match type Contains string , String to match fill in the white list domain name, For example, mine is blog.shuiba.co , Text transformation selects Lowercase to ensure that case does not affect the judgment result. If there are multiple domain names, then If a request matches all the statements (AND) , repeat the above steps to fill in all the domain names;
Then select Allow to indicate that the above conditions are met, and then Add rule;
Default web ACL action for requests that don’t match any rules select Block , the logic of the entire Web ACL becomes – if the added rules are not satisfied, all are rejected;
Next, default all the way, and finally create web ACL after confirming that all configurations are correct.

After setting up WAF, you can open the address of other files such as pictures or videos from the browser. If you cannot access it, it means that the setting is successful.

I finally solved another big problem, and finished writing this blog post that lasted three days. I breathed a sigh of relief~ Technical articles take a lot of time because of their strong logic, and extra time is needed if the time is too fragmented To associate the context, it took a little time. I just reviewed the previous article and connected the logic to prepare to continue writing. It’s time again. However, it seems that after this period of “forced practice”, my review speed has improved a lot. Although it is definitely not as efficient as a whole piece of time, at least I can write down. Compared with the previous writing, I can’t write in pieces It’s been a huge improvement for me.

reference article

This article is transferred from: https://blog.shuiba.co/aws-hotlink-protection
This site is only for collection, and the copyright belongs to the original author.