Add support for wildcard patterns in image.domains

packages/next/client/image.tsx

@@ -583,7 +583,23 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
         )
       }
 
-      if (!configDomains.includes(parsedSrc.hostname)) {
+      if (
+        !configDomains.some((domain) => {
+          if (domain.includes('*')) {
+            const domainExpr = new RegExp(
+              '^' +
+                domain
+                  .split(/\*+/)
+                  .map((s) => s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'))
+                  .join('.*') +
+                '$'
+            )
+            return domainExpr.test(parsedSrc.hostname)
+          } else {
+            return parsedSrc.hostname === domain
+          }
+        })
+      ) {
         throw new Error(
           `Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` +
             `See more info: https://err.sh/nextjs/next-image-unconfigured-host`

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

@@ -86,7 +86,23 @@ export async function imageOptimizer(
       return { finished: true }
     }
 
-    if (!domains.includes(hrefParsed.hostname)) {
+    if (
+      !domains.some((domain) => {
+        if (domain.includes('*')) {
+          const domainExpr = new RegExp(
+            '^' +
+              domain
+                .split(/\*+/)
+                .map((s) => s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'))
+                .join('.*') +
+              '$'
+          )
+          return domainExpr.test(hrefParsed.hostname)
+        } else {
+          return hrefParsed.hostname === domain
+        }
+      })
+    ) {
       res.statusCode = 400
       res.end('"url" parameter is not allowed')
       return { finished: true }

test/integration/image-domain-pattern/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['*.placeholder.com'],
+  },
+}

test/integration/image-domain-pattern/pages/invalid.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Invalid = () => {
+  return (
+    <div>
+      <Image src="https://via.invalid.com/500" width={500} height={500} />
+      <p id="stubtext">This is a page with errors</p>
+    </div>
+  )
+}
+
+export default Invalid

test/integration/image-domain-pattern/pages/valid.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <Image src="https://via.placeholder.com/500" width={500} height={500} />
+      <p>This is a valid domain</p>
+    </div>
+  )
+}
+
+export default Page

test/integration/image-domain-pattern/test/index.test.js

@@ -0,0 +1,32 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { renderViaHTTP, findPort, launchApp, killApp } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+
+describe('Image Component Domain Pattern', () => {
+  describe('next dev', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    it('should render the valid Image usage and not print error', async () => {
+      const html = await renderViaHTTP(appPort, '/valid', {})
+      expect(html).toMatch(/This is a valid domain/)
+      expect(html).not.toMatch(/hostname .* is not configured under images/)
+    })
+
+    it('should print error when invalid Image usage', async () => {
+      const html = await renderViaHTTP(appPort, '/invalid', {})
+      expect(html).toMatch(/hostname .* is not configured under images/)
+      expect(html).not.toMatch(/This is a page with errors/)
+    })
+  })
+})

test/integration/image-optimizer/test/index.test.js

@@ -564,4 +564,37 @@ describe('Image Optimizer', () => {
       expect(res.status).toBe(404)
     })
   })
+
+  describe('dev support next.config.js domains pattern', () => {
+    beforeAll(async () => {
+      const json = JSON.stringify({
+        images: {
+          domains: ['*.placeholder.com'],
+        },
+      })
+      nextConfig.replace('{ /* replaceme */ }', json)
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+      nextConfig.restore()
+      await fs.remove(imagesDir)
+    })
+    it('should 200 when correct domain is used', async () => {
+      const size = 384 // defaults defined in server/config.ts
+      const query = { w: size, q: 90, url: 'https://via.placeholder.com/500' }
+      const opts = { headers: { accept: 'image/webp' } }
+      const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
+      expect(res.status).toBe(200)
+    })
+
+    it('should 400 when invalid domain is used', async () => {
+      const size = 384 // defaults defined in server/config.ts
+      const query = { w: size, q: 90, url: 'https://via.invalid.com/500' }
+      const opts = { headers: { accept: 'image/webp' } }
+      const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
+      expect(res.status).toBe(400)
+    })
+  })
 })