Bun.serve: register HTML import outputs under their percent-encoded path

src/runtime/server/HTMLBundle.rs

@@ -617,14 +617,15 @@ impl Route {
                     {
                         route_path = &route_path[1..];
                     }
+                    let route_path = crate::server::percent_encode_route_path(route_path);
 
                     if i == html_index {
-                        this_html_route = Some((static_route, Box::<[u8]>::from(route_path)));
+                        this_html_route = Some((static_route, Box::<[u8]>::from(&*route_path)));
                         continue;
                     }
 
                     bun_core::handle_oom(server.append_static_route(
-                        route_path,
+                        &route_path,
                         AnyRoute::Static(RefPtr::new(static_route)),
                         MethodOptional::Any,
                     ));

src/runtime/server/mod.rs

@@ -161,6 +161,35 @@ pub(crate) fn write_status<const SSL: bool>(resp: *mut uws_sys::NewAppResponse<S
 }
 
 // ─── AnyRoute ────────────────────────────────────────────────────────────────
+
+/// An output file's path as a browser puts it on the request line: every
+/// byte in the WHATWG URL path percent-encode set is escaped. The URL written
+/// into the page is the raw name, and the browser encodes it before the
+/// request, so the route must be registered under the encoded form.
+pub(crate) fn percent_encode_route_path(path: &[u8]) -> std::borrow::Cow<'_, [u8]> {
+    fn needs_escape(byte: u8) -> bool {
+        byte < 0x20
+            || byte >= 0x7F
+            || matches!(
+                byte,
+                b' ' | b'"' | b'#' | b'<' | b'>' | b'?' | b'`' | b'{' | b'}'
+            )
+    }
+    if !path.iter().copied().any(needs_escape) {
+        return std::borrow::Cow::Borrowed(path);
+    }
+    let mut out = Vec::with_capacity(path.len() + 16);
+    for &byte in path {
+        if needs_escape(byte) {
+            let hex = bun_core::fmt::hex2_upper(byte);
+            out.extend_from_slice(&[b'%', hex[0], hex[1]]);
+        } else {
+            out.push(byte);
+        }
+    }
+    std::borrow::Cow::Owned(out)
+}
+
 /// The route table's ref on each route.
 pub enum AnyRoute {
     /// Serve a static file — `"/robots.txt": new Response(...)`

src/runtime/server/server_body.rs

@@ -627,7 +627,7 @@ impl AnyRoute {
         if !relative_path.starts_with(b"/") {
             builder.push(b'/');
         }
-        builder.extend_from_slice(relative_path);
+        builder.extend_from_slice(&super::percent_encode_route_path(relative_path));
 
         let Some(headers_js) = argument.get(init_ctx.global, b"headers")? else {
             return Ok(None);

test/bundler/bundler_html_server.test.ts

@@ -121,5 +121,44 @@ describe.concurrent("bundler", () => {
         stdout: "Home status: 200\nHome has content: true\nAbout status: 200\nAbout has content: true",
       },
     });
+
+    // The page carries the raw asset name. A browser percent-encodes it
+    // before the request, so the route is registered under that form.
+    itBundled(`compile/${backend}/HTMLServerEncodedAssetRoute`, {
+      compile: true,
+      backend: backend,
+      files: {
+        "/entry.ts": /* js */ `
+        import index from "./index.html";
+
+        using server = Bun.serve({
+          port: 0,
+          routes: {
+            "/": index,
+          },
+        });
+
+        const html = await (await fetch(server.url)).text();
+        for (const [, src] of html.matchAll(/<img src="([^"]+)"/g)) {
+          const url = new URL(src, server.url);
+          console.log(url.pathname.replace(/-[a-z0-9]+\.png$/, ".png"), (await fetch(url)).status);
+        }
+      `,
+        "/index.html": /* html */ `
+        <!DOCTYPE html>
+        <html>
+          <body>
+            <img src="./my img.png">
+            <img src="./ünï.png">
+          </body>
+        </html>
+      `,
+        "/my img.png": "fake png",
+        "/ünï.png": "fake png",
+      },
+      run: {
+        stdout: "/my%20img.png 200\n/%C3%BCn%C3%AF.png 200",
+      },
+    });
   }
 });

test/js/bun/http/bun-serve-html.test.ts

@@ -1606,3 +1606,33 @@ describe("production headers and import.meta.env", () => {
     expect(results).toEqual(cases.map(([, , expected]) => expected));
   });
 });
+
+// The page carries the raw asset name. A browser percent-encodes it before
+// the request, so the production build registers the route under that form.
+test.concurrent("production build serves an asset whose name has a space or non-ASCII", async () => {
+  using dir = tempDir("bun-serve-html-encoded-asset-route", {
+    "index.html": `<!DOCTYPE html><html><body><img src="./my img.png"><img src="./ünï.png"><script type="module" src="./app.ts"></script></body></html>`,
+    "my img.png": "fake png",
+    "ünï.png": "fake png",
+    "app.ts": `console.log("app");`,
+    "serve.ts": /*ts*/ `
+      import page from "./index.html";
+      using server = Bun.serve({ port: 0, development: false, routes: { "/": page } });
+      const html = await (await fetch(server.url)).text();
+      const result = [];
+      for (const [, src] of html.matchAll(/<img src="([^"]+)"/g)) {
+        const url = new URL(src, server.url);
+        result.push([src, url.pathname, (await fetch(url)).status]);
+      }
+      console.log(JSON.stringify(result));
+    `,
+  });
+  const { stdout, stderr, exitCode } = await runServeFixture(dir);
+  expect({ result: stdout === "" ? null : JSON.parse(stdout), exitCode }, stderr).toEqual({
+    result: [
+      [expect.stringMatching(/^\/my img-[a-z0-9]+\.png$/), expect.stringMatching(/^\/my%20img-[a-z0-9]+\.png$/), 200],
+      [expect.stringMatching(/^\/ünï-[a-z0-9]+\.png$/), expect.stringMatching(/^\/%C3%BCn%C3%AF-[a-z0-9]+\.png$/), 200],
+    ],
+    exitCode: 0,
+  });
+});