web: lock down image proxy patterns in production

web/next.config.mjs

@@ -3,26 +3,33 @@ import path from "path";
 import { fileURLToPath } from "url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const isDev = process.env.NODE_ENV === "development";
+
+function remotePatterns() {
+  if (isDev) {
+    return [
+      { protocol: "https", hostname: "**" },
+      { protocol: "http", hostname: "**" },
+    ];
+  }
+  const cms = process.env.WAGTAIL_BASE_URL;
+  if (!cms) {
+    throw new Error("WAGTAIL_BASE_URL is not set, cannot derive image hosts");
+  }
+  const { protocol, hostname, port } = new URL(cms);
+  return [{ protocol: protocol.replace(":", ""), hostname, port }];
+}
+
 const nextConfig = {
   output: "standalone",
   images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-      {
-        protocol: "http",
-        hostname: "**",
-      },
-    ],
+    remotePatterns: remotePatterns(),
     formats: ["image/avif", "image/webp"],
     minimumCacheTTL: 7 * 24 * 60 * 60, // 7 days
     // smoke tests build in production mode against a mock CMS on 127.0.0.1;
     // the flag is serialized into the build, so it must be set at build time
     dangerouslyAllowLocalIP:
-      process.env.NODE_ENV === "development" ||
-      process.env.SMOKE_ALLOW_LOCAL_IMAGES === "1",
+      isDev || process.env.SMOKE_ALLOW_LOCAL_IMAGES === "1",
   },
   turbopack: {
     root: __dirname,