fix(theme): validate host header for app extension dev server

Author: EvilGenius13

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

@@ -0,0 +1,54 @@
+import {createError, defineEventHandler, sendError} from 'h3'
+
+function createAllowedHostsSet(host: string, port: number): Set<string> {
+  const allowedHosts = new Set<string>()
+  const portSuffix = `:${port}`
+  const normalizedHost = host.toLowerCase().trim()
+
+  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}`)
+  }
+
+  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)
+
+  return defineEventHandler((event) => {
+    const hostHeader = event.node.req.headers.host
+    const normalizedHost = normalizeHostHeader(hostHeader)
+
+    if (!normalizedHost || !allowedHosts.has(normalizedHost)) {
+      return sendError(
+        event,
+        createError({
+          statusCode: 400,
+          statusMessage: 'Bad Request',
+          message: 'Invalid Host header',
+        }),
+      )
+    }
+  })
+}

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

@@ -3,20 +3,13 @@ import {getHtmlHandler} from './html.js'
 import {getAssetsHandler} from './local-assets.js'
 import {getProxyHandler} from './proxy.js'
 import {reconcileAndPollThemeEditorChanges} from './remote-theme-watcher.js'
+import {createHostValidationHandler} from './host-validation.js'
 import {uploadTheme} from '../theme-uploader.js'
 import {renderTasksToStdErr} from '../theme-ui.js'
 import {renderThrownError} from '../errors.js'
 import {promiseWithResolvers} from '../../polyfills/promiseWithResolvers.js'
 
-import {
-  createApp,
-  defineEventHandler,
-  defineLazyEventHandler,
-  toNodeListener,
-  handleCors,
-  sendError,
-  createError,
-} from 'h3'
+import {createApp, defineEventHandler, defineLazyEventHandler, toNodeListener, handleCors} from 'h3'
 import {fetchChecksums} from '@shopify/cli-kit/node/themes/api'
 
 import {createServer} from 'node:http'
@@ -136,31 +129,6 @@ interface DevelopmentServerInstance {
   close: () => Promise<void>
 }
 
-function createAllowedHostsSet(host: string, port: string): Set<string> {
-  const allowedHosts = new Set<string>()
-  const portSuffix = `:${port}`
-  const normalizedHost = host.toLowerCase().trim()
-
-  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}`)
-  }
-
-  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|$)/, '')
-}
-
 function createDevelopmentServer(theme: Theme, ctx: DevServerContext, initialWork: Promise<void>) {
   const app = createApp()
   const allowedOrigins = [
@@ -169,26 +137,8 @@ function createDevelopmentServer(theme: Theme, ctx: DevServerContext, initialWor
     // Required for HMR with the theme editor
     'https://online-store-web.shopifyapps.com',
   ]
-  const allowedHosts = createAllowedHostsSet(ctx.options.host, ctx.options.port)
 
-  // Host header validation
-  app.use(
-    defineEventHandler((event) => {
-      const hostHeader = event.node.req.headers.host
-      const normalizedHost = normalizeHostHeader(hostHeader)
-
-      if (!normalizedHost || !allowedHosts.has(normalizedHost)) {
-        return sendError(
-          event,
-          createError({
-            statusCode: 400,
-            statusMessage: 'Bad Request',
-            message: 'Invalid Host header',
-          }),
-        )
-      }
-    }),
-  )
+  app.use(createHostValidationHandler(ctx.options.host, ctx.options.port))
 
   app.use(
     defineLazyEventHandler(async () => {

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

@@ -0,0 +1,122 @@
+import {createDevelopmentExtensionServer} from './theme-ext-server.js'
+import {DevServerContext} from '../theme-environment/types.js'
+import {emptyThemeExtFileSystem, emptyThemeFileSystem} from '../theme-fs-empty.js'
+
+import {DEVELOPMENT_THEME_ROLE} from '@shopify/cli-kit/node/themes/utils'
+import {buildTheme} from '@shopify/cli-kit/node/themes/factories'
+import {describe, expect, test} from 'vitest'
+import {createEvent} from 'h3'
+
+import {IncomingMessage, ServerResponse} from 'node:http'
+import {Socket} from 'node:net'
+
+describe('createDevelopmentExtensionServer', () => {
+  const decoder = new TextDecoder()
+
+  const createH3Event = (options: {url: string; headers?: Record<string, string>}) => {
+    const req = new IncomingMessage(new Socket())
+    req.url = options.url
+    if (options.headers) req.headers = options.headers
+    const res = new ServerResponse(req)
+    return createEvent(req, res)
+  }
+
+  const dispatchEvent = async (
+    server: ReturnType<typeof createDevelopmentExtensionServer>,
+    url: string,
+    headers?: Record<string, string>,
+  ): Promise<{res: ServerResponse; status: number; body: string | Buffer}> => {
+    const event = createH3Event({url, headers})
+    const {res} = event.node
+    let body = ''
+    const resWrite = res.write.bind(res)
+    res.write = (chunk) => {
+      body ??= ''
+      body += decoder.decode(chunk)
+      return resWrite(chunk)
+    }
+    const resEnd = res.end.bind(res)
+    res.end = (content) => {
+      if (!body) body = content ?? ''
+      return resEnd(content)
+    }
+
+    await server.dispatch(event)
+
+    if (!body && '_data' in res) {
+      // eslint-disable-next-line require-atomic-updates
+      body = await new Response(res._data as ReadableStream).text()
+    }
+
+    return {res, status: res.statusCode, body}
+  }
+
+  const developmentTheme = buildTheme({id: 1, name: 'Theme', role: DEVELOPMENT_THEME_ROLE})!
+
+  const defaultServerContext: DevServerContext = {
+    session: {
+      storefrontToken: 'shptka_test_token_123',
+      token: '',
+      storeFqdn: 'my-store.myshopify.com',
+      sessionCookies: {_shopify_essential: 'test-cookie-value'},
+    },
+    lastRequestedPath: '',
+    localThemeFileSystem: emptyThemeFileSystem(),
+    localThemeExtensionFileSystem: emptyThemeExtFileSystem(),
+    directory: 'tmp',
+    type: 'theme-extension',
+    options: {
+      ignore: [],
+      only: [],
+      noDelete: false,
+      host: '127.0.0.1',
+      port: 9293,
+      liveReload: 'hot-reload',
+      open: false,
+      themeEditorSync: false,
+      errorOverlay: 'default',
+    },
+  }
+
+  describe('DNS rebinding protection', () => {
+    const context = {...defaultServerContext}
+    const server = createDevelopmentExtensionServer(developmentTheme, context)
+
+    test.each([
+      ['localhost:9293', 'localhost variant'],
+      ['127.0.0.1:9293', 'IPv4 loopback'],
+      ['[::1]:9293', 'IPv6 loopback'],
+      ['LOCALHOST:9293', 'case insensitive'],
+      ['localhost.:9293', 'trailing dot with port'],
+    ])('accepts %s (%s)', async (host) => {
+      const response = await dispatchEvent(server, '/wpm@something', {host})
+      expect(response.status).not.toBe(400)
+      expect(response.status).toBe(204)
+    })
+
+    test.each([
+      ['attacker.com:9293', 'attacker domain'],
+      ['poc.mzero.cloud:9293', 'DNS rebinding domain'],
+      ['localhost:1234', 'wrong port'],
+    ])('rejects %s (%s)', async (host) => {
+      const response = await dispatchEvent(server, '/', {host})
+      expect(response.status).toBe(400)
+    })
+
+    test('rejects requests with missing Host header', async () => {
+      const response = await dispatchEvent(server, '/')
+      expect(response.status).toBe(400)
+    })
+
+    test('accepts requests when --host flag is uppercase (LOCALHOST)', async () => {
+      const uppercaseHostContext = {
+        ...defaultServerContext,
+        options: {...defaultServerContext.options, host: 'LOCALHOST'},
+      }
+      const uppercaseServer = createDevelopmentExtensionServer(developmentTheme, uppercaseHostContext)
+      const response = await dispatchEvent(uppercaseServer, '/wpm@something', {host: 'localhost:9293'})
+      expect(response.status).not.toBe(400)
+      expect(response.status).toBe(204)
+    })
+  })
+})

packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts

@@ -4,6 +4,7 @@ import {getHtmlHandler} from '../theme-environment/html.js'
 import {getAssetsHandler} from '../theme-environment/local-assets.js'
 import {getProxyHandler} from '../theme-environment/proxy.js'
 import {getHotReloadHandler, triggerHotReload} from '../theme-environment/hot-reload/server.js'
+import {createHostValidationHandler} from '../theme-environment/host-validation.js'
 import {emptyThemeFileSystem} from '../theme-fs-empty.js'
 import {initializeDevServerSession} from '../theme-environment/dev-server-session.js'
 import {createApp, toNodeListener} from 'h3'
@@ -36,6 +37,7 @@ export async function initializeDevelopmentExtensionServer(theme: Theme, devExt:
 export function createDevelopmentExtensionServer(theme: Theme, ctx: DevServerContext) {
   const app = createApp()
 
+  app.use(createHostValidationHandler(ctx.options.host, ctx.options.port))
   app.use(getHotReloadHandler(theme, ctx))
   app.use(getAssetsHandler(theme, ctx))
   app.use(getProxyHandler(theme, ctx))