Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/images/images/add-origin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/images/allowed-origins.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 7 additions & 6 deletions src/content/docs/images/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,18 @@ curl --request POST \
--form file=@./<YOUR_IMAGE.IMG>
```

## Enable transformations
## Enable transformations on your zone

Transformations let you optimize images that are stored outside of Cloudflare Images. Cloudflare will automatically cache every transformed image on our global network so that you store only the original image at your origin.
You can dynamically optimize images that are stored outside of Cloudflare Images and deliver them using [transformation URLs](/images/transform-images/transform-via-url/).

Before you can enable transformations, you must purchase Cloudflare Images. To use transformations, you will need to enable the feature on each zone:
Cloudflare will automatically cache every transformed image on our global network so that you store only the original image at your origin.

To enable this functionality on your zone:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's good to define exactly what our "this" statements are. Are they enabling the automatic caching or the image transformation? I assume it is the transformation so I offered this suggestion.

Suggested change
To enable this functionality on your zone:
To enable image transformation on your zone:


1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Go to **Images** > **Transformations**.
3. Select the zone where you want to enable transformations.
4. Select **Enable**.
5. To transform images only from the enabled zone, uncheck **Resize images from any origin**. This will prevent third parties from resizing images at any origin.
3. Go to the specific zone where you want to enable transformations.
4. Select **Enabl for zonee**. This will allow you to optimize and deliver remote images.

:::note

Expand Down
66 changes: 66 additions & 0 deletions src/content/docs/images/transform-images/sources.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
pcx_content_type: how-to
title: Define source origin
sidebar:
order: 2
---

When optimizing remote images, you can specify which origins can be used as the source for transformed images. By default, Cloudflare accepts only source images from the zone where your transformations are served.

You will learn how to define and manage the origins for the source images that you want to optimize.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like...

  1. you should change to imperative "Learn how to..." and put it at the very beginning of this page or
  2. say "On this page,..." or
  3. get rid of this sentence entirely.

It's a bit confusing to run into here. Cause you introduced this idea at the first sentence already.


:::note
This setting applies to requests from Cloudflare Workers.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This setting applies to requests from Cloudflare Workers.
Image transformation and origin definition applies to requests from Cloudflare Workers.

What is 'this setting'?


If you use a Worker to optimize remote images via a `fetch()` subrequest, then this setting may conflict with existing logic that handles source images.
:::

## How it works

In the Cloudflare dashboard, go to **Images** > **Transformations** and select the zone where you want to serve transformations.

To get started, you must have [transformations enabled on your zone](/images/get-started/#enable-transformations).

In **Sources**, you can configure the origins for transformations on your zone.

![Enable allowed origins from the Cloudflare dashboard](~/assets/images/images/allowed-origins.png)

## Allow source images only from allowed origins

You can restrict source images to **allowed origins**, which applies transformations only to source images from a defined list.

By default, your accepted sources are set to **allowed origins**. Cloudflare will always allow source images from the same zone where your transformations are served.

If you request a transformation with a source image from outside your **allowed origins**, then the image will be rejected. For example, if you serve transformations on your zone `a.com` and do not define any additional origins, then `a.com/image.png` can be used as a source image, but b.com/image.png will return an error.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you request a transformation with a source image from outside your **allowed origins**, then the image will be rejected. For example, if you serve transformations on your zone `a.com` and do not define any additional origins, then `a.com/image.png` can be used as a source image, but b.com/image.png will return an error.
If you request a transformation with a source image from outside your **allowed origins**, then the image will be rejected. For example, if you serve transformations on your `a.com` zone and do not define any additional origins, then `a.com/image.png` can be used as a source image, but `b.com/image.png` will return an error.


To define a new origin:

1. From **Sources**, select **Add origin**.
2. Under **Domain**, specify the domain for the source image. Only valid web URLs will be accepted.

![Add the origin for source images in the Cloudflare dashboard](~/assets/images/images/add-origin.png)

When you add a root domain, subdomains are not accepted. In other words, if you add `b.com`, then source images from media.b.com will be rejected.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
When you add a root domain, subdomains are not accepted. In other words, if you add `b.com`, then source images from media.b.com will be rejected.
When you add a root domain, subdomains are not accepted. In other words, if you add `b.com`, then source images from `media.b.com` will be rejected.


To support individual subdomains, you can define an additional origin such as `media.b.com`. If you add only `media.b.com` and not the root domain, then source images from the root domain (`b.com`) and other subdomains (`cdn.b.com`) will be rejected.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To support individual subdomains, you can define an additional origin such as `media.b.com`. If you add only `media.b.com` and not the root domain, then source images from the root domain (`b.com`) and other subdomains (`cdn.b.com`) will be rejected.
To support individual subdomains, define an additional origin such as `media.b.com`. If you add only `media.b.com` and not the root domain, then source images from the root domain (`b.com`) and other subdomains (`cdn.b.com`) will be rejected.


To support all subdomains, you can use the `*` wildcard at the beginning of the root domain. For example, `*.b.com` will accept source images from the root domain (like `b.com/image.png`) as well as from subdomains (like `media.b.com/image.png` or `cdn.b.com/image.png`).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To support all subdomains, you can use the `*` wildcard at the beginning of the root domain. For example, `*.b.com` will accept source images from the root domain (like `b.com/image.png`) as well as from subdomains (like `media.b.com/image.png` or `cdn.b.com/image.png`).
To support all subdomains, use the `*` wildcard at the beginning of the root domain. For example, `*.b.com` will accept source images from the root domain (like `b.com/image.png`) as well as from subdomains (like `media.b.com/image.png` or `cdn.b.com/image.png`).


3. Optionally, specify the **Path** for the source image. If no path is specified, then source images from all paths on this domain are accepted.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
3. Optionally, specify the **Path** for the source image. If no path is specified, then source images from all paths on this domain are accepted.
3. Optionally, you can specify the **Path** for the source image. If no path is specified, then source images from all paths on this domain are accepted.


Cloudflare checks whether the defined path is at the beginning of the source path. If the defined path is not present at the beginning of the path, then the source image will be rejected.

For example, if you define an origin with domain `b.com` and path `/themes`, then `b.com/themes/image.png` will be accepted but `b.com/media/themes/image.pn`g will be rejected.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For example, if you define an origin with domain `b.com` and path `/themes`, then `b.com/themes/image.png` will be accepted but `b.com/media/themes/image.pn`g will be rejected.
For example, if you define an origin with domain `b.com` and path `/themes`, then `b.com/themes/image.png` will be accepted but `b.com/media/themes/image.png` will be rejected.


4. Select **Add**. Your origin will now appear in your list of allowed origins.
5. Select **Save**. These changes will take effect immediately.

When you configure **allowed origins**, only the initial URL of the source image is checked. Any redirects, including URLs that leave your zone, will be followed, and the resulting image will be transformed.

If you change your accepted sources to **any origin**, then your list of sources will be cleared and reset to default.

## Allow source images from any origin

When your accepted sources are set to **any origin**, any publicly available image can be used as the source image for transformations on this zone.

This setting is less secure and may allow third parties to serve transformations on your zone.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This setting is less secure and may allow third parties to serve transformations on your zone.
**Any origin** is less secure and may allow third parties to serve transformations on your zone.

Loading