前言#
「ゼロから始める無料画像ホスティングシステムの構築（Cloudflare R2 + WebP Cloud + PicGo）」の記事では、Cloudflare R2 を使用して無料の画像ホスティングシステムを構築し、WebP Cloud を通じて画像の最適化を行いました。
WebP Cloud を使用している過程で、カスタムプロキシユーザーエージェントや透かしなどの機能が提供されていることに気づきました。そのため、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 のソースリンクにアクセスしても有用な情報は得られません。
著作権保護#
以前、Twitter で Randy が自分で撮影したデスクセットアップの画像が盗用された経験を見ました。
私もいくつかの写真を撮っているので、特別な商業価値はありませんが、結局は自分の作品であり、著作権を保護するべきです。そのため、画像に自分の著作権透かしを統一して追加したいと考えています。他人に盗用されるのを防ぐためです。
実現方案#
要求が明確になったので、実際には主に二つの部分に分かれます：
- ユーザーが WebP Cloud のプロキシリンクを通じてのみ私の画像にアクセスできるようにし、オリジナル画像リンクへの直接アクセスを禁止する
- WebP Cloud のプロキシレイヤーで、すべての画像に自動的に自分の著作権透かしを追加し、手動操作を不要にする
以下は私の実現方案と詳細な手順です。
WebP カスタムユーザーエージェント + Cloudflare WAF#
WebP Cloud の開発者 Nova Kwok と話したところ、WebP Cloud がカスタム「プロキシユーザーエージェント」の機能を提供していることがわかりました。また、Cloudflare WAF で対応するルールを設定して画像の安全を保護することが推奨されています。ドキュメントには詳細な説明があります -- 「Security | WebP Cloud Services Docs」。
WebP Cloud 設定#
インターネット上のウェブページや画像リンクにアクセスする際、リクエストには通常ユーザーエージェントフィールドが含まれ、一般的にはブラウザのバージョンなどの情報が含まれます。ウェブサイトは異なるユーザーエージェントに対して特定のロジック処理を行うことができます。
WebP Cloud はデフォルトで WebP Cloud Services/1.0 を値として使用します。つまり、ユーザーが画像にアクセスする際に使用する端末やブラウザに関係なく、Cloudflare R2 にリクエストが送信されると、すべてが WebP 定義のユーザーエージェント値に統一されます。この値はユーザーがカスタマイズ可能です。
そのため、WebP Cloud のコンソールにログインし、「プロキシユーザーエージェント」フィールドを自分で定義した値（例：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 でカスタマイズしたユーザーエージェント値を入力し、他の部分はそのままにしておきます。
そして「操作を選択」のドロップダウンから「ブロック」を選択します。これにより、私たちのルールに一致し、特定のネットワークリクエストがブロックされます。編集が完了したら保存をクリックします。
私は現在 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」の記事の経験から「劣币驱逐良币」という問題について考えています。正しいことをし、商業に過度に妥協しないチームは、もっと多くの人に見られるべきであり、より良い生活を送るべきだと思います。私は微力ですが、これらのチュートリアルを通じて、より多くの人に彼らを知ってもらいたいと思います。