Enforce remotePatterns when fetching external images (#727)

Author: vicb

.changeset/plain-beds-win.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": minor
+---
+
+Enforce remotePatterns when fetching external images

packages/cloudflare/package.json

@@ -64,6 +64,7 @@
     "@tsconfig/strictest": "catalog:",
     "@types/mock-fs": "catalog:",
     "@types/node": "catalog:",
+    "@types/picomatch": "^4.0.0",
     "diff": "^8.0.2",
     "esbuild": "catalog:",
     "eslint": "catalog:",
@@ -73,6 +74,7 @@
     "globals": "catalog:",
     "mock-fs": "catalog:",
     "next": "catalog:",
+    "picomatch": "^4.0.2",
     "rimraf": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",

packages/cloudflare/src/cli/build/open-next/compile-init.ts

@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { loadConfig } from "@opennextjs/aws/adapters/config/util.js";
 import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
 import { build } from "esbuild";
+import pm from "picomatch";
 
 /**
  * Compiles the initialization code for the workerd runtime
@@ -16,6 +18,27 @@ export async function compileInit(options: BuildOptions) {
   const nextConfig = loadConfig(path.join(options.appBuildOutputPath, ".next"));
   const basePath = nextConfig.basePath ?? "";
 
+  // https://github.com/vercel/next.js/blob/d76f0b13/packages/next/src/build/index.ts#L573
+  const nextRemotePatterns = nextConfig.images?.remotePatterns ?? [];
+
+  const remotePatterns = nextRemotePatterns.map((p) => ({
+    protocol: p.protocol,
+    hostname: p.hostname ? pm.makeRe(p.hostname).source : undefined,
+    port: p.port,
+    pathname: pm.makeRe(p.pathname ?? "**", { dot: true }).source,
+    // search is canary only as of June 2025
+    search: (p as any).search,
+  }));
+
+  // Local patterns are only in canary as of June 2025
+  const nextLocalPatterns = (nextConfig.images as any)?.localPatterns ?? [];
+
+  // https://github.com/vercel/next.js/blob/d76f0b13/packages/next/src/build/index.ts#L573
+  const localPatterns = nextLocalPatterns.map((p: any) => ({
+    pathname: pm.makeRe(p.pathname ?? "**", { dot: true }).source,
+    search: p.search,
+  }));
+
   await build({
     entryPoints: [initPath],
     outdir: path.join(options.outputDir, "cloudflare"),
@@ -27,6 +50,8 @@ export async function compileInit(options: BuildOptions) {
     define: {
       __BUILD_TIMESTAMP_MS__: JSON.stringify(Date.now()),
       __NEXT_BASE_PATH__: JSON.stringify(basePath),
+      __IMAGES_REMOTE_PATTERNS__: JSON.stringify(remotePatterns),
+      __IMAGES_LOCAL_PATTERNS__: JSON.stringify(localPatterns),
     },
   });
 }

packages/cloudflare/src/cli/templates/init.ts

@@ -140,11 +140,109 @@ function populateProcessEnv(url: URL, env: CloudflareEnv) {
   process.env.__NEXT_PRIVATE_ORIGIN = url.origin;
 }
 
+export type RemotePattern = {
+  protocol?: "http" | "https";
+  hostname: string;
+  port?: string;
+  pathname: string;
+  search?: string;
+};
+
+const imgRemotePatterns = __IMAGES_REMOTE_PATTERNS__;
+
+/**
+ * Fetches an images.
+ *
+ * Local images (starting with a '/' as fetched using the passed fetcher).
+ * Remote images should match the configured remote patterns or a 404 response is returned.
+ */
+export function fetchImage(fetcher: Fetcher | undefined, url: string) {
+  // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/server/image-optimizer.ts#L208
+  if (!url || url.length > 3072 || url.startsWith("//")) {
+    return new Response("Not Found", { status: 404 });
+  }
+
+  // Local
+  if (url.startsWith("/")) {
+    if (/\/_next\/image($|\/)/.test(decodeURIComponent(parseUrl(url)?.pathname ?? ""))) {
+      return new Response("Not Found", { status: 404 });
+    }
+
+    return fetcher?.fetch(`http://assets.local${url}`);
+  }
+
+  // Remote
+  let hrefParsed: URL;
+  try {
+    hrefParsed = new URL(url);
+  } catch {
+    return new Response("Not Found", { status: 404 });
+  }
+
+  if (!["http:", "https:"].includes(hrefParsed.protocol)) {
+    return new Response("Not Found", { status: 404 });
+  }
+
+  if (!imgRemotePatterns.some((p: RemotePattern) => matchRemotePattern(p, hrefParsed))) {
+    return new Response("Not Found", { status: 404 });
+  }
+
+  return fetch(url, { cf: { cacheEverything: true } });
+}
+
+export function matchRemotePattern(pattern: RemotePattern, url: URL): boolean {
+  // https://github.com/vercel/next.js/blob/d76f0b1/packages/next/src/shared/lib/match-remote-pattern.ts
+  if (pattern.protocol !== undefined) {
+    if (pattern.protocol.replace(/:$/, "") !== url.protocol.replace(/:$/, "")) {
+      return false;
+    }
+  }
+  if (pattern.port !== undefined) {
+    if (pattern.port !== url.port) {
+      return false;
+    }
+  }
+
+  if (pattern.hostname === undefined) {
+    throw new Error(`Pattern should define hostname but found\n${JSON.stringify(pattern)}`);
+  } else {
+    if (!new RegExp(pattern.hostname).test(url.hostname)) {
+      return false;
+    }
+  }
+
+  if (pattern.search !== undefined) {
+    if (pattern.search !== url.search) {
+      return false;
+    }
+  }
+
+  // Should be the same as writeImagesManifest()
+  if (!new RegExp(pattern.pathname).test(url.pathname)) {
+    return false;
+  }
+
+  return true;
+}
+
+function parseUrl(url: string): URL | undefined {
+  let parsed: URL | undefined = undefined;
+  try {
+    parsed = new URL(url, "http://n");
+  } catch {
+    // empty
+  }
+  return parsed;
+}
+
 /* eslint-disable no-var */
 declare global {
   // Build timestamp
   var __BUILD_TIMESTAMP_MS__: number;
   // Next basePath
   var __NEXT_BASE_PATH__: string;
+  // Images patterns
+  var __IMAGES_REMOTE_PATTERNS__: RemotePattern[];
+  var __IMAGES_LOCAL_PATTERNS__: unknown[];
 }
 /* eslint-enable no-var */

packages/cloudflare/src/cli/templates/worker.ts

@@ -1,5 +1,5 @@
 //@ts-expect-error: Will be resolved by wrangler build
-import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+import { fetchImage, runWithCloudflareRequestContext } from "./cloudflare/init.js";
 // @ts-expect-error: Will be resolved by wrangler build
 import { handler as middlewareHandler } from "./middleware/handler.mjs";
 
@@ -31,9 +31,7 @@ export default {
       // Fallback for the Next default image loader.
       if (url.pathname === `${globalThis.__NEXT_BASE_PATH__}/_next/image`) {
         const imageUrl = url.searchParams.get("url") ?? "";
-        return imageUrl.startsWith("/")
-          ? env.ASSETS?.fetch(`http://assets.local${imageUrl}`)
-          : fetch(imageUrl, { cf: { cacheEverything: true } });
+        return fetchImage(env.ASSETS, imageUrl);
       }
 
       // - `Request`s are handled by the Next server