前言#
在「從零開始搭建你的免費圖床系統 （Cloudflare R2 + WebP Cloud + PicGo）」一文中，我用 Cloudflare R2 搭建了一個免費的圖床系統，並通過 WebP Cloud 進行圖片優化。
在使用 WebP Cloud 的過程中，我發現它還提供了自定義 Proxy User Agent、水印等功能，於是萌生了一個想法，是不是可以通過 WebP Cloud 對我的圖床源站鏈接進行保護，使 WebP 的代理鏈接成為訪問我所有圖片的唯一入口，並統一添加我的專屬版權水印。
本文是對這一實踐的記錄，也算是圖床搭建番外篇了。
需求分析#
我目前的圖床方案是將圖片都托管在 Cloudflare R2 上，並且通過 WebP Cloud 這一強大的圖片代理工具進行訪問優化，但其實使用代理鏈接 image.pseudoyu.com 與源站鏈接 images.pseudoyu.com 都可以訪問我的圖片，只是前者被優化過，後者則是我保存的原圖。
隱私保護#
事實上我們通過手機、數碼相機等設備拍攝的照片都會攜帶 EXIF (EXchangeable Image File Format) 信息，通常會包含拍攝設備、時間和地點等敏感信息，我們可以通過一些技術方式手動去除這些元數據，但操作十分繁瑣且容易遺漏。
我查閱了一下 WebP Cloud 的文檔，發現它果然提供自動擦除 EXIF 信息的功能，無須額外配置操作，但其實訪客依然可以可以通過 Cloudflare R2 暴露出的源站信息訪問到原圖，為了避免這一點，我需要限制用戶只能通過 WebP Cloud 代理鏈接進行請求，訪問 Cloudflare R2 源站鏈接時獲取不到任何有用信息。
版權保護#
之前在推上看到 Randy 自己拍的 desk setup 圖被盜用的經歷。
而自己也玩一些攝影，雖沒什麼特別的商業價值，但終究是自己的作品，理應保護版權，因此我想在圖片上統一添加自己的版權水印，以防止被他人盜用。
實現方案#
需求清晰了，其實主要分為兩部分：
- 讓用戶只能通過 WebP Cloud 代理鏈接訪問到我的圖片，禁止直接訪問原圖鏈接
- 在 WebP Cloud 代理層面為所有的圖片統一自動添加自己的版權水印，無須手動操作
以下是我的實現方案與詳細步驟。
WebP 自定義 User Agent + Cloudflare WAF#
和 WebP Cloud 的開發者 Nova Kwok 聊了一下，發現 WebP Cloud 提供了自定義「Proxy User Agent」的功能，並推薦在 Cloudflare WAF 中配置對應規則以保護圖片安全，文檔中有詳細說明 -- 「Security | WebP Cloud Services Docs」。
WebP Cloud 配置#
當我們訪問互聯網上的網頁或圖片鏈接時，請求通常會包含一個 User Agent 字段，一般包含瀏覽器版本等信息，網站可針對不同的 User Agent 進行一些特定邏輯處理。
WebP Cloud 默認會使用 WebP Cloud Services/1.0 作為值，也就是不論用戶訪問圖片時使用的是什麼終端設備和瀏覽器，請求到 Cloudflare R2 時都會被統一為 WebP 定義的 User Agent 值，而這個值又是用戶可以自定義的。
因此，我們登錄 WebP Cloud 的控制台，將「Proxy User Agent」字段設置為一個自己定義的值，如 pseudoyu.com/1.0 等。
Cloudflare WAF 配置#
WAF（Web Application Firewall） 是 Cloudflare 提供的一個防火牆服務，可以自定義規則來限制特定請求以保護網站安全，登錄 Cloudflare 後在左側邊欄點擊「網站」，點擊進入需要保護的域名，選擇側邊欄「安全性」 - 「WAF」即可免費使用（注意，不是最外層的賬戶級 WAF），免費賬戶可設定五個自定義規則。
點擊「創建規則」，進入設置頁面。
點擊「表達式預覽」右側的「編輯表達式」，填入以下規則：
(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"))
要注意的是需要把其中 pseudoyu.com/1.0 這部分填入上文在 WebP Cloud 中自定義的 User Agent 值，其餘保持不變即可。
並且在「選擇操作」下拉選擇「阻止」，這樣會匹配我們的規則並阻止特定網絡請求，編輯完成後點擊保存即可。
我使用的是目前 WebP Cloud 官方文檔提供的推薦規則，後續或許會針對新的功能有所調整，可以直接參考文檔。
完成配置後，當我們再次訪問以 images.pseudoyu.com 開頭的源站鏈接時會被 WAF 攔截，例如：
images.pseudoyu.com/images/new_mbp_setup.jpg
而經 WebP Cloud 代理過的鏈接則可以正常訪問，例如：
image.pseudoyu.com/images/new_mbp_setup.jpg
完美實現了我們的需求。
使用 WebP Cloud 為圖片添加版權水印#
經過了上文的操作，我們已經確保用戶只能經過 WebP Cloud 代理鏈接訪問到我們的圖片了，接下來就是為圖片添加版權水印。
同樣是查閱了 WebP Cloud 的文檔，發現它在「Visual Effects」模塊中提供了「Watermark」功能，可以為圖片添加自定義的水印，使用 Fabric.js 庫實現，提供了可視化編輯的一些選項，還寫了一篇有意思的博客 -- 「使用 Fabric.js 實現實時水印預覽」。
進入 WebP 控制台，選擇左側「Visual Effects」，並點擊右上角「Create Watermark」，就可以進行一些自定義水印樣式配置了。
這是我的配置，即在圖片的底部中間添加一個淺灰色的 @pseudoyu 字樣。
不過目前使用上還有一些體驗上的小問題，如之前上傳的圖並不會自動應用 / 更改為水印（可能是因為有緩存，以及重新進入編輯水印頁面時位置會錯位，已經反饋給了開發者，或許能很快解決。
編輯完水印後，進入代理的詳細配置頁面，下拉到「Watermark Setting」模塊，選取剛創建的水印即可，點擊右上角「Save」即可。
效果就不單獨展示了，本文所有配圖都通過這種方式添加了水印。
總結#
使用 WebP Cloud 才第三天，最開始一直以為只是個類 CDN 圖片加速訪問工具，經過折騰後發現了很多有意思的地方，並且為個人免費用戶提供的 Free Quota 足夠到大家擁有更好的圖片體驗，也就是他們所堅持的「做正確的事」。
團隊更多是做一些技術沉澱和實踐，寫了許多博客 -- 「WebP Cloud Services Blog」，閒時讀讀也能感受到他們的熱情，最近因為「周報 #63 - 不愉快的訂花經歷、商家和消費者與日漸 AI 化的人」這一篇中的經歷而在思考「劣幣驅逐良幣」這一問題，我覺得堅持做正確的事不向商業做過多妥協的團隊理應被更多人看到，理應過得更好，我人微言輕，僅以這些教程來讓更多的人了解到他們。