fix(theme): allow LAN access when theme dev binds to a wildcard host

Author: EvilGenius13

packages/theme/src/cli/utilities/theme-environment/host-validation.test.ts

@@ -0,0 +1,95 @@
+import {createHostValidationHandler} from './host-validation.js'
+
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+import {createEvent} from 'h3'
+
+import {networkInterfaces} from 'node:os'
+import {IncomingMessage, ServerResponse} from 'node:http'
+import {Socket} from 'node:net'
+
+vi.mock('node:os', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('node:os')>()
+  return {...actual, networkInterfaces: vi.fn()}
+})
+
+const dispatchHost = async (
+  handler: ReturnType<typeof createHostValidationHandler>,
+  host?: string,
+): Promise<number> => {
+  const req = new IncomingMessage(new Socket())
+  req.url = '/'
+  if (host !== undefined) req.headers = {host}
+  const res = new ServerResponse(req)
+  const event = createEvent(req, res)
+
+  await handler(event)
+
+  return res.statusCode
+}
+
+describe('createHostValidationHandler', () => {
+  describe('loopback bind', () => {
+    const handler = createHostValidationHandler('127.0.0.1', 9292)
+
+    test.each([['localhost:9292'], ['127.0.0.1:9292'], ['[::1]:9292'], ['LOCALHOST:9292'], ['localhost.:9292']])(
+      'accepts %s',
+      async (host) => {
+        const status = await dispatchHost(handler, host)
+        expect(status).not.toBe(400)
+      },
+    )
+
+    test.each([['attacker.com:9292'], ['localhost:1234'], ['127.0.0.1']])('rejects %s', async (host) => {
+      const status = await dispatchHost(handler, host)
+      expect(status).toBe(400)
+    })
+
+    test('rejects missing host header', async () => {
+      const status = await dispatchHost(handler)
+      expect(status).toBe(400)
+    })
+  })
+
+  describe('wildcard bind', () => {
+    beforeEach(() => {
+      vi.mocked(networkInterfaces).mockReturnValue({
+        en0: [
+          {
+            address: '192.168.1.50',
+            netmask: '255.255.255.0',
+            family: 'IPv4',
+            mac: '00:00:00:00:00:00',
+            internal: false,
+            cidr: '192.168.1.50/24',
+          },
+        ],
+      } as ReturnType<typeof networkInterfaces>)
+    })
+
+    const buildHandler = () => createHostValidationHandler('0.0.0.0', 9292)
+
+    test.each([['192.168.1.50:9292'], ['127.0.0.1:9292'], ['[::1]:9292']])('accepts %s', async (host) => {
+      const status = await dispatchHost(buildHandler(), host)
+      expect(status).not.toBe(400)
+    })
+
+    test.each([['192.168.1.50:1234'], ['attacker.com:9292']])('rejects %s', async (host) => {
+      const status = await dispatchHost(buildHandler(), host)
+      expect(status).toBe(400)
+    })
+  })
+
+  describe('non-wildcard LAN bind', () => {
+    const handler = createHostValidationHandler('192.168.1.50', 9292)
+
+    test.each([['192.168.1.50:9292']])('accepts %s', async (host) => {
+      const status = await dispatchHost(handler, host)
+      expect(status).not.toBe(400)
+    })
+
+    test.each([['192.168.1.99:9292']])('rejects %s', async (host) => {
+      const status = await dispatchHost(handler, host)
+      expect(status).toBe(400)
+    })
+  })
+})

packages/theme/src/cli/utilities/theme-environment/host-validation.ts

@@ -1,4 +1,5 @@
 import {createError, defineEventHandler, sendError} from 'h3'
+import * as os from 'node:os'
 
 function createAllowedHostsSet(host: string, port: number): Set<string> {
   const allowedHosts = new Set<string>()
@@ -7,32 +8,34 @@ function createAllowedHostsSet(host: string, port: number): Set<string> {
 
   allowedHosts.add(`${normalizedHost}${portSuffix}`)
 
-  // When binding to localhost variants or 0.0.0.0, allow all localhost forms
   const localhostVariants = ['localhost', '127.0.0.1', '::1', '0.0.0.0']
   if (localhostVariants.includes(normalizedHost)) {
     allowedHosts.add(`localhost${portSuffix}`)
     allowedHosts.add(`127.0.0.1${portSuffix}`)
     allowedHosts.add(`[::1]${portSuffix}`)
   }
 
+  // When binding to a wildcard address, the server is also reachable through the machine's
+  // interface IPs (e.g. a LAN address like 192.168.x.x from another device on the network).
+  if (normalizedHost === '0.0.0.0' || normalizedHost === '::') {
+    for (const interfaces of Object.values(os.networkInterfaces())) {
+      for (const iface of interfaces ?? []) {
+        const address = iface.address.toLowerCase().split('%')[0]
+        const isIPv6 = iface.family === 'IPv6'
+        const formatted = isIPv6 ? `[${address}]` : address
+        allowedHosts.add(`${formatted}${portSuffix}`)
+      }
+    }
+  }
+
   return allowedHosts
 }
 
 function normalizeHostHeader(hostHeader: string | undefined): string | undefined {
   if (!hostHeader) return undefined
-  // Lowercase, then strip trailing dot before port (or at end for plain hostname).
-  // IPv6 brackets: trailing dot would be after `]`, e.g. [::1].:9292
   return hostHeader.toLowerCase().replace(/\.(?=:\d|$)/, '')
 }
 
-/**
- * Creates an h3 event handler that validates the request's Host header
- * against an allowlist of configured host/port and localhost variants.
- *
- * Used to mitigate DNS rebinding attacks on local dev servers.
- *
- * Returns a 400 Bad Request when the Host header is missing or not in the allowlist.
- */
 export function createHostValidationHandler(host: string, port: number) {
   const allowedHosts = createAllowedHostsSet(host, port)
 
@@ -43,11 +46,7 @@ export function createHostValidationHandler(host: string, port: number) {
     if (!normalizedHost || !allowedHosts.has(normalizedHost)) {
       return sendError(
         event,
-        createError({
-          statusCode: 400,
-          statusMessage: 'Bad Request',
-          message: 'Invalid Host header',
-        }),
+        createError({statusCode: 400, statusMessage: 'Bad Request', message: 'Invalid Host header'}),
       )
     }
   })

packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts

@@ -300,7 +300,10 @@ describe('setupDevServer', () => {
     })
 
     test('CORS allows the theme editor (Online Store Editor) origin so hot reload works in the editor', async () => {
-      const {res} = await dispatchEvent(server, '/assets/file2.css', {host: defaultHost, origin: 'https://online-store-web.shopifyapps.com'})
+      const {res} = await dispatchEvent(server, '/assets/file2.css', {
+        host: defaultHost,
+        origin: 'https://online-store-web.shopifyapps.com',
+      })
       expect(res.getHeader('access-control-allow-origin')).toEqual('https://online-store-web.shopifyapps.com')
     })
 
@@ -311,7 +314,10 @@ describe('setupDevServer', () => {
     })
 
     test('CORS does not allow unknown origins', async () => {
-      const {res} = await dispatchEvent(server, '/assets/file2.css', {host: defaultHost, origin: 'https://evil.example.com'})
+      const {res} = await dispatchEvent(server, '/assets/file2.css', {
+        host: defaultHost,
+        origin: 'https://evil.example.com',
+      })
       expect(res.getHeader('access-control-allow-origin')).toBeUndefined()
     })