[Breaking] feat(next/image)!: add support for images.dangerouslyAllowLocalIP and images.maximumRedirects (#84676)

This PR adds a two new options and sets a strict default value for each.

- `images.dangerouslyAllowLocalIP`
- `images.maximumRedirects`

### dangerouslyAllowLocalIP

In rare cases when self-hosting Next.js on a private network, you may
want to allow optimizing images from local IP addresses on the same
network.

However, this is not recommended for most users so the default is
`false`.

> [!NOTE]
> BREAKING CHANGE: This change is breaking for those who self-hosting
Next.js on a private network and want to allow optimizing images from
local IP addresses on the same network. In those cases, you can still
enable the config.

### maximumRedirects

Since are also testing redirects for local IPs, we can also reduce the
maximum number of redirects to 3 by default.

Unlike normal websites which might redirect for features like auth, its
unusual to have more than 3 redirects for an image.

In some rare cases, developers may need to increase this value or set to
`0` to disable redirects.

> [!NOTE]
> BREAKING CHANGE: This change is breaking for those who need image
optimization to follow more than 3 redirects.

Author: styfle

crates/next-build-test/nextConfig.json

@@ -30,6 +30,8 @@
     "disableStaticImages": false,
     "minimumCacheTTL": 60,
     "formats": ["image/avif", "image/webp"],
+    "maximumRedirects": 3,
+    "dangerouslyAllowLocalIP": false,
     "dangerouslyAllowSVG": false,
     "contentSecurityPolicy": "script-src 'none'; frame-src 'none'; sandbox;",
     "contentDispositionType": "inline",

docs/01-app/03-api-reference/02-components/image.mdx

@@ -804,6 +804,52 @@ module.exports = {
 }
 ```
 
+#### `maximumRedirects`
+
+The default image optimization loader will follow HTTP redirects when fetching remote images up to 3 times.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    maximumRedirects: 3,
+  },
+}
+```
+
+You can configure the number of redirects to follow when fetching remote images. Setting the value to `0` will disable following redirects.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    maximumRedirects: 0,
+  },
+}
+```
+
+#### `dangerouslyAllowLocalIP`
+
+In rare cases when self-hosting Next.js on a private network, you may want to allow optimizing images from local IP addresses on the same network. This is not recommended for most users because it could allow malicious users to access content on your internal network.
+
+By default, the value is false.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowLocalIP: false,
+  },
+}
+```
+
+If you need to optimize remote images hosted elsewhere in your local network, you can set the value to true.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    dangerouslyAllowLocalIP: true,
+  },
+}
+```
+
 #### `dangerouslyAllowSVG`
 
 `dangerouslyAllowSVG` allows you to serve SVG images.
@@ -1284,7 +1330,7 @@ export default function Home() {
 
 | Version    | Changes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `v16.0.0`  | `qualities` default configuration changed to `[75]`, `preload` prop added, `priority` prop deprecated.                                                                                                                                                                                                                                                                                                                                                                                     |
+| `v16.0.0`  | `qualities` default configuration changed to `[75]`, `preload` prop added, `priority` prop deprecated, `dangerouslyAllowLocalIP` config added, `maximumRedirects` config added.                                                                                                                                                                                                                                                                                                            |
 | `v15.3.0`  | `remotePatterns` added support for array of `URL` objects.                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `v15.0.0`  | `contentDispositionType` configuration default changed to `attachment`.                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `v14.2.23` | `qualities` configuration added.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

packages/next/package.json

@@ -270,6 +270,7 @@
     "ignore-loader": "0.1.2",
     "image-size": "1.2.1",
     "is-docker": "2.0.0",
+    "is-local-address": "2.2.2",
     "is-wsl": "2.2.0",
     "jest-worker": "27.5.1",
     "json5": "2.2.3",

packages/next/src/compiled/is-local-address/index.js

@@ -0,0 +1 @@
+{"name":"is-local-address","main":"index.js","author":{"email":"josefrancisco.verdu@gmail.com","name":"Kiko Beats","url":"https://kikobeats.com"},"license":"MIT"}

packages/next/src/compiled/is-local-address/package.json

@@ -551,6 +551,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         contentSecurityPolicy: z.string().optional(),
         contentDispositionType: z.enum(['inline', 'attachment']).optional(),
         dangerouslyAllowSVG: z.boolean().optional(),
+        dangerouslyAllowLocalIP: z.boolean().optional(),
         deviceSizes: z
           .array(z.number().int().gte(1).lte(10000))
           .max(25)
@@ -568,6 +569,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
           .optional(),
         loader: z.enum(VALID_LOADERS).optional(),
         loaderFile: z.string().optional(),
+        maximumRedirects: z.number().int().min(0).max(20).optional(),
         minimumCacheTTL: z.number().int().gte(0).optional(),
         path: z.string().optional(),
         qualities: z

packages/next/src/server/config-schema.ts

@@ -6,6 +6,7 @@ import contentDisposition from 'next/dist/compiled/content-disposition'
 import imageSizeOf from 'next/dist/compiled/image-size'
 import { detector } from 'next/dist/compiled/image-detector/detector.js'
 import isAnimated from 'next/dist/compiled/is-animated'
+import isLocalAddress from 'next/dist/compiled/is-local-address'
 import { join } from 'path'
 import nodeUrl, { type UrlWithParsedQuery } from 'url'
 
@@ -30,6 +31,9 @@ import isError from '../lib/is-error'
 import { parseUrl } from '../lib/url'
 import type { CacheControl } from './lib/cache-control'
 import { InvariantError } from '../shared/lib/invariant-error'
+import { lookup } from 'dns/promises'
+import { isIP } from 'net'
+import { ALL } from 'dns'
 
 type XCacheHeader = 'MISS' | 'HIT' | 'STALE'
 
@@ -700,9 +704,40 @@ export async function optimizeImage({
   return optimizedBuffer
 }
 
-export async function fetchExternalImage(href: string): Promise<ImageUpstream> {
+function isRedirect(statusCode: number) {
+  return [301, 302, 303, 307, 308].includes(statusCode)
+}
+
+export async function fetchExternalImage(
+  href: string,
+  dangerouslyAllowLocalIP: boolean,
+  count = 3
+): Promise<ImageUpstream> {
+  if (!dangerouslyAllowLocalIP) {
+    const { hostname } = new URL(href)
+    let ips = [hostname]
+    if (!isIP(hostname)) {
+      const records = await lookup(hostname, {
+        family: 0,
+        all: true,
+        hints: ALL,
+      }).catch((_) => [{ address: hostname }])
+      ips = records.map((record) => record.address)
+    }
+    const privateIps = ips.filter((ip) => isLocalAddress(ip))
+    if (privateIps.length > 0) {
+      Log.error(
+        'upstream image',
+        href,
+        'resolved to private ip',
+        JSON.stringify(privateIps)
+      )
+      throw new ImageError(400, '"url" parameter is not allowed')
+    }
+  }
   const res = await fetch(href, {
     signal: AbortSignal.timeout(7_000),
+    redirect: 'manual',
   }).catch((err) => err as Error)
 
   if (res instanceof Error) {
@@ -717,6 +752,23 @@ export async function fetchExternalImage(href: string): Promise<ImageUpstream> {
     throw err
   }
 
+  const locationHeader = res.headers.get('Location')
+  if (
+    isRedirect(res.status) &&
+    locationHeader &&
+    URL.canParse(locationHeader, href)
+  ) {
+    if (count === 0) {
+      Log.error('upstream image response had too many redirects', href)
+      throw new ImageError(
+        508,
+        '"url" parameter is valid but upstream response is invalid'
+      )
+    }
+    const redirect = new URL(locationHeader, href).href
+    return fetchExternalImage(redirect, dangerouslyAllowLocalIP, count - 1)
+  }
+
   if (!res.ok) {
     Log.error('upstream image response failed for', href, res.status)
     throw new ImageError(

packages/next/src/server/image-optimizer.ts

@@ -780,7 +780,11 @@ export default class NextNodeServer extends BaseServer<
       const { isAbsolute, href } = paramsResult
 
       const imageUpstream = isAbsolute
-        ? await fetchExternalImage(href)
+        ? await fetchExternalImage(
+            href,
+            this.nextConfig.images.dangerouslyAllowLocalIP,
+            this.nextConfig.images.maximumRedirects
+          )
         : await fetchInternalImage(
             href,
             req.originalRequest,

packages/next/src/server/next-server.ts

@@ -103,6 +103,12 @@ export type ImageConfigComplete = {
   /** @see [Acceptable formats](https://nextjs.org/docs/api-reference/next/image#acceptable-formats) */
   formats: ImageFormat[]
 
+  /** @see [Maximum Redirects](https://nextjs.org/docs/api-reference/next/image#maximumredirects) */
+  maximumRedirects: number
+
+  /** @see [Dangerously Allow Local IP](https://nextjs.org/docs/api-reference/next/image#dangerously-allow-local-ip) */
+  dangerouslyAllowLocalIP: boolean
+
   /** @see [Dangerously Allow SVG](https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg) */
   dangerouslyAllowSVG: boolean
 
@@ -140,6 +146,8 @@ export const imageConfigDefault: ImageConfigComplete = {
   disableStaticImages: false,
   minimumCacheTTL: 14400, // 4 hours
   formats: ['image/webp'],
+  maximumRedirects: 3,
+  dangerouslyAllowLocalIP: false,
   dangerouslyAllowSVG: false,
   contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,
   contentDispositionType: 'attachment',

packages/next/src/shared/lib/image-config.ts

@@ -1275,6 +1275,14 @@ export async function ncc_is_animated(task, opts) {
     .target('src/compiled/is-animated')
 }
 // eslint-disable-next-line camelcase
+externals['is-local-address'] = 'next/dist/compiled/is-local-address'
+export async function ncc_is_local_address(task, opts) {
+  await task
+    .source(relative(__dirname, require.resolve('is-local-address')))
+    .ncc({ packageName: 'is-local-address', externals })
+    .target('src/compiled/is-local-address')
+}
+// eslint-disable-next-line camelcase
 externals['is-docker'] = 'next/dist/compiled/is-docker'
 export async function ncc_is_docker(task, opts) {
   await task
@@ -2349,6 +2357,7 @@ export async function ncc(task, opts) {
         'ncc_http_proxy',
         'ncc_ignore_loader',
         'ncc_is_animated',
+        'ncc_is_local_address',
         'ncc_is_docker',
         'ncc_is_wsl',
         'ncc_json5',