wip:

Author: antfu

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0-alpha.19",
   "private": true,
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.25.0",
   "scripts": {
     "build": "pnpm -r run build",
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",

packages/core/package.json

@@ -70,6 +70,7 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@clack/prompts": "catalog:inlined",
     "@vitejs/devtools": "workspace:*",
     "@vitejs/devtools-vite": "workspace:*",
     "@vitejs/plugin-vue": "catalog:build",

packages/core/src/client/inject/index.ts

@@ -10,7 +10,7 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Client injected')
 
-  const rpcReturn = await getDevToolsRpcClient()
+  const rpc = await getDevToolsRpcClient()
 
   const state = useLocalStorage<DockPanelStorage>(
     'vite-devtools-dock-state',
@@ -28,7 +28,7 @@ export async function init(): Promise<void> {
 
   const context = await createDocksContext(
     'embedded',
-    rpcReturn,
+    rpc,
     state,
   )
 

packages/core/src/client/webcomponents/.generated/css.ts

@@ -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,9 @@ const panelStyle = computed(() => {
 })
 
 onMounted(() => {
-  if (context.rpc.isTrusted)
+  if (context.panel.store.open && !isRpcTrusted.value)
+    context.panel.store.open = false
+  if (isRpcTrusted.value)
     bringUp()
   recalculateCounter.value++
 })
@@ -269,7 +276,11 @@ 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="!context.rpc.isTrusted" class="p2">
+        <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

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

@@ -68,6 +68,10 @@ export async function useDocksEntries(rpc: DevToolsRpcClient): Promise<Ref<DevTo
     // 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/client/webcomponents/state/docks.ts

@@ -1,4 +1,6 @@
+import * as p from '@clack/prompts'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
+import c from 'ansis'
 
 export interface DevToolsAuthInput {
   authId: string
@@ -9,13 +11,58 @@ 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: (context) => {
+  setup: () => {
     return {
-      handler: (query: DevToolsAuthInput): DevToolsAuthReturn => {
-        // TODO: Implement the auth logic
+      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/anonymous/auth.ts

@@ -45,6 +45,7 @@
     "birpc-x": "catalog:deps"
   },
   "devDependencies": {
+    "my-ua-parser": "catalog:frontend",
     "tsdown": "catalog:build",
     "vite": "catalog:build"
   }

packages/kit/package.json

@@ -83,3 +83,7 @@ export interface DockEntryStateEvents {
   'dom:panel:mounted': (panel: HTMLDivElement) => void
   'dom:iframe:mounted': (iframe: HTMLIFrameElement) => void
 }
+
+export interface RpcClientEvents {
+  'rpc:is-trusted:updated': (isTrusted: boolean) => void
+}

packages/kit/src/client/docks.ts

@@ -1,10 +1,12 @@
 import type { WebSocketRpcClientOptions } from '@vitejs/devtools-rpc/presets/ws/client'
 import type { BirpcReturn, EventOptions } from 'birpc'
-import type { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '../types'
-import type { DevToolsClientContext, DevToolsClientRpcHost } from './docks'
+import type { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, EventEmitter } from '../types'
+import type { DevToolsClientContext, DevToolsClientRpcHost, RpcClientEvents } from './docks'
 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'
 
@@ -25,10 +27,15 @@ export interface DevToolsRpcClientOptions {
 }
 
 export interface DevToolsRpcClient {
+  /**
+   * The events of the client
+   */
+  events: EventEmitter<RpcClientEvents>
+
   /**
    * Whether the client is trusted
    */
-  readonly isTrusted: boolean
+  readonly isTrusted: boolean | null
   /**
    * The connection meta
    */
@@ -40,7 +47,12 @@ export interface DevToolsRpcClient {
    *
    * @param timeout - The timeout in milliseconds, default to 60 seconds
    */
-  ensureTrusted: (timeout?: number) => Promise<void>
+  ensureTrusted: (timeout?: number) => Promise<boolean>
+
+  /**
+   * Request trust from the server
+   */
+  requestTrust: () => Promise<boolean>
 
   /**
    * Call a RPC function on the server
@@ -109,6 +121,7 @@ export async function getDevToolsRpcClient(
     baseURL = '/.devtools/',
     rpcOptions = {},
   } = options
+  const events = createEventEmitter<RpcClientEvents>()
   const bases = Array.isArray(baseURL) ? baseURL : [baseURL]
   let connectionMeta: ConnectionMeta | undefined = options.connectionMeta || findConnectionMetaFromWindows()
 
@@ -142,21 +155,10 @@ export async function getDevToolsRpcClient(
   const authId = getConnectionAuthIdFromWindows()
 
   let isTrusted = false
-  const trustedPromise = promiseWithResolver<void>()
+  const trustedPromise = promiseWithResolver<boolean>()
 
   const clientRpc: DevToolsClientRpcHost = new RpcFunctionsCollectorBase<DevToolsRpcClientFunctions, DevToolsClientContext>(context)
 
-  // Builtin rpc functions
-  clientRpc.register({
-    name: 'vite:anonymous:trusted',
-    type: 'event',
-    handler: () => {
-      isTrusted = true
-      trustedPromise.resolve()
-      return true
-    },
-  })
-
   // Create the RPC client
   const serverRpc = createRpcClient<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>(
     clientRpc.functions,
@@ -169,15 +171,35 @@ export async function getDevToolsRpcClient(
     },
   )
 
-  // TODO: implement the trust logic
-  serverRpc.$call('vite:anonymous:auth', {
-    authId,
-    ua: navigator.userAgent,
-  })
+  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<void> {
+  async function ensureTrusted(timeout = 60_000): Promise<boolean> {
     if (isTrusted)
-      trustedPromise.resolve()
+      trustedPromise.resolve(true)
 
     if (timeout <= 0)
       return trustedPromise.promise
@@ -192,14 +214,18 @@ export async function getDevToolsRpcClient(
         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)
@@ -217,6 +243,7 @@ export async function getDevToolsRpcClient(
 
   // @ts-expect-error assign to readonly property
   context.rpc = rpc
+  requestTrust()
 
   return rpc
 }