非公開画像を配信する

署名付き URL トークンを使うと、非公開画像を配信できます。署名付き URL が必要な画像は、トークンなしではアクセスできません。常に公開アクセスを許可するバリアント向けのリクエストは例外です。

Cloudflare ダッシュボードで、Hosted Images ページを開きます。
Hosted images を開く ↗
Keys を選択します。
キーをコピーし、有効期限付きのトークン化 URL を生成します。

バックエンドから署名付き URL を生成する

署名付き URL は、署名キーを保護するためサーバー側で生成します。次の例は Cloudflare Worker を使っていますが、同じ署名ロジックは任意のバックエンド環境（Node.js、Python、PHP、Go など）で実装できます。

Worker は通常の Images URL を受け取り、1 日後に期限切れになる署名付き URL を返します。有効期限を変える場合は、EXPIRATION の値を調整します。

const EXPIRATION = 60 * 60 * 24; // 1 day

const bufferToHex = (buffer) =>
	[...new Uint8Array(buffer)]
		.map((x) => x.toString(16).padStart(2, "0"))
		.join("");

async function generateSignedUrl(url, signingKey) {
	// `url` is a full imagedelivery.net URL
	// e.g. https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile

	const encoder = new TextEncoder();
	const secretKeyData = encoder.encode(signingKey);
	const key = await crypto.subtle.importKey(
		"raw",
		secretKeyData,
		{ name: "HMAC", hash: "SHA-256" },
		false,
		["sign"],
	);

	// Attach the expiration value to the URL
	const expiry = Math.floor(Date.now() / 1000) + EXPIRATION;
	url.searchParams.set("exp", expiry);
	// `url` now looks like
	// https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275

	const stringToSign = url.pathname + "?" + url.searchParams.toString();
	// e.g. /cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275

	// Generate the HMAC signature
	const mac = await crypto.subtle.sign(
		"HMAC",
		key,
		encoder.encode(stringToSign),
	);
	const sig = bufferToHex(new Uint8Array(mac).buffer);

	// Attach the signature to the URL
	url.searchParams.set("sig", sig);

	return new Response(url);
}

export default {
	async fetch(request, env, ctx) {
		const url = new URL(request.url);
		const imageDeliveryURL = new URL(
			url.pathname
				.slice(1)
				.replace("https:/imagedelivery.net", "https://imagedelivery.net"),
		);
		// IMAGES_SIGNING_KEY is set via `npx wrangler secret put IMAGES_SIGNING_KEY`
		return generateSignedUrl(imageDeliveryURL, env.IMAGES_SIGNING_KEY);
	},
};

const EXPIRATION = 60 * 60 * 24; // 1 day

const bufferToHex = (buffer: ArrayBuffer) =>
	[...new Uint8Array(buffer)]
		.map((x) => x.toString(16).padStart(2, "0"))
		.join("");

async function generateSignedUrl(
	url: URL,
	signingKey: string,
): Promise<Response> {
	// `url` is a full imagedelivery.net URL
	// e.g. https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile

	const encoder = new TextEncoder();
	const secretKeyData = encoder.encode(signingKey);
	const key = await crypto.subtle.importKey(
		"raw",
		secretKeyData,
		{ name: "HMAC", hash: "SHA-256" },
		false,
		["sign"],
	);

	// Attach the expiration value to the URL
	const expiry = Math.floor(Date.now() / 1000) + EXPIRATION;
	url.searchParams.set("exp", expiry);
	// `url` now looks like
	// https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275

	const stringToSign = url.pathname + "?" + url.searchParams.toString();
	// e.g. /cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275

	// Generate the HMAC signature
	const mac = await crypto.subtle.sign(
		"HMAC",
		key,
		encoder.encode(stringToSign),
	);
	const sig = bufferToHex(new Uint8Array(mac).buffer);

	// Attach the signature to the URL
	url.searchParams.set("sig", sig);

	return new Response(url);
}

export default {
	async fetch(request, env, ctx): Promise<Response> {
		const url = new URL(request.url);
		const imageDeliveryURL = new URL(
			url.pathname
				.slice(1)
				.replace("https:/imagedelivery.net", "https://imagedelivery.net"),
		);
		// IMAGES_SIGNING_KEY is set via `npx wrangler secret put IMAGES_SIGNING_KEY`
		return generateSignedUrl(imageDeliveryURL, env.IMAGES_SIGNING_KEY);
	},
} satisfies ExportedHandler<Env>;