fix(onboard): install only from this machine, on devframe v1.2.5

packages/devtools-onboard/README.md

@@ -7,6 +7,8 @@ The entry point of [Nuxt DevTools](https://devtools.nuxt.com). It is a tiny Nuxt
 
 Nothing is injected outside `nuxt dev`.
 
+The button installs only for a browser on the machine that runs `nuxt dev`. Other devices can reach a dev server bound to the network (for example with `--host`), or through a tunnel. There the install is refused, and the panel shows the command to run yourself.
+
 ## Turning it off
 
 - `devtools: false` (or `devtools: { enabled: false }`) in `nuxt.config` disables both the button and DevTools.

packages/devtools-onboard/src/module.ts

@@ -3,6 +3,10 @@ import { fileURLToPath } from 'node:url'
 import { createOnboarding } from '@devframes/hub-ui-onboard'
 import { defineNuxtModule, installModule, tryResolveModule } from '@nuxt/kit'
 import { readPackageJSON } from 'pkg-types'
+import { fromThisMachine } from './this-machine'
+
+/** Where Vite DevTools mounts the hub, so after the restart the real `embedded.js` answers at the URL the button was loaded from. */
+const BASE = '/__devtools/'
 
 const DEVTOOLS = '@nuxt/devtools'
 const DEVTOOLS_NIGHTLY = `${DEVTOOLS}-nightly`
@@ -58,18 +62,22 @@ export default defineNuxtModule({
 
     const onboarding = createOnboarding({
       cwd: nuxt.options.rootDir,
-      // Where Vite DevTools mounts the hub, so after the restart the real
-      // `embedded.js` answers at the URL the button was loaded from.
-      base: '/__devtools/',
+      base: BASE,
       packages: [await devtoolsSpec()],
       branding: {
         productName: 'Nuxt DevTools',
         primaryColor: '#099e61',
         logo: 'https://nuxt.com/assets/design-kit/icon-green.svg',
       },
       messages: {
+        confirming: 'Installing…',
+        refused: 'Install from a browser on the machine that runs nuxt dev, or run the command above yourself.',
         restart: 'Installed. Restarting the dev server…',
       },
+      // The middleware below refuses other devices, so a click from this
+      // machine is the developer's consent. The default y/N prompt reads
+      // stdin, which nuxi keeps for its own shortcuts and TUI.
+      onConfirm: () => true,
       onInstalled() {
         // A Nuxt module only mounts during setup, so the dev server has to
         // start over. Delay past the install response so the panel can show
@@ -79,8 +87,17 @@ export default defineNuxtModule({
     })
 
     nuxt.hook('vite:serverCreated', (server, { isClient }) => {
-      if (isClient)
-        server.middlewares.use(onboarding.nodeMiddleware)
+      if (!isClient)
+        return
+      server.middlewares.use((req, res, next) => {
+        // Same prefix test as `nodeMiddleware`, so no spelling of its POST routes slips past.
+        if (req.method !== 'GET' && req.method !== 'HEAD' && req.url?.startsWith(BASE) && !fromThisMachine(req)) {
+          res.statusCode = 403
+          res.end()
+          return
+        }
+        onboarding.nodeMiddleware(req, res, next)
+      })
     })
     if (!onboarding.disabled)
       (nuxt.options.app.head.script ??= []).push({ type: 'module', src: onboarding.scriptSrc, tagPosition: 'bodyClose' })

packages/devtools-onboard/src/this-machine.ts

@@ -0,0 +1,12 @@
+const LOOPBACK_ADDRESS_RE = /^(?:127(?:\.\d{1,3}){3}|::1|::ffff:127(?:\.\d{1,3}){3})$/
+const LOCAL_HOST_RE = /^(?:(?:[a-z\d-]+\.)*localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::\d+)?$/i
+
+/**
+ * Whether the request comes from a browser on the machine that runs the dev
+ * server. The socket must be loopback, which another device cannot fake, and
+ * the `Host` a local name, so a tunnel or proxy on this machine that keeps
+ * its public host does not count either.
+ */
+export function fromThisMachine(req: { socket: { remoteAddress?: string }, headers: { host?: string } }): boolean {
+  return LOOPBACK_ADDRESS_RE.test(req.socket.remoteAddress ?? '') && LOCAL_HOST_RE.test(req.headers.host ?? '')
+}

packages/devtools-onboard/test/module.test.ts

@@ -1,12 +1,12 @@
 import type { Nuxt, NuxtConfig } from '@nuxt/schema'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises'
-import { createServer } from 'node:http'
+import { createServer, request } from 'node:http'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { loadNuxt } from 'nuxt'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 const onboardModule = fileURLToPath(new URL('../src/module.ts', import.meta.url))
 
@@ -58,7 +58,8 @@ function onboardScripts(nuxt: Nuxt) {
 
 type Middleware = (req: IncomingMessage, res: ServerResponse, next: () => void) => void
 
-async function viteMiddlewareFetch(nuxt: Nuxt, path: string): Promise<Response> {
+/** Serves what the module mounts on the client Vite server; resolves to its origin. */
+async function serveViteMiddleware(nuxt: Nuxt): Promise<string> {
   const mounted: Middleware[] = []
   // Only `middlewares.use` is read; the rest of a real ViteDevServer is irrelevant here.
   const viteServer = { middlewares: { use: (fn: Middleware) => mounted.push(fn) } } as never
@@ -74,7 +75,19 @@ async function viteMiddlewareFetch(nuxt: Nuxt, path: string): Promise<Response>
   await new Promise<void>(resolve => server.listen(0, '127.0.0.1', resolve))
   cleanups.push(() => new Promise(resolve => server.close(() => resolve())))
   const { port } = server.address() as { port: number } // listening on a TCP port, never a pipe
-  return fetch(`http://127.0.0.1:${port}${path}`)
+  return `http://127.0.0.1:${port}`
+}
+
+const onboardStatus = (origin: string) => fetch(`${origin}/__devtools/__onboard/status`).then(r => r.json())
+
+/** `fetch` always sends the real `Host`; a tunnel on this machine forwards its public one. */
+function postWithHost(url: string, host: string): Promise<number | undefined> {
+  return new Promise((resolve, reject) => {
+    request(url, { method: 'POST', headers: { host } }, (res) => {
+      res.resume()
+      resolve(res.statusCode)
+    }).on('error', reject).end()
+  })
 }
 
 describe('@nuxt/devtools-onboard', () => {
@@ -101,14 +114,37 @@ describe('@nuxt/devtools-onboard', () => {
     expect(nuxt.options._requiredModules['@nuxt/devtools']).toBeUndefined()
     expect(onboardScripts(nuxt)).toHaveLength(1)
 
-    const status = await viteMiddlewareFetch(nuxt, '/__devtools/__onboard/status').then(r => r.json())
+    const status = await onboardStatus(await serveViteMiddleware(nuxt))
     expect(status.state).toBe('idle')
     // No lockfile in the fixture, so the package manager falls back to npm.
     expect(status.command.slice(0, 3)).toEqual(['npm', 'i', '-D'])
     expect(status.command[3]).toMatch(/^@nuxt\/devtools@\^4\./)
     expect(status.branding.productName).toBe('Nuxt DevTools')
   }, 60_000)
 
+  it('installs on one click from this machine', async () => {
+    const nuxt = await bootNuxt({ dev: true }, { withoutDevtools: true })
+    // Offline with an empty cache, so the install fails fast instead of downloading DevTools.
+    vi.stubEnv('npm_config_offline', 'true')
+    vi.stubEnv('npm_config_cache', join(nuxt.options.rootDir, '.npm-cache'))
+    cleanups.push(async () => {
+      vi.unstubAllEnvs()
+    })
+    const origin = await serveViteMiddleware(nuxt)
+
+    const install = await fetch(`${origin}/__devtools/__onboard/install`, { method: 'POST' })
+    expect(install.status).toBe(202)
+    await vi.waitFor(async () => expect((await onboardStatus(origin)).state).toBe('error'), { timeout: 30_000, interval: 200 })
+  }, 60_000)
+
+  it('refuses an install that does not come from this machine', async () => {
+    const nuxt = await bootNuxt({ dev: true }, { withoutDevtools: true })
+    const origin = await serveViteMiddleware(nuxt)
+
+    expect(await postWithHost(`${origin}/__devtools/__onboard/install`, 'my-app.trycloudflare.com')).toBe(403)
+    expect((await onboardStatus(origin)).state).toBe('idle')
+  }, 60_000)
+
   it('stays out of the way outside nuxt dev when @nuxt/devtools is missing', async () => {
     const nuxt = await bootNuxt({ dev: false }, { withoutDevtools: true })
     expect(onboardScripts(nuxt)).toHaveLength(0)

packages/devtools-onboard/test/this-machine.test.ts

@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest'
+import { fromThisMachine } from '../src/this-machine'
+
+it.each([
+  ['127.0.0.1', 'localhost:3000', true],
+  ['::1', '[::1]:3000', true],
+  ['::ffff:127.0.0.1', '127.0.0.1:3000', true],
+  ['127.0.0.1', 'my-app.localhost', true],
+  // Another device, even when it claims a local host
+  ['192.168.1.20', 'localhost:3000', false],
+  ['::ffff:192.168.1.20', '192.168.1.5:3000', false],
+  // A tunnel or proxy on this machine that keeps its public host
+  ['127.0.0.1', 'my-app.trycloudflare.com', false],
+  ['127.0.0.1', '192.168.1.5:3000', false],
+  ['127.0.0.1', 'localhost.example.com', false],
+  ['127.0.0.1', undefined, false],
+])('socket %s with Host %s is from this machine: %s', (remoteAddress, host, expected) => {
+  expect(fromThisMachine({ socket: { remoteAddress }, headers: { host } })).toBe(expected)
+})