オリジンアクセスの制御

リサイズされた画像を提供する際に、元の画像へのアクセスを与える必要はありません。画像は、ゾーンの外にある別のサーバーにホストされ、画像の真のソースは完全に隠すことができます。オリジンサーバーは、元の画像を開示するために認証を要求する場合がありますが、訪問者はそれを認識する必要はありません。リサイズパラメータを操作できないようにすることで、フルサイズの画像へのアクセスを防ぐことができます。

これらの動作はすべてカスタマイズ可能であり、Cloudflare Workerのエッジで実行されるカスタムコードによって処理されます。

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // ここで任意のimageURLと
  // resizingOptionsをリクエストデータから計算できます...
  return fetch(imageURL, {cf:{image:resizingOptions}})
}

このコードはすべてのリクエストに対して実行されますが、ソースコードはウェブサイトの訪問者にはアクセスできません。これにより、コードはセキュリティチェックを実行し、画像にアクセスするために必要な秘密を制御された方法で保持できます。

以下の例はあくまで提案であり、正確に従う必要はありません。画像URLやリサイズオプションを他の多くの方法で計算できます。

画像サーバーの隠蔽

async function handleRequest(request) {
  const resizingOptions = {/* 次の例でリサイズオプションが示されます */}

  const hiddenImageOrigin = "https://secret.example.com/hidden-directory"
  const requestURL = new URL(request.url)
  // リクエストパス（例："/assets/image1.jpg"）をhiddenImageOriginに追加します。
  // ディレクトリを追加または削除したり、ファイル名を変更したりするためにパスを処理することもできます。
  const imageURL = hiddenImageOrigin + requestURL.path
  // これは指定されたURLから画像を取得しますが、ウェブサイトの訪問者には
  // 元のリクエストへの応答として表示されます。訪問者のブラウザは
  // このURLを見ることはありません。
  return fetch(imageURL, {cf:{image:resizingOptions}})
}

フルサイズ画像へのアクセスを防ぐ

元の画像URLを保護するだけでなく、特定の画像サイズのみが許可されていることを検証することもできます：

async function handleRequest(request) {
  const imageURL = … // この例では詳細を省略、前の例を参照

  const requestURL = new URL(request.url)
  const resizingOptions = {
    width: requestURL.searchParams.get("width"),
  }
  // 誰かが画像URLを操作して高解像度の画像を表示しようとした場合、
  // それをキャッチしてリクエストを拒否することができます（または小さいサイズを強制するなど）。
  if (resizingOptions.width > 1000) {
    throw Error("1000ピクセル幅を超える画像の表示は許可されていません")
  }
  return fetch(imageURL, {cf:{image:resizingOptions}})
}

URLに画像の寸法を含めない

URLに実際のピクセル寸法を含める必要はありません。Workerスクリプトにサイズを埋め込み、他の方法でサイズを選択できます — 例えば、URLでプリセットの名前を指定することによって：

async function handleRequest(request) {
  const requestURL = new URL(request.url)
  const resizingOptions = {}

  // 正規表現は「images」プレフィックスの後の最初のパスコンポーネントを選択し、
  // 残りのパス（例："/images/first/rest"）を選択します。
  const match = requestURL.path.match(/images\/([^/]+)\/(.+)/)

  // 最初のパスコンポーネントが事前定義されたサイズのいずれかであることを要求し、
  // 実際の寸法をそれに応じて設定できます。
  switch (match && match[1]) {
    case "small": resizingOptions.width = 300; break;
    case "medium": resizingOptions.width = 600; break;
    case "large": resizingOptions.width = 900; break;
    default:
      throw Error("無効なサイズ");
  }

  // 残りのパスは元の画像を特定するために使用される場合があります。
  // 例えば、ここで"/images/small/image1.jpg"は
  // "https://storage.example.com/bucket/image1.jpg"にマッピングされ、300pxにリサイズされます。
  const imageURL = "https://storage.example.com/bucket/" + match[2]
  return fetch(imageURL, {cf:{image:resizingOptions}})
}

認証されたオリジン

Cloudflareの画像変換は、パフォーマンスを向上させるためにリサイズされた画像をキャッシュします。制限付きアクセスで保存された画像は、一般的にリサイズには推奨されません。なぜなら、個々の訪問者向けにカスタマイズされた画像を共有することは安全ではないからです。しかし、顧客がそのような画像を公開キャッシュに保存することに同意する場合、CloudflareはWorkersを通じて画像のリサイズをサポートします。現在、これは認証されたAWS、Azure、Google Cloud、SecureAuthオリジンおよびCloudflare Accessの背後にあるオリジンでサポートされています。

// 署名されたヘッダーを生成（アプリケーション固有）
const signedHeaders = generatedSignedHeaders();

fetch(private_url, {
  headers: signedHeaders,
  cf: {
    image: {
      format: "auto",
      "origin-auth": "share-publicly"
     }
  }
})

このコードを使用すると、次のヘッダーがオリジンに渡され、リクエストが成功することを可能にします：

Authorization
Cookie
x-amz-content-sha256
x-amz-date
x-ms-date
x-ms-version
x-sa-date
cf-access-client-id
cf-access-client-secret

詳細については、以下を参照してください：

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings