INTEGRITY Документация

← Images / images / optimization / transformations

Управление доступом к источнику

Изображения с изменённым размером можно отдавать, не открывая доступ к исходному изображению. Изображения могут размещаться на другом сервере вне вашей зоны, а истинный источник изображения можно полностью скрыть. Сервер источника может требовать аутентификацию для показа исходного изображения, причём посетителям об этом знать не обязательно. Доступ к полноразмерному изображению можно ограничить, сделав невозможным изменение параметров размера.

Всё это поведение можно полностью настраивать, поскольку оно определяется пользовательским кодом скрипта, выполняющегося на периферийной сети в Cloudflare Worker.

export default {
	async fetch(request, env, ctx) {
		// Here you can compute arbitrary imageURL and
		// resizingOptions from any request data ...
		return fetch(imageURL, { cf: { image: resizingOptions } });
	},
};

Этот код будет выполняться при каждом запросе, но его исходный код не будет доступен посетителям сайта. Благодаря этому код может выполнять проверки безопасности и хранить секреты, необходимые для контролируемого доступа к изображениям.

Примеры ниже приведены только для справки, следовать им в точности не обязательно. URL-адреса изображений и параметры изменения размера можно формировать и другими способами.

Скрытие сервера изображений

export default {
	async fetch(request, env, ctx) {
		const resizingOptions = {
			/* resizing options will be demonstrated in the next example */
		};

		const hiddenImageOrigin = "https://secret.example.com/hidden-directory";
		const requestURL = new URL(request.url);
		// Append the request path such as "/assets/image1.jpg" to the hiddenImageOrigin.
		// You could also process the path to add or remove directories, modify filenames, etc.
		const imageURL = hiddenImageOrigin + requestURL.pathname;
		// This will fetch image from the given URL, but to the website's visitors this
		// will appear as a response to the original request. Visitor’s browser will
		// not see this URL.
		return fetch(imageURL, { cf: { image: resizingOptions } });
	},
};

Запрет доступа к полноразмерным изображениям

Помимо защиты URL-адреса исходного изображения, вы также можете проверять, что допустимы только определённые размеры изображений:

export default {
  async fetch(request, env, ctx) {
  const imageURL = … // detail omitted in this example, see the previous example

  const requestURL = new URL(request.url)
  const width = parseInt(requestURL.searchParams.get("width"), 10);
  const resizingOptions = { width }
  // If someone tries to manipulate your image URLs to reveal higher-resolution images,
  // you can catch that and refuse to serve the request (or enforce a smaller size, etc.)
  if (resizingOptions.width > 1000) {
    return new Response("We don't allow viewing images larger than 1000 pixels wide", { status: 400 })
  }
  return fetch(imageURL, {cf:{image:resizingOptions}})
},};

Не указывайте размеры изображения в URL

Указывать в URL реальные размеры в пикселях не обязательно. Можно задать размеры прямо в скрипте Worker и выбирать нужный размер другим способом, например по названию пресета, указанному в URL:

export default {
	async fetch(request, env, ctx) {
		const requestURL = new URL(request.url);
		const resizingOptions = {};

		// The regex selects the first path component after the "images"
		// prefix, and the rest of the path (e.g. "/images/first/rest")
		const match = requestURL.pathname.match(/images\/([^/]+)\/(.+)/);

		// You can require the first path component to be one of the
		// predefined sizes only, and set actual dimensions accordingly.
		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("invalid size");
		}

		// The remainder of the path may be used to locate the original
		// image, e.g. here "/images/small/image1.jpg" would map to
		// "https://storage.example.com/bucket/image1.jpg" resized to 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.

// generate signed headers (application specific)
const signedHeaders = generatedSignedHeaders();

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

При использовании этого кода источнику (origin) передаются следующие заголовки, обеспечивающие успешное выполнение запроса:

Дополнительные сведения см.: