Fix leaking internal config to user-defined loader prop in next/image

packages/next/client/image.tsx

@@ -40,13 +40,23 @@ type ImageConfig = ImageConfigComplete & { allSizes: number[] }
 export type ImageLoader = (resolverProps: ImageLoaderProps) => string
 
 export type ImageLoaderProps = {
-  config: Readonly<ImageConfig>
+  config?: Readonly<ImageConfig>
   src: string
   width: number
   quality?: number
 }
 
-const loaders = new Map<LoaderValue, (props: ImageLoaderProps) => string>([
+// Do not export - this is an internal type only
+// because `next.config.js` is only meant for the
+// built-in loaders, not for a custom loader() prop.
+type ImageLoaderPropsWithConfig = ImageLoaderProps & {
+  config: Readonly<ImageConfig>
+}
+
+const loaders = new Map<
+  LoaderValue,
+  (props: ImageLoaderPropsWithConfig) => string
+>([
   ['default', defaultLoader],
   ['imgix', imgixLoader],
   ['cloudinary', cloudinaryLoader],
@@ -269,7 +279,7 @@ function getInt(x: unknown): number | undefined {
   return undefined
 }
 
-function defaultImageLoader(loaderProps: ImageLoaderProps) {
+function defaultImageLoader(loaderProps: ImageLoaderPropsWithConfig) {
   const loaderKey = loaderProps.config?.loader || 'default'
   const load = loaders.get(loaderKey)
   if (load) {
@@ -357,7 +367,6 @@ export default function Image({
   objectPosition,
   onLoadingComplete,
   onError,
-  loader = defaultImageLoader,
   placeholder = 'empty',
   blurDataURL,
   ...all
@@ -376,8 +385,23 @@ export default function Image({
     // Override default layout if the user specified one:
     if (rest.layout) layout = rest.layout
 
-    // Remove property so it's not spread into image:
-    delete rest['layout']
+    // Remove property so it's not spread on <img>:
+    delete rest.layout
+  }
+
+  let loader = defaultImageLoader as ImageLoader
+  if ('loader' in rest) {
+    if (rest.loader) {
+      const customImageLoader = rest.loader
+      loader = (obj) => {
+        // The config object is internal only so we must
+        // delete before invoking the user-defined loader()
+        delete obj.config
+        return customImageLoader(obj)
+      }
+    }
+    // Remove property so it's not spread on <img>
+    delete rest.loader
   }
 
   let staticSrc = ''
@@ -957,7 +981,7 @@ function imgixLoader({
   src,
   width,
   quality,
-}: ImageLoaderProps): string {
+}: ImageLoaderPropsWithConfig): string {
   // Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
   const url = new URL(`${config.path}${normalizeSrc(src)}`)
   const params = url.searchParams
@@ -973,7 +997,11 @@ function imgixLoader({
   return url.href
 }
 
-function akamaiLoader({ config, src, width }: ImageLoaderProps): string {
+function akamaiLoader({
+  config,
+  src,
+  width,
+}: ImageLoaderPropsWithConfig): string {
   return `${config.path}${normalizeSrc(src)}?imwidth=${width}`
 }
 
@@ -982,7 +1010,7 @@ function cloudinaryLoader({
   src,
   width,
   quality,
-}: ImageLoaderProps): string {
+}: ImageLoaderPropsWithConfig): string {
   // Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
   const params = ['f_auto', 'c_limit', 'w_' + width, 'q_' + (quality || 'auto')]
   const paramsString = params.join(',') + '/'
@@ -1001,7 +1029,7 @@ function defaultLoader({
   src,
   width,
   quality,
-}: ImageLoaderProps): string {
+}: ImageLoaderPropsWithConfig): string {
   if (process.env.NODE_ENV !== 'production') {
     const missingValues = []
 

test/integration/image-component/basic/pages/loader-prop.js

@@ -0,0 +1,23 @@
+import Image from 'next/image'
+
+const LoaderExample = () => {
+  return (
+    <div>
+      <p>Custom loader in both next.config.js and loader prop</p>
+      <Image
+        id="loader-prop-img"
+        src="foo.jpg"
+        width={300}
+        height={400}
+        loader={({ config, src, width }) => {
+          if (config) {
+            return 'https://example.vercel.sh/error-unexpected-config'
+          }
+          return `https://example.vercel.sh/success/${src}?width=${width}`
+        }}
+      />
+    </div>
+  )
+}
+
+export default LoaderExample

test/integration/image-component/basic/test/index.test.js

@@ -317,6 +317,17 @@ describe('Image Component Tests', () => {
         await browser.elementById('basic-image').getAttribute('data-nimg')
       ).toBe('intrinsic')
     })
+    it('should not pass config to custom loader prop', async () => {
+      browser = await webdriver(appPort, '/loader-prop')
+      expect(
+        await browser.elementById('loader-prop-img').getAttribute('src')
+      ).toBe('https://example.vercel.sh/success/foo.jpg?width=1024')
+      expect(
+        await browser.elementById('loader-prop-img').getAttribute('srcset')
+      ).toBe(
+        'https://example.vercel.sh/success/foo.jpg?width=480 1x, https://example.vercel.sh/success/foo.jpg?width=1024 2x'
+      )
+    })
   })
   describe('Client-side Image Component Tests', () => {
     beforeAll(async () => {