How can I make a Cloudflare worker which overwrites a response status code but preserves the rest of the response?

Specifically I am interested in changing all responses with code 403 to code 404, and changing all responses with code 301 to 302. I do not want any other part of the response to change, except the status text (which I want to be empty). Below is my own attempt at this:

addEventListener("fetch", event => {
  event.respondWith(fetchAndModify(event.request));
});

async function fetchAndModify(request) {
  // Send the request on to the origin server.
  const response = await fetch(request);

  const body = await response.body
  newStatus = response.status
  if (response.status == 403) {
    newStatus = 404
  } else if (response.status == 301) {
    newStatus = 302
  }

  // Return modified response.
  return new Response(body, {
    status: newStatus,
    statusText: "",
    headers: response.headers
  });
}

I have confirmed that this code works. I would like to know if there is any possibility at all that this overwrites part of the response other than the status code or text, and if so, how can I avoid that? If this goes against certain best practices of Cloudflare workers or javascript, please describe which ones and why.

You've stumbled on a real problem with the Fetch API spec as it is written today.

As of now, status, statusText, and headers are the only standard properties of Response's init structure. However, there's no guarantee that they will remain the only properties forever, and no guarantee that an implementation doesn't provide additional non-standard or not-yet-standard properties.

In fact, Cloudflare Workers today implements a non-standard property: webSocket, which is used to implement WebSocket proxying. This property is present if the request passed to fetch() was a WebSocket initiation request and the origin server completed a WebSocket handshake. In this case, if you drop the webSocket field from the Response, WebSocket proxying will break -- which may or may not matter to you.

Unfortunately, the standard does not specify any good way to rewrite a single property of a Response without potentially dropping unanticipated properties. This differs from Request objects, which do offer a (somewhat awkward) way to do such rewrites: Request's constructor can take another Request object as the first parameter, in which case the second parameter specifies only the properties to modify. Alternately, to modify only the URL, you can pass the URL as the first parameter and a Request object as the second parameter. This works because a Request object happens to be the same "shape" as the constructor's initializer structure (it's unclear if the spec authors intended this or if it was a happy accident). Exmaples:

// change URL
request = new Request(newUrl, request);

// change method (or any other property)
request = new Request(request, {method: "GET"});

But for Response, you cannot pass an existing Response object as the first parameter to Response's constructor. There are straightforward ways to modify the body and headers:

// change response body
response = new Response(newBody, response);

// change response headers
// Making a copy of a Response object makes headers mutable.
response = new Response(response.body, response);
response.headers.set("Foo", "bar");

But if you want to modify status... well, there's a trick you can do, but it's not pretty:

// Create an initializer by copying the Response's enumerable fields
// into a new object.
let init = {...response};

// Modify it.
init.status = 404;
init.statusText = "Not Found";

// Work around a bug where `webSocket` is `null` but needs to be `undefined`.
// (Sorry, I only just noticed this when testing this answer! We'll fix this
// in the future.)
init.webSocket = init.webSocket || undefined;

// Create a new Response.
response = new Response(response.body, init);

But, ugh, that sure was ugly.

I have proposed improvements to the Fetch API to solve this, but I haven't yet had time to follow through on them. :(

Recommended topics

Hot tags