Skip to content

Commit a35567c

Browse files
committed
Update code from service worker to module worker format
1 parent ac31928 commit a35567c

File tree

7 files changed

+383
-376
lines changed

7 files changed

+383
-376
lines changed

src/content/docs/automatic-platform-optimization/reference/subdomain-subdirectories.mdx

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ title: Subdomains and subdirectories
33
pcx_content_type: how-to
44
sidebar:
55
order: 14
6-
76
---
87

98
## Run APO on a subdomain
@@ -36,24 +35,20 @@ If you choose to run APO only on a subdirectory, the rest of the domain should b
3635
The `cf-edge-cache: no-cache` instructs the APO service to bypass caching for non-WordPress parts of the site. You can implement this option with Cloudflare Workers using the example below.
3736

3837
```js
39-
addEventListener('fetch', event => {
40-
event.respondWith(handleRequest(event.request));
41-
});
42-
43-
async function handleRequest(request) {
44-
/**
45-
* Response properties are immutable. To change them, construct a new
46-
* Response object. Response headers can be modified through the headers `set` method.
47-
*/
48-
const originalResponse = await fetch(request);
49-
50-
let response = new Response(originalResponse.body, originalResponse);
51-
52-
// Add a header using set method
53-
response.headers.set('cf-edge-cache', 'no-cache');
54-
55-
return response;
56-
}
38+
export default {
39+
async fetch(request, env, ctx) {
40+
const originalResponse = await fetch(request);
41+
42+
/**
43+
* Response properties are immutable. To change them, construct a new
44+
* Response object. Response headers can be modified through the headers `set` method.
45+
*/
46+
const response = new Response(originalResponse.body, originalResponse);
47+
response.headers.set("cf-edge-cache", "no-cache");
48+
49+
return response;
50+
},
51+
};
5752
```
5853

5954
### Use Cache Rules

src/content/docs/images/transform-images/control-origin-access.mdx

Lines changed: 63 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,20 @@ pcx_content_type: reference
33
title: Control origin access
44
sidebar:
55
order: 24
6-
76
---
87

98
You can serve resized images without giving access to the original image. Images can be hosted on another server outside of your zone, and the true source of the image can be entirely hidden. The origin server may require authentication to disclose the original image, without needing visitors to be aware of it. Access to the full-size image may be prevented by making it impossible to manipulate resizing parameters.
109

1110
All these behaviors are completely customizable, because they are handled by custom code of a script running [on the edge in a Cloudflare Worker](/images/transform-images/transform-via-workers/).
1211

1312
```js
14-
addEventListener("fetch", event => {
15-
event.respondWith(handleRequest(event.request))
16-
})
17-
18-
async function handleRequest(request) {
19-
// Here you can compute arbitrary imageURL and
20-
// resizingOptions from any request data ...
21-
return fetch(imageURL, {cf:{image:resizingOptions}})
22-
}
13+
export default {
14+
async fetch(request, env, ctx) {
15+
// Here you can compute arbitrary imageURL and
16+
// resizingOptions from any request data ...
17+
return fetch(imageURL, { cf: { image: resizingOptions } });
18+
},
19+
};
2320
```
2421

2522
This code will be run for every request, but the source code will not be accessible to website visitors. This allows the code to perform security checks and contain secrets required to access the images in a controlled manner.
@@ -28,27 +25,27 @@ The examples below are only suggestions, and do not have to be followed exactly.
2825

2926
:::caution[Warning]
3027

31-
3228
When testing image transformations, make sure you deploy the script and test it from a regular web browser window. The preview in the dashboard does not simulate transformations.
3329

34-
3530
:::
3631

3732
## Hiding the image server
3833

3934
```js
4035
async function handleRequest(request) {
41-
const resizingOptions = {/* resizing options will be demonstrated in the next example */}
42-
43-
const hiddenImageOrigin = "https://secret.example.com/hidden-directory"
44-
const requestURL = new URL(request.url)
45-
// Append the request path such as "/assets/image1.jpg" to the hiddenImageOrigin.
46-
// You could also process the path to add or remove directories, modify filenames, etc.
47-
const imageURL = hiddenImageOrigin + requestURL.path
48-
// This will fetch image from the given URL, but to the website's visitors this
49-
// will appear as a response to the original request. Visitor’s browser will
50-
// not see this URL.
51-
return fetch(imageURL, {cf:{image:resizingOptions}})
36+
const resizingOptions = {
37+
/* resizing options will be demonstrated in the next example */
38+
};
39+
40+
const hiddenImageOrigin = "https://secret.example.com/hidden-directory";
41+
const requestURL = new URL(request.url);
42+
// Append the request path such as "/assets/image1.jpg" to the hiddenImageOrigin.
43+
// You could also process the path to add or remove directories, modify filenames, etc.
44+
const imageURL = hiddenImageOrigin + requestURL.path;
45+
// This will fetch image from the given URL, but to the website's visitors this
46+
// will appear as a response to the original request. Visitor’s browser will
47+
// not see this URL.
48+
return fetch(imageURL, { cf: { image: resizingOptions } });
5249
}
5350
```
5451

@@ -79,28 +76,34 @@ You do not have to include actual pixel dimensions in the URL. You can embed siz
7976

8077
```js
8178
async function handleRequest(request) {
82-
const requestURL = new URL(request.url)
83-
const resizingOptions = {}
84-
85-
// The regex selects the first path component after the "images"
86-
// prefix, and the rest of the path (e.g. "/images/first/rest")
87-
const match = requestURL.path.match(/images\/([^/]+)\/(.+)/)
88-
89-
// You can require the first path component to be one of the
90-
// predefined sizes only, and set actual dimensions accordingly.
91-
switch (match && match[1]) {
92-
case "small": resizingOptions.width = 300; break;
93-
case "medium": resizingOptions.width = 600; break;
94-
case "large": resizingOptions.width = 900; break;
95-
default:
96-
throw Error("invalid size");
97-
}
98-
99-
// The remainder of the path may be used to locate the original
100-
// image, e.g. here "/images/small/image1.jpg" would map to
101-
// "https://storage.example.com/bucket/image1.jpg" resized to 300px.
102-
const imageURL = "https://storage.example.com/bucket/" + match[2]
103-
return fetch(imageURL, {cf:{image:resizingOptions}})
79+
const requestURL = new URL(request.url);
80+
const resizingOptions = {};
81+
82+
// The regex selects the first path component after the "images"
83+
// prefix, and the rest of the path (e.g. "/images/first/rest")
84+
const match = requestURL.path.match(/images\/([^/]+)\/(.+)/);
85+
86+
// You can require the first path component to be one of the
87+
// predefined sizes only, and set actual dimensions accordingly.
88+
switch (match && match[1]) {
89+
case "small":
90+
resizingOptions.width = 300;
91+
break;
92+
case "medium":
93+
resizingOptions.width = 600;
94+
break;
95+
case "large":
96+
resizingOptions.width = 900;
97+
break;
98+
default:
99+
throw Error("invalid size");
100+
}
101+
102+
// The remainder of the path may be used to locate the original
103+
// image, e.g. here "/images/small/image1.jpg" would map to
104+
// "https://storage.example.com/bucket/image1.jpg" resized to 300px.
105+
const imageURL = "https://storage.example.com/bucket/" + match[2];
106+
return fetch(imageURL, { cf: { image: resizingOptions } });
104107
}
105108
```
106109

@@ -111,7 +114,7 @@ Cloudflare image transformations cache resized images to aid performance. Images
111114
```js null {9}
112115
// generate signed headers (application specific)
113116
const signedHeaders = generatedSignedHeaders();
114-
117+
115118
fetch(private_url, {
116119
headers: signedHeaders
117120
cf: {
@@ -125,20 +128,20 @@ fetch(private_url, {
125128

126129
When using this code, the following headers are passed through to the origin, and allow your request to be successful:
127130

128-
* `Authorization`
129-
* `Cookie`
130-
* `x-amz-content-sha256`
131-
* `x-amz-date`
132-
* `x-ms-date`
133-
* `x-ms-version`
134-
* `x-sa-date`
135-
* `cf-access-client-id`
136-
* `cf-access-client-secret`
131+
- `Authorization`
132+
- `Cookie`
133+
- `x-amz-content-sha256`
134+
- `x-amz-date`
135+
- `x-ms-date`
136+
- `x-ms-version`
137+
- `x-sa-date`
138+
- `cf-access-client-id`
139+
- `cf-access-client-secret`
137140

138141
For more information, refer to:
139142

140-
* [AWS docs](https://docs.aws.amazon.com/AmazonS3/latest/API/sig-v4-authenticating-requests.html)
141-
* [Azure docs](https://docs.microsoft.com/en-us/rest/api/storageservices/List-Containers2#request-headers)
142-
* [Google Cloud docs](https://cloud.google.com/storage/docs/aws-simple-migration)
143-
* [Cloudflare Zero Trust docs](/cloudflare-one/identity/service-tokens/)
144-
* [SecureAuth docs](https://docs.secureauth.com/2104/en/authentication-api-guide.html)
143+
- [AWS docs](https://docs.aws.amazon.com/AmazonS3/latest/API/sig-v4-authenticating-requests.html)
144+
- [Azure docs](https://docs.microsoft.com/en-us/rest/api/storageservices/List-Containers2#request-headers)
145+
- [Google Cloud docs](https://cloud.google.com/storage/docs/aws-simple-migration)
146+
- [Cloudflare Zero Trust docs](/cloudflare-one/identity/service-tokens/)
147+
- [SecureAuth docs](https://docs.secureauth.com/2104/en/authentication-api-guide.html)

0 commit comments

Comments
 (0)