app/routes/media.$.ts

Functions

Imports

It imports app/lib/context.ts, app/lib/error-message.mjs, app/lib/media/classify.mjs, app/lib/media/encoding.mjs, app/lib/media/widths.mjs, app/lib/seo.ts. No module of this repo imports it.

Source

1import { getEnv } from "~/lib/context";
2import { bucketFor, cropSafe } from "~/lib/media/classify.mjs";
3import { WEBP_QUALITY } from "~/lib/media/encoding.mjs";
4import { ALL_WIDTHS, THUMB_WIDTHS } from "~/lib/media/widths.mjs";
5import { errorMessage } from "~/lib/error-message.mjs";
6import type { Route } from "./+types/media.$";
7import { IMMUTABLE_CACHE_CONTROL } from "~/lib/seo";
8
9/**
10 * `?w=` transforms the original on request and never writes back to the bucket. The Images binding,
11 * not `/cdn-cgi/image/`, because the URL interface needs a customer zone and this is workers.dev.
12 * Cached explicitly: the binding's responses are not cached, and each miss is a billed transform.
13 */
14/**
15 * SVG is served as an attachment, never inline: from the site's own origin a stored SVG is script
16 * running as the site. Upload refuses SVG now, but a legacy or hand-put object can still be in the
17 * bucket. Kept although the sandboxed /media CSP (MEDIA_CSP in workers/csp.mjs, applied by the
18 * Renderer, not here) blocks it too, so neither wall depends on the other. Keyed on the stored
19 * content type, so a file renamed to `.png` is caught.
20 */
21function attachIfActive(headers: Headers) {
22  const type = (headers.get("content-type") ?? "").toLowerCase();
23  if (!type.startsWith("image/svg+xml")) return;
24  headers.set("content-disposition", "attachment");
25  // An attachment that a browser sniffs back to SVG would defeat the disposition on its own.
26  headers.set("x-content-type-options", "nosniff");
27}
28
29export async function loader({ params, request, context }: Route.LoaderArgs) {
30  const key = params["*"];
31  if (!key) return new Response("Not found", { status: 404 });
32
33  const env = getEnv(context);
34  const requested = new URL(request.url).searchParams.get("w");
35
36  if (requested) {
37    const width = Number(requested);
38    // Closed sets: an open set lets any caller mint unlimited billed transforms and cache entries of one object.
39    if (!ALL_WIDTHS.includes(width as (typeof ALL_WIDTHS)[number])) {
40      return new Response("Unsupported width", { status: 400 });
41    }
42    return serveThumbnail(env, request, key, width);
43  }
44
45  const object = await bucketFor(env, key).get(key);
46  if (!object) return new Response("Not found", { status: 404 });
47
48  const etag = object.httpEtag;
49  if (request.headers.get("if-none-match") === etag) {
50    return new Response(null, { status: 304, headers: { etag } });
51  }
52
53  const headers = new Headers();
54  object.writeHttpMetadata(headers);
55  headers.set("etag", etag);
56  headers.set("cache-control", IMMUTABLE_CACHE_CONTROL);
57  attachIfActive(headers);
58
59  return new Response(object.body, { headers });
60}
61
62async function serveThumbnail(env: Env, request: Request, key: string, width: number) {
63  // TRAP: keyed by URL alone, so `Vary` cannot help and a stored body must be a pure function of the
64  // key. This cache has no purge, so every input to the body goes into the key, encoder settings
65  // (`WEBP_QUALITY`) included, as a synthetic parameter never served or linked.
66  // `caches.default` is the Workers runtime's; the DOM lib does not declare it, hence the cast.
67  const cache = (caches as typeof caches & { default: Cache }).default;
68  const keyUrl = new URL(request.url);
69  keyUrl.searchParams.set("__enc", `webp${WEBP_QUALITY}`);
70  const cacheKey = new Request(keyUrl.toString(), { method: "GET" });
71  const hit = await cache.match(cacheKey);
72  if (hit) return hit;
73
74  const object = await bucketFor(env, key).get(key);
75  if (!object) return new Response("Not found", { status: 404 });
76
77  // The binding lives in untracked `wrangler.jsonc`, so a clone can lack it. Named explicitly, or the
78  // failure looks like a slow grid.
79  if (!env.IMAGES) {
80    const headers = new Headers();
81    object.writeHttpMetadata(headers);
82    headers.set("cache-control", IMMUTABLE_CACHE_CONTROL);
83    headers.set("x-media-thumb", "unavailable-no-images-binding");
84    // The fallback serves the original bytes, so an SVG reaches the reader here too.
85    attachIfActive(headers);
86    return new Response(object.body, { headers });
87  }
88
89  // Admin tiles crop (saliency keeps the subject); content images never do, the author chose the
90  // framing. Roster photos are exempt even at tile sizes: `fit: "cover"` cuts faces off.
91  const isTile = THUMB_WIDTHS.includes(width as (typeof THUMB_WIDTHS)[number]);
92  const crop = isTile && cropSafe(key);
93
94  // One format, WebP, regardless of `Accept`: the cache key carries no headers, so a negotiated body
95  // would be stored once and served to every client under `immutable`.
96  const format = "image/webp";
97
98  let response: Response;
99  try {
100    const result = await env.IMAGES.input(object.body)
101      .transform({ width, ...(crop ? { fit: "cover", gravity: "auto" } : {}) })
102      .output({ format, quality: WEBP_QUALITY });
103    response = result.response();
104  } catch (error) {
105    // Falling back to the original is safe here, for one tile, and must not become a general strategy.
106    console.error(
107      JSON.stringify({ alert: "media-thumbnail-transform-failed", key, width, detail: errorMessage(error) }),
108    );
109    const original = await bucketFor(env, key).get(key);
110    if (!original) return new Response("Not found", { status: 404 });
111    const headers = new Headers();
112    original.writeHttpMetadata(headers);
113    /* Short, not immutable: this URL should hold the thumbnail once the transform recovers. */
114    headers.set("cache-control", "public, max-age=300");
115    headers.set("x-media-thumb", "original-fallback");
116    // The original bytes, so an SVG reaches the reader here too.
117    attachIfActive(headers);
118    return new Response(original.body, { headers });
119  }
120
121  const headers = new Headers(response.headers);
122  headers.set("cache-control", IMMUTABLE_CACHE_CONTROL);
123  // No `Vary`: the body depends on no request header, and the key could not honor one.
124  headers.set("x-media-thumb", `w=${width}`);
125  const out = new Response(response.body, { headers });
126
127  // The clone is required: a body can be read only once.
128  await cache.put(cacheKey, out.clone());
129  return out;
130}