跳转到内容
搜索文档

控制源站访问

最后更新 查看 MarkdownAgent 设置

您可以提供调整大小的图像而不提供对原始图像的访问。图像可以托管在 zone 之外的其他服务器上,原始图像的真实来源可以完全隐藏。源站服务器可能需要身份验证才能披露原始图像,而无需访问者知晓。可以通过使调整大小参数无法被操纵来阻止访问全尺寸图像。

所有这些行为都是完全可自定义的,因为它们由在边缘运行的 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",
		},
	},
});

使用此代码时,以下标头将传递到源站,使您的请求成功:

  • 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

有关更多信息,请参阅:

这篇文档对您有帮助吗?