wip: auth

Author: antfu

packages/core/src/client/webcomponents/components/Dock.vue

@@ -64,6 +64,11 @@ function onPointerDown(e: PointerEvent) {
   draggingOffset.y = e.clientY - top - height / 2
 }
 
+const isRpcTrusted = ref(context.rpc.isTrusted)
+context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
+  isRpcTrusted.value = isTrusted
+})
+
 onMounted(() => {
   windowSize.width = window.innerWidth
   windowSize.height = window.innerHeight
@@ -220,7 +225,10 @@ const panelStyle = computed(() => {
 })
 
 onMounted(() => {
-  bringUp()
+  if (context.panel.store.open && !isRpcTrusted.value)
+    context.panel.store.open = false
+  if (isRpcTrusted.value)
+    bringUp()
   recalculateCounter.value++
 })
 </script>
@@ -268,6 +276,13 @@ onMounted(() => {
           class="w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300"
           :class="isMinimized ? 'op100' : 'op0'"
         />
+        <div
+          v-if="!isRpcTrusted"
+          class="p2"
+          :class="isMinimized ? 'opacity-0 pointer-events-none ws-nowrap flex items-center text-sm text-orange' : 'opacity-100'"
+        >
+          IS NOT TRUSTED
+        </div>
         <DockEntries
           :entries="context.docks.entries"
           class="transition duration-200 flex items-center w-full h-full justify-center"

packages/core/src/client/webcomponents/state/docks.ts

@@ -59,11 +59,19 @@ export async function useDocksEntries(rpc: DevToolsRpcClient): Promise<Ref<DevTo
   }
   const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
   async function updateDocksEntries() {
+    if (!rpc.isTrusted) {
+      console.warn('[VITE DEVTOOLS] Untrusted client, skipping docks entries update')
+      return
+    }
     dockEntries.value = (await rpc.call('vite:internal:docks:list'))
       .map(entry => Object.freeze(entry))
     // eslint-disable-next-line no-console
     console.log('[VITE DEVTOOLS] Docks Entries Updated', [...dockEntries.value])
   }
+  rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
+    if (isTrusted)
+      updateDocksEntries()
+  })
   rpc.client.register({
     name: 'vite:internal:docks:updated' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',

packages/core/src/node/rpc/anonymous/auth.ts

@@ -0,0 +1,72 @@
+import * as p from '@clack/prompts'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import c from 'ansis'
+
+export interface DevToolsAuthInput {
+  authId: string
+  ua: string
+}
+
+export interface DevToolsAuthReturn {
+  isTrusted: boolean
+}
+
+const TEMPORARY_STORAGE = new Map<string, {
+  authId: string
+  ua: string
+  timestamp: number
+}>()
+
+export const anonymousAuth = defineRpcFunction({
+  name: 'vite:anonymous:auth',
+  type: 'action',
+  setup: () => {
+    return {
+      handler: async (query: DevToolsAuthInput): Promise<DevToolsAuthReturn> => {
+        if (TEMPORARY_STORAGE.has(query.authId)) {
+          return {
+            isTrusted: true,
+          }
+        }
+
+        const message = [
+          `A browser is requesting permissions to connect to the Vite DevTools.`,
+
+          `User Agent: ${c.yellow(c.bold(query.ua || 'Unknown'))}`,
+          `Identifier: ${c.green(c.bold(query.authId))}`,
+          '',
+          'This will allow the browser to interact with the server, make file changes and run commands.',
+          c.red(c.bold('You should only trust your local development browsers.')),
+        ]
+
+        p.note(
+          c.reset(message.join('\n')),
+          c.bold(c.yellow(' Vite DevTools Permission Request ')),
+        )
+
+        const answer = await p.confirm({
+          message: c.bold(`Do you trust this client (${c.green(c.bold(query.authId))})?`),
+          initialValue: false,
+        })
+
+        if (answer) {
+          TEMPORARY_STORAGE.set(query.authId, {
+            authId: query.authId,
+            ua: query.ua,
+            timestamp: Date.now(),
+          })
+          p.outro(c.green(c.bold('You have granted permissions to this client.')))
+
+          return {
+            isTrusted: true,
+          }
+        }
+
+        p.outro(c.red(c.bold('You have denied permissions to this client.')))
+        return {
+          isTrusted: false,
+        }
+      },
+    }
+  },
+})

packages/core/src/node/rpc/index.ts

@@ -1,4 +1,5 @@
 import type { DevToolsTerminalSessionStreamChunkEvent, RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import { anonymousAuth } from './anonymous/auth'
 import { docksList } from './internal/docks-list'
 import { docksOnLaunch } from './internal/docks-on-launch'
 import { rpcServerList } from './internal/rpc-server-list'
@@ -13,6 +14,10 @@ export const builtinPublicRpcDecalrations = [
   openInFinder,
 ] as const
 
+export const builtinAnonymousRpcDecalrations = [
+  anonymousAuth,
+] as const
+
 // @keep-sorted
 export const builtinInternalRpcDecalrations = [
   docksList,
@@ -24,6 +29,7 @@ export const builtinInternalRpcDecalrations = [
 
 export const builtinRpcDecalrations = [
   ...builtinPublicRpcDecalrations,
+  ...builtinAnonymousRpcDecalrations,
   ...builtinInternalRpcDecalrations,
 ] as const
 

packages/core/src/node/ws.ts

@@ -15,6 +15,8 @@ export interface CreateWsServerOptions {
   context: DevToolsNodeContext
 }
 
+const ANONYMOUS_SCOPE = 'vite:anonymous:'
+
 export async function createWsServer(options: CreateWsServerOptions) {
   const rpcHost = options.context.rpc as unknown as RpcFunctionsHost
   const port = options.portWebSocket ?? await getPort({ port: 7812, random: true })
@@ -46,6 +48,17 @@ export async function createWsServer(options: CreateWsServerOptions) {
           console.error(c.red`⬢ RPC error on executing rpc`)
           console.error(error)
         },
+        resolver(name, fn) {
+          if (name.startsWith(ANONYMOUS_SCOPE))
+            return fn
+
+          if (!this.$meta.isTrusted) {
+            return () => {
+              throw new Error(`Unauthorized access to method ${JSON.stringify(name)}, please trust this client first`)
+            }
+          }
+          return fn
+        },
       },
     },
   )

packages/kit/src/client/docks.ts

@@ -85,4 +85,5 @@ export interface DockEntryStateEvents {
 }
 
 export interface RpcClientEvents {
+  'rpc:is-trusted:updated': (isTrusted: boolean) => void
 }

packages/kit/src/client/rpc.ts

@@ -5,9 +5,13 @@ import type { DevToolsClientContext, DevToolsClientRpcHost, RpcClientEvents } fr
 import { createRpcClient } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/client'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
+import { UAParser } from 'my-ua-parser'
 import { createEventEmitter } from '../utils/events'
+import { nanoid } from '../utils/nanoid'
+import { promiseWithResolver } from '../utils/promise'
 
 const CONNECTION_META_KEY = '__VITE_DEVTOOLS_CONNECTION_META__'
+const CONNECTION_AUTH_ID_KEY = '__VITE_DEVTOOLS_CONNECTION_AUTH_ID__'
 
 function isNumeric(str: string | number | undefined) {
   if (str == null)
@@ -27,10 +31,29 @@ export interface DevToolsRpcClient {
    * The events of the client
    */
   events: EventEmitter<RpcClientEvents>
+
+  /**
+   * Whether the client is trusted
+   */
+  readonly isTrusted: boolean | null
   /**
    * The connection meta
    */
   readonly connectionMeta: ConnectionMeta
+  /**
+   * Return a promise that resolves when the client is trusted
+   *
+   * Rejects with an error if the timeout is reached
+   *
+   * @param timeout - The timeout in milliseconds, default to 60 seconds
+   */
+  ensureTrusted: (timeout?: number) => Promise<boolean>
+
+  /**
+   * Request trust from the server
+   */
+  requestTrust: () => Promise<boolean>
+
   /**
    * Call a RPC function on the server
    */
@@ -49,6 +72,31 @@ export interface DevToolsRpcClient {
   client: DevToolsClientRpcHost
 }
 
+function getConnectionAuthIdFromWindows(): string {
+  const getters = [
+    () => localStorage.getItem(CONNECTION_AUTH_ID_KEY),
+    () => (window as any)?.[CONNECTION_AUTH_ID_KEY],
+    () => (globalThis as any)?.[CONNECTION_AUTH_ID_KEY],
+    () => (parent.window as any)?.[CONNECTION_AUTH_ID_KEY],
+  ]
+
+  for (const getter of getters) {
+    try {
+      const value = getter()
+      if (value) {
+        if (!localStorage.getItem(CONNECTION_AUTH_ID_KEY))
+          localStorage.setItem(CONNECTION_AUTH_ID_KEY, value)
+        return value
+      }
+    }
+    catch {}
+  }
+
+  const uid = nanoid()
+  localStorage.setItem(CONNECTION_AUTH_ID_KEY, uid)
+  return uid
+}
+
 function findConnectionMetaFromWindows(): ConnectionMeta | undefined {
   const getters = [
     () => (window as any)?.[CONNECTION_META_KEY],
@@ -104,6 +152,11 @@ export async function getDevToolsRpcClient(
   const context: DevToolsClientContext = {
     rpc: undefined!,
   }
+  const authId = getConnectionAuthIdFromWindows()
+
+  let isTrusted = false
+  const trustedPromise = promiseWithResolver<boolean>()
+
   const clientRpc: DevToolsClientRpcHost = new RpcFunctionsCollectorBase<DevToolsRpcClientFunctions, DevToolsClientContext>(context)
 
   // Create the RPC client
@@ -118,9 +171,60 @@ export async function getDevToolsRpcClient(
     },
   )
 
+  async function requestTrust() {
+    if (isTrusted)
+      return true
+
+    const info = new UAParser(navigator.userAgent).getResult()
+    const ua = [
+      info.browser.name,
+      info.browser.version,
+      '|',
+      info.os.name,
+      info.os.version,
+      info.device.type,
+    ].filter(i => i).join(' ')
+
+    const result = await serverRpc.$call('vite:anonymous:auth', {
+      authId,
+      ua,
+    })
+
+    isTrusted = result.isTrusted
+    trustedPromise.resolve(isTrusted)
+    events.emit('rpc:is-trusted:updated', isTrusted)
+    return result.isTrusted
+  }
+
+  async function ensureTrusted(timeout = 60_000): Promise<boolean> {
+    if (isTrusted)
+      trustedPromise.resolve(true)
+
+    if (timeout <= 0)
+      return trustedPromise.promise
+
+    let clear = () => {}
+    await Promise.race([
+      trustedPromise.promise.then(clear),
+      new Promise((resolve, reject) => {
+        const id = setTimeout(() => {
+          reject(new Error('[Vite DevTools] Timeout waiting for rpc to be trusted'))
+        }, timeout)
+        clear = () => clearTimeout(id)
+      }),
+    ])
+
+    return isTrusted
+  }
+
   const rpc: DevToolsRpcClient = {
     events,
+    get isTrusted() {
+      return isTrusted
+    },
     connectionMeta,
+    ensureTrusted,
+    requestTrust,
     call: (...args: any): any => {
       // @ts-expect-error casting
       return serverRpc.call(...args)
@@ -138,6 +242,7 @@ export async function getDevToolsRpcClient(
 
   // @ts-expect-error assign to readonly property
   context.rpc = rpc
+  requestTrust()
 
   return rpc
 }

packages/rpc/src/presets/ws/server.ts

@@ -11,6 +11,11 @@ export interface WebSocketRpcServerOptions {
   onDisconnected?: (ws: WebSocket) => void
 }
 
+export interface WebSocketRpcServerChannelMeta {
+  uid: string
+  isTrusted?: boolean
+}
+
 function NOOP() {}
 
 export const createWsRpcPreset: RpcServerPreset<
@@ -54,6 +59,10 @@ export const createWsRpcPreset: RpcServerPreset<
         },
         serialize,
         deserialize,
+        meta: <WebSocketRpcServerChannelMeta>{
+          uid: crypto.randomUUID(),
+          isTrusted: false,
+        },
       }
 
       rpc.updateChannels((channels) => {