feat: add images.remoteURLPatterns option to NetlifyDev (#348)

* feat: add `images.remoteImages` option to `NetlifyDev`

* refactor: rename option

Author: eduardoboucas

packages/dev/src/main.test.ts

@@ -492,6 +492,9 @@ describe('Handling requests', () => {
           // for local images
           enabled: false,
         },
+        images: {
+          remoteURLPatterns: [`^${remoteServerAddress}/allowed-via-option/.*`],
+        },
       })
 
       await dev.start()
@@ -517,6 +520,16 @@ describe('Handling requests', () => {
         await getImageResponseSize(allowedRemoteImageResponse ?? new Response('No @netlify/dev response')),
       ).toMatchObject({ width: 100, height: 50 })
 
+      const allowedRemoteImage2Request = new Request(
+        `https://site.netlify/.netlify/images?url=${encodeURIComponent(`${remoteServerAddress}/allowed-via-option/image`)}&w=100`,
+      )
+      const allowedRemoteImage2Response = await dev.handle(allowedRemoteImage2Request)
+      expect(allowedRemoteImage2Response?.ok).toBe(true)
+      expect(allowedRemoteImage2Response?.headers.get('content-type')).toMatch(/^image\//)
+      expect(
+        await getImageResponseSize(allowedRemoteImage2Response ?? new Response('No @netlify/dev response')),
+      ).toMatchObject({ width: 100, height: 50 })
+
       const notAllowedRemoteImageRequest = new Request(
         `https://site.netlify/.netlify/images?url=${encodeURIComponent(`${remoteServerAddress}/not-allowed/image`)}&w=100`,
       )

packages/dev/src/main.ts

@@ -71,6 +71,15 @@ export interface Features {
    */
   images?: {
     enabled?: boolean
+
+    /**
+     * Allowed URL patterns for remote images, described as an array of regular
+     * expression strings. This list will be merged with  the `remote_images`
+     * configuration property.
+     *
+     * {@link} https://docs.netlify.com/image-cdn/overview/#remote-path
+     */
+    remoteURLPatterns?: string[]
   }
 
   /**
@@ -152,6 +161,7 @@ export class NetlifyDev {
     static: boolean
   }
   #headersHandler?: HeadersHandler
+  #imageRemoteURLPatterns: string[]
   #imageHandler?: ImageHandler
   #logger: Logger
   #projectRoot: string
@@ -184,6 +194,7 @@ export class NetlifyDev {
       static: options.staticFiles?.enabled !== false,
     }
     this.#functionsServePath = path.join(projectRoot, '.netlify', 'functions-serve')
+    this.#imageRemoteURLPatterns = options.images?.remoteURLPatterns ?? []
     this.#logger = options.logger ?? globalThis.console
     this.#serverAddress = options.serverAddress
     this.#projectRoot = projectRoot
@@ -537,8 +548,12 @@ export class NetlifyDev {
     }
 
     if (this.#features.images) {
+      const remoteImages = [...(this.#config?.config?.images?.remote_images ?? []), ...this.#imageRemoteURLPatterns]
+
       this.#imageHandler = new ImageHandler({
-        imagesConfig: this.#config?.config.images,
+        imagesConfig: {
+          remote_images: remoteImages,
+        },
         logger: this.#logger,
       })
     }

packages/images/src/main.test.ts

@@ -311,6 +311,38 @@ describe('`ImageHandler`', () => {
         expect(width / height).toBe(IMAGE_WIDTH / IMAGE_HEIGHT)
       }, 30_000)
 
+      test('allow matching any remote image when using a wildcard pattern', async () => {
+        mockCreateIPXWebServer.mockImplementation(
+          (await vi.importActual<typeof import('ipx')>('ipx')).createIPXWebServer,
+        )
+
+        const imageHandler = new ImageHandler({
+          logger: createMockLogger(),
+          imagesConfig: {
+            remote_images: [`(.*)`],
+          },
+        })
+
+        const requestedWidth = 100
+
+        const url = new URL('/.netlify/images', 'https://netlify.com')
+        url.searchParams.set('url', remoteServerAddress)
+        url.searchParams.set('w', requestedWidth.toString())
+
+        const match = imageHandler.match(new Request(url))
+
+        expect(match).toBeDefined()
+
+        const response = await match!.handle('https://example.netlify')
+
+        expect(response.ok).toBe(true)
+
+        const { width, height } = await getImageResponseSize(response)
+
+        expect(width).toBe(requestedWidth)
+        expect(width / height).toBe(IMAGE_WIDTH / IMAGE_HEIGHT)
+      }, 30_000)
+
       test('does not allow remote images not matching configured patterns', async () => {
         const imageHandler = new ImageHandler({
           logger: createMockLogger(),