From 243d222c35f4607ac13a400e827333f44a0f44c7 Mon Sep 17 00:00:00 2001 From: yyamashita Date: Wed, 17 Jun 2026 22:41:55 +0900 Subject: Fix image proxy 400 for application/octet-stream responses GCS-backed Active Storage (omatsuri.tech, used by rinky.info venues) returns application/octet-stream instead of image/*. Detect actual image type from magic bytes (JPEG/PNG/GIF/WebP) and serve with correct Content-Type. Also add X-Content-Type-Options: nosniff. Co-Authored-By: Claude Sonnet 4.6 --- app/routes/api.image.ts | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) (limited to 'app') diff --git a/app/routes/api.image.ts b/app/routes/api.image.ts index 814cd1c..fee6401 100644 --- a/app/routes/api.image.ts +++ b/app/routes/api.image.ts @@ -12,6 +12,19 @@ function isPrivateHost(hostname: string): boolean { return PRIVATE_IP_RE.test(hostname) || hostname === "localhost"; } +function resolveContentType(declared: string, data: ArrayBuffer): string | null { + if (declared.startsWith("image/")) return declared; + if (declared.startsWith("application/octet-stream") || declared === "") { + const b = new Uint8Array(data, 0, 12); + if (b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff) return "image/jpeg"; + if (b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4e && b[3] === 0x47) return "image/png"; + if (b[0] === 0x47 && b[1] === 0x49 && b[2] === 0x46) return "image/gif"; + if (b[0] === 0x52 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x46 && + b[8] === 0x57 && b[9] === 0x45 && b[10] === 0x42 && b[11] === 0x50) return "image/webp"; + } + return null; +} + export async function loader({ request }: LoaderFunctionArgs) { const raw = new URL(request.url).searchParams.get("url"); if (!raw) return new Response("Missing url", { status: 400 }); @@ -54,21 +67,23 @@ export async function loader({ request }: LoaderFunctionArgs) { if (!res.ok) return new Response("Upstream error", { status: 502 }); const contentType = res.headers.get("content-type") ?? ""; - if (!contentType.startsWith("image/")) { + const data = await res.arrayBuffer(); + + const resolvedType = resolveContentType(contentType, data); + if (!resolvedType) { return new Response("Not an image", { status: 400 }); } - const data = await res.arrayBuffer(); - if (cache.size >= MAX_CACHE_ENTRIES) { cache.delete(cache.keys().next().value!); } - cache.set(raw, { data, contentType, expiresAt: now + CACHE_TTL_MS }); + cache.set(raw, { data, contentType: resolvedType, expiresAt: now + CACHE_TTL_MS }); return new Response(data.slice(0), { headers: { - "Content-Type": contentType, + "Content-Type": resolvedType, "Cache-Control": "public, max-age=86400", + "X-Content-Type-Options": "nosniff", }, }); } -- cgit v1.2.3