From 160788780b18d45d8db1e51a5616180c69884945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 31 Aug 2026 02:10:58 +0100
Subject: [PATCH] the dev proxy did not rewrite srcset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Responsive images 404'd in every preview, and did it silently.

The attribute rule matches a whole attribute value, so it could never have handled srcset — that is a
comma-separated LIST of "url descriptor" pairs, and prefixing it as one value would mangle the first
descriptor onto the first URL. It did not match srcset at all.

Silently is the operative word. An <img> with a srcset also has a src, and the src WAS prefixed — but a
browser given a valid srcset chooses from it and never looks at src. So the markup read correctly, one
attribute pointed at the platform root, and the image was just missing. Found by a logo that would not
load in the fofos layout preview.

imagesrcset is rewritten too. That is the one on <link rel="preload" as="image">, easy to miss and
expensive to miss: a preload that 404s costs a request and leaves the real image undiscovered until the
body is parsed, which is the opposite of why anybody adds one.

Six tests, including the case that found it — src prefixed, srcset not, image missing — and a
protocol-relative candidate left alone, which is the rule everywhere else in this file.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../api/dev-proxy/html-rewrite.test.ts        | 37 ++++++++++++++++
 src/servers/api/dev-proxy/html-rewrite.ts     | 44 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/servers/api/dev-proxy/html-rewrite.test.ts b/src/servers/api/dev-proxy/html-rewrite.test.ts
index 4d255e19..40865792 100644
--- a/src/servers/api/dev-proxy/html-rewrite.test.ts
+++ b/src/servers/api/dev-proxy/html-rewrite.test.ts
@@ -58,6 +58,43 @@ describe('rewriteHtml', () => {
     expect(out.indexOf('<script>')).toBeLessThan(out.indexOf('<title>'));
   });
 
+  test('every candidate in a srcset is prefixed, descriptors intact', () => {
+    expect(rewriteHtml('<img srcset="/a.webp 96w, /b.webp 320w">', BASE)).toContain(
+      `srcset="${BASE}/a.webp 96w, ${BASE}/b.webp 320w"`,
+    );
+  });
+
+  /*
+    The failure this was found by. An <img> with a srcset also has a src, and the src WAS prefixed — but
+    a browser given a valid srcset picks from it and never reads src. So the logo was missing while the
+    markup looked right.
+  */
+  test('a srcset is chosen over src by the browser, so prefixing src alone is not enough', () => {
+    const out = rewriteHtml('<img src="/logo.webp" srcset="/logo.webp 96w">', BASE);
+    expect(out).toContain(`src="${BASE}/logo.webp"`);
+    expect(out).toContain(`srcset="${BASE}/logo.webp 96w"`);
+  });
+
+  test('a candidate with no descriptor is prefixed too', () => {
+    expect(rewriteHtml('<img srcset="/only.webp">', BASE)).toContain(`srcset="${BASE}/only.webp"`);
+  });
+
+  test('imagesrcset on a preload link is prefixed — the one that is easy to miss', () => {
+    expect(rewriteHtml('<link rel="preload" as="image" imagesrcset="/hero.webp 1280w">', BASE)).toContain(
+      `imagesrcset="${BASE}/hero.webp 1280w"`,
+    );
+  });
+
+  test('a protocol-relative candidate is left alone, like everywhere else here', () => {
+    expect(rewriteHtml('<img srcset="//cdn.example.com/a.webp 96w, /b.webp 320w">', BASE)).toContain(
+      `srcset="//cdn.example.com/a.webp 96w, ${BASE}/b.webp 320w"`,
+    );
+  });
+
+  test('`..` is collapsed in a srcset candidate as well', () => {
+    expect(rewriteHtml('<img srcset="/../../x.webp 96w">', BASE)).toContain(`srcset="${BASE}/x.webp 96w"`);
+  });
+
   test('a query string and hash survive normalisation', () => {
     expect(attrs(rewriteHtml('<script src="/../x.js?v=2#frag">', BASE))).toEqual(['/api/dev-proxy/3001/x.js?v=2#frag']);
   });
diff --git a/src/servers/api/dev-proxy/html-rewrite.ts b/src/servers/api/dev-proxy/html-rewrite.ts
index 335d26f0..0510c338 100644
--- a/src/servers/api/dev-proxy/html-rewrite.ts
+++ b/src/servers/api/dev-proxy/html-rewrite.ts
@@ -89,7 +89,38 @@ const normalisePath = (path: string): string => {
 /** `/x` → `<base>/x`, with `..` already collapsed. Never touches `//host` or a full URL. */
 const prefix = (base: string, path: string): string => `${base}${normalisePath(path)}`;
 
-// HTML: rewrite src/href/action attributes with absolute paths + inject fetch/XHR override
+/**
+ * A `srcset`, which is a LIST and cannot be prefixed as one value.
+ *
+ * `srcset="/a.webp 96w, /b.webp 2x"` — comma-separated candidates, each a URL plus an optional
+ * descriptor. The attribute rule below matches a whole attribute value, so it can only ever have
+ * rewritten the first URL and left the descriptor mangled onto it; it does not match `srcset` at all,
+ * which is why responsive images 404'd silently.
+ *
+ * Silently is the operative word. A `<picture>` or an `<img srcset>` still has a `src`, and that one WAS
+ * prefixed — but a browser given a valid srcset chooses from it and never looks at src. So the markup
+ * appeared correct, one attribute pointed at the platform root, and the image was simply missing.
+ *
+ * Split on commas rather than parsed: a URL cannot contain an unescaped comma in this position, and the
+ * descriptor never does.
+ */
+const prefixSrcset = (base: string, list: string): string =>
+  list
+    .split(',')
+    .map((candidate) => {
+      const trimmed = candidate.trim();
+      if (!trimmed) return '';
+      // The URL is everything up to the first space; the rest is `96w`, `2x`, or nothing.
+      const space = trimmed.search(/\s/);
+      const url = space === -1 ? trimmed : trimmed.slice(0, space);
+      const descriptor = space === -1 ? '' : trimmed.slice(space);
+      // Same rule as everywhere else here: root-absolute only, never protocol-relative.
+      return url.startsWith('/') && !url.startsWith('//') ? `${prefix(base, url)}${descriptor}` : trimmed;
+    })
+    .filter(Boolean)
+    .join(', ');
+
+// HTML: rewrite src/href/action/srcset attributes with absolute paths + inject fetch/XHR override
 export const rewriteHtml = (html: string, base: string) =>
   html
     .replace(/<head([^>]*)>/i, `<head$1>${proxyOverrideScript(base)}`)
@@ -97,6 +128,17 @@ export const rewriteHtml = (html: string, base: string) =>
       /(href|src|action)=("|')(\/(?!\/)[^"']*)\2/gi,
       (_match, attr: string, quote: string, path: string) => `${attr}=${quote}${prefix(base, path)}${quote}`,
     )
+    /*
+      `srcset` and `imagesrcset`, which the attribute rule above cannot do — see prefixSrcset.
+
+      `imagesrcset` is the one on `<link rel="preload" as="image">`. It is easy to miss and expensive
+      to miss: a preload that 404s costs a request AND leaves the real image undiscovered until the
+      body is parsed, which is the opposite of what the preload was added for.
+    */
+    .replace(
+      /(imagesrcset|srcset)=("|')([^"']*)\2/gi,
+      (_match, attr: string, quote: string, list: string) => `${attr}=${quote}${prefixSrcset(base, list)}${quote}`,
+    )
     .replace(/url\((\/(?!\/)[^)"']*)\)/g, (_match, path: string) => `url(${prefix(base, path)})`);
 
 // JS/CSS: only `/_bun/` paths.