fix(image): run local source requests through middleware

Author: james-elicx

packages/vinext/src/config/next-config.ts

@@ -220,6 +220,10 @@ export type NextConfig = {
     dangerouslyAllowSVG?: boolean;
     /** Allow image optimization for hostnames that resolve to private IP addresses. This is a security risk (SSRF) — only enable for private networks when you understand the risk. */
     dangerouslyAllowLocalIP?: boolean;
+    /** Maximum image source response body size in bytes. Defaults to 50 MB. */
+    maximumResponseBody?: number;
+    /** Minimum optimized image cache lifetime in seconds. Defaults to 4 hours. */
+    minimumCacheTTL?: number;
     /** Content-Disposition header for image responses. Defaults to "inline". */
     contentDispositionType?: "inline" | "attachment";
     /** Content-Security-Policy header for image responses. Defaults to "script-src 'none'; frame-src 'none'; sandbox;" */

packages/vinext/src/entries/app-rsc-entry.ts

@@ -244,6 +244,8 @@ export function generateRscEntry(
     qualities: config?.imageConfig?.qualities,
     dangerouslyAllowSVG: config?.imageConfig?.dangerouslyAllowSVG,
     dangerouslyAllowLocalIP: config?.imageConfig?.dangerouslyAllowLocalIP,
+    maximumResponseBody: config?.imageConfig?.maximumResponseBody,
+    minimumCacheTTL: config?.imageConfig?.minimumCacheTTL,
     contentDispositionType: config?.imageConfig?.contentDispositionType,
     contentSecurityPolicy: config?.imageConfig?.contentSecurityPolicy,
   };

packages/vinext/src/entries/pages-server-entry.ts

@@ -135,6 +135,8 @@ export async function generateServerEntry(
       qualities: nextConfig?.images?.qualities,
       dangerouslyAllowSVG: nextConfig?.images?.dangerouslyAllowSVG,
       dangerouslyAllowLocalIP: nextConfig?.images?.dangerouslyAllowLocalIP,
+      maximumResponseBody: nextConfig?.images?.maximumResponseBody,
+      minimumCacheTTL: nextConfig?.images?.minimumCacheTTL,
       contentDispositionType: nextConfig?.images?.contentDispositionType,
       contentSecurityPolicy: nextConfig?.images?.contentSecurityPolicy,
     },

packages/vinext/src/index.ts

@@ -3608,6 +3608,8 @@ export default function vinext(options: VinextOptions = {}): PluginOption[] {
                   qualities: nextConfig?.images?.qualities,
                   dangerouslyAllowSVG: nextConfig?.images?.dangerouslyAllowSVG,
                   dangerouslyAllowLocalIP: nextConfig?.images?.dangerouslyAllowLocalIP,
+                  maximumResponseBody: nextConfig?.images?.maximumResponseBody,
+                  minimumCacheTTL: nextConfig?.images?.minimumCacheTTL,
                   contentDispositionType: nextConfig?.images?.contentDispositionType,
                   contentSecurityPolicy: nextConfig?.images?.contentSecurityPolicy,
                 },

packages/vinext/src/server/app-router-entry.ts

@@ -35,6 +35,7 @@ import { registerConfiguredCacheAdapters } from "virtual:vinext-cache-adapters";
 // @ts-expect-error -- virtual module resolved by vinext at build time
 import { registerConfiguredImageOptimizer } from "virtual:vinext-image-adapters";
 import {
+  createInternalImageRequest,
   getImageOptimizer,
   handleConfiguredImageOptimization,
   isImageOptimizationPath,
@@ -93,11 +94,26 @@ async function handleRequest(
   const url = new URL(request.url);
 
   if (isImageOptimizationPath(url.pathname) && env?.ASSETS && getImageOptimizer()) {
-    const assetFetcher = env.ASSETS;
     return handleConfiguredImageOptimization(
       request,
-      (assetPath) =>
-        Promise.resolve(assetFetcher.fetch(new Request(new URL(assetPath, request.url)))),
+      async (assetPath, optimizerRequest) => {
+        const sourceRequest = createInternalImageRequest(
+          assetPath,
+          optimizerRequest,
+          __workerBasePath,
+        );
+        if (!sourceRequest) return new Response("Bad Request", { status: 400 });
+        if (
+          isNextStaticPath(
+            new URL(sourceRequest.url).pathname,
+            __workerBasePath,
+            __workerAssetPathPrefix,
+          )
+        ) {
+          return env.ASSETS!.fetch(sourceRequest);
+        }
+        return handleRequest(sourceRequest, env, ctx);
+      },
       __rscImageAllowedWidths,
       __rscImageConfig,
     );

packages/vinext/src/server/image-optimization.ts

@@ -18,6 +18,7 @@
  */
 
 import { badRequestResponse } from "./http-error-responses.js";
+import { stripBasePath } from "../utils/base-path.js";
 
 /** The pathname that triggers image optimization (matches Next.js). */
 export const IMAGE_OPTIMIZATION_PATH = "/_next/image";
@@ -76,6 +77,10 @@ export type ImageConfig = {
    * via the image shim instead.
    */
   dangerouslyAllowLocalIP?: boolean;
+  /** Maximum source response body size. Defaults to 50 MB. */
+  maximumResponseBody?: number;
+  /** Minimum optimized image cache lifetime in seconds. Defaults to 4 hours. */
+  minimumCacheTTL?: number;
   /** Content-Disposition header value. Default: "inline". */
   contentDispositionType?: "inline" | "attachment";
   /** Content-Security-Policy header value. Default: "script-src 'none'; frame-src 'none'; sandbox;" */
@@ -201,7 +206,7 @@ export function negotiateImageFormat(acceptHeader: string | null): string {
  * Standard Cache-Control header for optimized images.
  * Optimized images are immutable because the URL encodes the transform params.
  */
-export const IMAGE_CACHE_CONTROL = "public, max-age=31536000, immutable";
+export const IMAGE_CACHE_CONTROL = "public, max-age=14400, must-revalidate";
 
 /**
  * Content-Security-Policy for image optimization responses.
@@ -222,7 +227,11 @@ const SAFE_IMAGE_CONTENT_TYPES = new Set([
   "image/gif",
   "image/webp",
   "image/avif",
+  "image/heic",
+  "image/jp2",
+  "image/jxl",
   "image/x-icon",
+  "image/x-icns",
   "image/vnd.microsoft.icon",
   "image/bmp",
   "image/tiff",
@@ -244,6 +253,96 @@ export function isSafeImageContentType(
   return false;
 }
 
+async function readImageSource(
+  response: Response,
+  maximumResponseBody: number,
+): Promise<
+  { response: Response; contentType: string | null; tooLarge: false } | { tooLarge: true } | null
+> {
+  if (!response.body) return null;
+  const reader = response.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let totalSize = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    totalSize += value.byteLength;
+    if (totalSize > maximumResponseBody) {
+      await reader.cancel();
+      return { tooLarge: true };
+    }
+    chunks.push(value);
+  }
+  const bytes = new Uint8Array(totalSize);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  const startsWith = (...signature: number[]) =>
+    bytes.length >= signature.length && signature.every((byte, index) => bytes[index] === byte);
+  const textPrefix = new TextDecoder()
+    .decode(bytes.subarray(0, 256))
+    .replace(/^\uFEFF/, "")
+    .trimStart()
+    .toLowerCase();
+  let contentType: string | null = null;
+  if (startsWith(0xff, 0xd8, 0xff)) contentType = "image/jpeg";
+  else if (startsWith(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a)) contentType = "image/png";
+  else if (startsWith(0x47, 0x49, 0x46, 0x38)) contentType = "image/gif";
+  if (
+    startsWith(0x52, 0x49, 0x46, 0x46) &&
+    bytes.length >= 12 &&
+    bytes[8] === 0x57 &&
+    bytes[9] === 0x45 &&
+    bytes[10] === 0x42 &&
+    bytes[11] === 0x50
+  )
+    contentType = "image/webp";
+  else if (bytes.length >= 12 && startsWith(0x00, 0x00, 0x00, 0x0c, 0x4a, 0x58, 0x4c, 0x20))
+    contentType = "image/jxl";
+  else if (startsWith(0xff, 0x0a)) contentType = "image/jxl";
+  else if (bytes.length >= 12 && startsWith(0x00, 0x00, 0x00, 0x0c, 0x6a, 0x50, 0x20, 0x20))
+    contentType = "image/jp2";
+  else if (
+    bytes.length >= 12 &&
+    bytes[4] === 0x66 &&
+    bytes[5] === 0x74 &&
+    bytes[6] === 0x79 &&
+    bytes[7] === 0x70
+  ) {
+    const brand = String.fromCharCode(bytes[8], bytes[9], bytes[10], bytes[11]);
+    if (brand === "avif" || brand === "avis") contentType = "image/avif";
+    else if (brand === "heic") contentType = "image/heic";
+  } else if (startsWith(0x00, 0x00, 0x01, 0x00)) contentType = "image/x-icon";
+  else if (startsWith(0x69, 0x63, 0x6e, 0x73)) contentType = "image/x-icns";
+  else if (startsWith(0x42, 0x4d)) contentType = "image/bmp";
+  else if (startsWith(0x49, 0x49, 0x2a, 0x00) || startsWith(0x4d, 0x4d, 0x00, 0x2a))
+    contentType = "image/tiff";
+  else if (textPrefix.startsWith("<?xml") || textPrefix.startsWith("<svg"))
+    contentType = "image/svg+xml";
+
+  return {
+    response: new Response(bytes, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+    }),
+    contentType,
+    tooLarge: false,
+  };
+}
+
+function isFreshImageRequest(request: Request, etag: string): boolean {
+  if (request.headers.get("Cache-Control")?.toLowerCase().includes("no-cache")) return false;
+  const ifNoneMatch = request.headers.get("If-None-Match");
+  if (!ifNoneMatch) return false;
+  const normalize = (value: string) => value.trim().replace(/^W\//, "");
+  return ifNoneMatch
+    .split(",")
+    .some((value) => value.trim() === "*" || normalize(value) === normalize(etag));
+}
+
 /**
  * Apply security headers to an image optimization response.
  * These headers are set on every response from the image endpoint,
@@ -262,14 +361,37 @@ function setImageSecurityHeaders(headers: Headers, config?: ImageConfig): void {
   );
 }
 
-function createPassthroughImageResponse(source: Response, config?: ImageConfig): Response {
-  const headers = new Headers(source.headers);
-  headers.set("Cache-Control", IMAGE_CACHE_CONTROL);
+function createPassthroughImageResponse(
+  source: Response,
+  config?: ImageConfig,
+  request?: Request,
+  detectedContentType?: string,
+): Response {
+  const headers = new Headers();
+  const contentType = detectedContentType ?? source.headers.get("Content-Type");
+  const etag = source.headers.get("ETag");
+  if (contentType) headers.set("Content-Type", contentType);
+  if (etag) headers.set("ETag", etag);
+  headers.set("Cache-Control", imageCacheControl(source, config));
   headers.set("Vary", "Accept");
   setImageSecurityHeaders(headers, config);
+  if (etag && request && isFreshImageRequest(request, etag)) {
+    headers.delete("Content-Type");
+    return new Response(null, { status: 304, headers });
+  }
   return new Response(source.body, { status: 200, headers });
 }
 
+function imageCacheControl(source: Response, config?: ImageConfig): string {
+  const upstreamCacheControl = source.headers.get("Cache-Control");
+  if (upstreamCacheControl?.toLowerCase().includes("immutable")) return upstreamCacheControl;
+  const upstreamMaxAge = source.headers
+    .get("Cache-Control")
+    ?.match(/(?:^|,)\s*(?:s-maxage|max-age)=(\d+)/i)?.[1];
+  const maxAge = Math.max(config?.minimumCacheTTL ?? 14_400, Number(upstreamMaxAge ?? 0));
+  return `public, max-age=${maxAge}, must-revalidate`;
+}
+
 /**
  * Handlers for image optimization I/O operations.
  * Workers provide these callbacks to adapt their specific bindings.
@@ -284,6 +406,29 @@ export type ImageHandlers = {
   ) => Promise<Response>;
 };
 
+/**
+ * Build the request used to resolve a local image source through the app's
+ * normal request pipeline. This uses a credential-free synthetic GET request,
+ * matching Next.js and preventing external rewrites from forwarding caller credentials.
+ */
+export function createInternalImageRequest(
+  imageUrl: string,
+  request: Request,
+  basePath = "",
+): Request | null {
+  const sourceUrl = new URL(imageUrl, request.url);
+  let sourcePathname: string;
+  try {
+    sourcePathname = decodeURIComponent(sourceUrl.pathname);
+  } catch {
+    return null;
+  }
+  if (isImageOptimizationPath(stripBasePath(sourcePathname, basePath))) return null;
+  return new Request(sourceUrl, {
+    method: "GET",
+  });
+}
+
 /**
  * Handle image optimization requests.
  *
@@ -307,9 +452,19 @@ export async function handleImageOptimization(
   const { imageUrl, width, quality } = params;
 
   // Fetch source image
-  const source = await handlers.fetchAsset(imageUrl, request);
-  if (!source.ok || !source.body) {
-    return new Response("Image not found", { status: 404 });
+  const sourceResult = await readImageSource(
+    await handlers.fetchAsset(imageUrl, request),
+    imageConfig?.maximumResponseBody ?? 50_000_000,
+  );
+  if (sourceResult?.tooLarge) {
+    return new Response("The requested resource is too large.", { status: 413 });
+  }
+  if (!sourceResult) {
+    return new Response("The requested resource isn't a valid image.", { status: 400 });
+  }
+  const { response: source, contentType: sourceContentType } = sourceResult;
+  if (!sourceContentType) {
+    return new Response("The requested resource isn't a valid image.", { status: 400 });
   }
 
   // Negotiate output format from Accept header
@@ -318,29 +473,34 @@ export async function handleImageOptimization(
   // Block unsafe Content-Types (e.g., SVG which can contain embedded scripts).
   // Check the source Content-Type before any processing. SVG is only allowed
   // when dangerouslyAllowSVG is explicitly enabled in next.config.js.
-  const sourceContentType = source.headers.get("Content-Type");
   if (!isSafeImageContentType(sourceContentType, imageConfig?.dangerouslyAllowSVG)) {
     return new Response("The requested resource is not an allowed image type", { status: 400 });
   }
 
   // SVG passthrough: SVG is a vector format, so transformation (resize, format
   // conversion) provides no benefit. Serve as-is with security headers.
   // This matches Next.js behavior where SVG is a "bypass type".
-  const sourceMediaType = sourceContentType?.split(";")[0].trim().toLowerCase();
-  if (sourceMediaType === "image/svg+xml") {
-    return createPassthroughImageResponse(source, imageConfig);
+  if (sourceContentType === "image/svg+xml") {
+    return createPassthroughImageResponse(source, imageConfig, request, sourceContentType);
   }
 
   // Transform if handler provided, otherwise serve original
   if (handlers.transformImage) {
     try {
-      const transformed = await handlers.transformImage(source.body, {
+      const transformed = await handlers.transformImage(source.body!, {
         width,
         format,
         quality,
       });
-      const headers = new Headers(transformed.headers);
-      headers.set("Cache-Control", IMAGE_CACHE_CONTROL);
+      if (!transformed.ok || !transformed.body) {
+        throw new Error(`Image transform returned ${transformed.status}`);
+      }
+      const headers = new Headers();
+      const transformedContentType = transformed.headers.get("Content-Type");
+      const transformedEtag = transformed.headers.get("ETag");
+      if (transformedContentType) headers.set("Content-Type", transformedContentType);
+      if (transformedEtag) headers.set("ETag", transformedEtag);
+      headers.set("Cache-Control", imageCacheControl(source, imageConfig));
       headers.set("Vary", "Accept");
       setImageSecurityHeaders(headers, imageConfig);
 
@@ -350,6 +510,11 @@ export async function handleImageOptimization(
         headers.set("Content-Type", format);
       }
 
+      if (transformedEtag && isFreshImageRequest(request, transformedEtag)) {
+        headers.delete("Content-Type");
+        return new Response(null, { status: 304, headers });
+      }
+
       return new Response(transformed.body, { status: 200, headers });
     } catch (e) {
       console.error("[vinext] Image optimization error:", e);
@@ -358,20 +523,31 @@ export async function handleImageOptimization(
 
   // Fallback: serve original image with cache headers
   try {
-    return createPassthroughImageResponse(source, imageConfig);
+    return createPassthroughImageResponse(source, imageConfig, request, sourceContentType);
   } catch (e) {
     console.error("[vinext] Image fallback error, refetching source image:", e);
-    const refetchedSource = await handlers.fetchAsset(imageUrl, request);
-    if (!refetchedSource.ok || !refetchedSource.body) {
+    const refetchedResult = await readImageSource(
+      await handlers.fetchAsset(imageUrl, request),
+      imageConfig?.maximumResponseBody ?? 50_000_000,
+    );
+    if (refetchedResult?.tooLarge) {
+      return new Response("The requested resource is too large.", { status: 413 });
+    }
+    if (!refetchedResult || !refetchedResult.response.ok) {
       return new Response("Image not found", { status: 404 });
     }
 
-    const refetchedContentType = refetchedSource.headers.get("Content-Type");
+    const { response: refetchedSource, contentType: refetchedContentType } = refetchedResult;
     if (!isSafeImageContentType(refetchedContentType, imageConfig?.dangerouslyAllowSVG)) {
       return new Response("The requested resource is not an allowed image type", { status: 400 });
     }
 
-    return createPassthroughImageResponse(refetchedSource, imageConfig);
+    return createPassthroughImageResponse(
+      refetchedSource,
+      imageConfig,
+      request,
+      refetchedContentType ?? undefined,
+    );
   }
 }