Introduction#
In the article "Building Your Free Image Hosting System from Scratch (Cloudflare R2 + WebP Cloud + PicGo)," I built a free image hosting system using Cloudflare R2 and optimized the images using WebP Cloud.
During the use of WebP Cloud, I discovered that it also provides features such as custom Proxy User Agent and watermarking. This gave me an idea: can I protect my image hosting source links using WebP Cloud, making the WebP proxy link the only entry point to access all my images, and add my own copyright watermark uniformly?
This article is a record of this practice, which can be considered as an extra episode of image hosting setup.
Requirements Analysis#
Currently, my image hosting solution is to host the images on Cloudflare R2 and optimize them using the powerful image proxy tool, WebP Cloud. However, both the proxy link image.pseudoyu.com and the source link images.pseudoyu.com can be used to access my images. The former is optimized, while the latter is the original image I saved.
Privacy Protection#
In fact, photos taken with devices such as smartphones and digital cameras carry EXIF (Exchangeable Image File Format) information, which usually includes sensitive information such as the shooting device, time, and location. We can manually remove this metadata through some technical means, but it is cumbersome and prone to omissions.
I looked up the documentation of WebP Cloud and found that it indeed provides the function of automatically erasing EXIF information without the need for additional configuration. However, visitors can still access the original image through the source link exposed by Cloudflare R2. To avoid this, I need to restrict users to only request through the WebP Cloud proxy link, so that no useful information can be obtained when accessing the Cloudflare R2 source link.
Copyright Protection#
I previously saw Randy's own desk setup photo being used without permission.
I also engage in some photography, although it doesn't have much commercial value, it is still my own work and should be protected by copyright. Therefore, I want to add my own copyright watermark to the images to prevent them from being used by others.
Implementation Plan#
With clear requirements, the main parts can be divided into two:
- Allow users to only access my images through the WebP Cloud proxy link and prohibit direct access to the original image link.
- Automatically add my copyright watermark to all images at the WebP Cloud proxy level, without manual operation.
Below are my implementation plan and detailed steps.
WebP Custom User Agent + Cloudflare WAF#
I talked to Nova Kwok, the developer of WebP Cloud, and found that WebP Cloud provides the functionality of custom "Proxy User Agent" and recommends configuring corresponding rules in Cloudflare WAF to protect image security. The documentation provides detailed instructions -- "Security | WebP Cloud Services Docs."
WebP Cloud Configuration#
When we access web pages or image links on the Internet, the request usually includes a User Agent field, which generally contains information such as the browser version. Websites can perform specific logic based on different User Agents.
By default, WebP Cloud uses WebP Cloud Services/1.0 as the value. This means that regardless of the terminal device and browser used by the user to access the image, the request to Cloudflare R2 will be unified to the User Agent value defined by WebP. And this value can be customized by the user.
Therefore, we log in to the WebP Cloud console and set the "Proxy User Agent" field to a value of our own choice, such as pseudoyu.com/1.0.
Cloudflare WAF Configuration#
WAF (Web Application Firewall) is a firewall service provided by Cloudflare, which can customize rules to restrict specific requests and protect website security. After logging in to Cloudflare, click "Websites" in the left sidebar, enter the domain name that needs protection, and select "Security" - "WAF" in the sidebar to use it for free (note that it is not the WAF at the account level, but the one for the specific domain). Free accounts can set up to five custom rules.
Click "Create Rule" to enter the settings page.
Click "Edit Expression" on the right side of "Expression Preview" to enter the following rule:
(http.user_agent ne "pseudoyu.com/1.0") and ((http.request.uri.path contains "jpg") or (http.request.uri.path contains "png") or (http.request.uri.path contains "jpeg") or (http.request.uri.path contains "gif"))
Note that you need to replace pseudoyu.com/1.0 with the User Agent value you defined in WebP Cloud, and keep the rest unchanged.
And select "Block" from the "Select Action" dropdown menu. This will match our rule and block specific network requests. After editing, click "Save".
I used the recommended rule provided by the WebP Cloud official documentation. There may be adjustments for new features in the future, so you can refer directly to the documentation.
After the configuration is complete, when we access the source link starting with images.pseudoyu.com, it will be blocked by the WAF. For example:
images.pseudoyu.com/images/new_mbp_setup.jpg
The links proxied by WebP Cloud can be accessed normally, for example:
image.pseudoyu.com/images/new_mbp_setup.jpg
This perfectly achieves our requirements.
Adding Watermark to Images with WebP Cloud#
After the previous steps, we have ensured that users can only access our images through the WebP Cloud proxy link. The next step is to add a copyright watermark to the images.
Similarly, I looked up the documentation of WebP Cloud and found that it provides the "Watermark" feature in the "Visual Effects" module, which can add a custom watermark to images. It uses the Fabric.js library for implementation and provides some options for visual editing. They also wrote an interesting blog post about it -- "Real-time Watermark Preview with Fabric.js."
Enter the WebP console, select "Visual Effects" on the left, and click "Create Watermark" in the upper right corner to configure some custom watermark styles.
This is my configuration, which adds a light gray @pseudoyu text at the bottom center of the image.
However, there are currently some minor user experience issues. For example, previously uploaded images are not automatically applied/changed with the watermark (possibly due to caching), and the position is misplaced when re-entering the watermark editing page. I have provided feedback to the developers, and these issues may be resolved soon.
After editing the watermark, go to the detailed configuration page of the proxy, scroll down to the "Watermark Setting" module, and select the watermark you just created. Click "Save" in the upper right corner.
I won't show the effect separately, as all the images in this article have been watermarked using this method.
Conclusion#
It has only been three days since I started using WebP Cloud. At first, I thought it was just a CDN-like image acceleration tool. After exploring, I discovered many interesting features. The Free Quota provided for personal free users is sufficient for everyone to have a better image experience, which is what they insist on doing "the right thing."
The team mainly does technical accumulation and practice, and has written many blog posts -- "WebP Cloud Services Blog." Reading them during leisure time can feel their enthusiasm. Recently, because of the experience mentioned in "Weekly Review #63 - Unpleasant Flower Ordering Experience, Merchants and Consumers in an Increasingly AI-driven World," I have been thinking about the issue of "bad money driving out good money." I think teams that adhere to doing the right thing without compromising too much for commercial purposes should be seen by more people and should live better. I am just a small voice, and I hope to let more people know about them through these tutorials.