fix(browser): disable client cdp API when allowWrite/allowExec: false [backport to v3] (#10456)

Co-authored-by: Codex <noreply@openai.com>

Author: hi-ogawa

docs/guide/browser/commands.md

@@ -59,6 +59,8 @@ expect(input).toHaveValue('a')
 
 ::: warning
 CDP session works only with `playwright` provider and only when using `chromium` browser. You can read more about it in playwright's [`CDPSession`](https://playwright.dev/docs/api/class-cdpsession) documentation.
+
+CDP is a privileged debugging API. It is available only when browser API write and exec operations are enabled through [`browser.api.allowWrite`](/guide/browser/config#browser-api-allowwrite), [`browser.api.allowExec`](/guide/browser/config#browser-api-allowexec), [`api.allowWrite`](/config/#api-allowwrite), and [`api.allowExec`](/config/#api-allowexec).
 :::
 
 ## Custom Commands

docs/guide/browser/config.md

@@ -155,14 +155,14 @@ Configure options for Vite server that serves code in the browser. Does not affe
 - **Type:** `boolean`
 - **Default:** inherited from [`api.allowWrite`](/config/#api-allowwrite)
 
-Allows browser API clients to write files, including snapshots and browser command writes. If `browser.api.host` is set to anything other than `localhost` or `127.0.0.1`, Vitest disables write operations by default unless this option or [`api.allowWrite`](/config/#api-allowwrite) is explicitly enabled.
+Allows browser API clients to write files, including snapshots and browser command writes. If `browser.api.host` is set to anything other than `localhost` or `127.0.0.1`, Vitest disables write operations by default unless this option or [`api.allowWrite`](/config/#api-allowwrite) is explicitly enabled. This option also gates privileged browser APIs that can write files indirectly, such as raw Chrome DevTools Protocol access through [`cdp()`](/guide/browser/context#cdp).
 
 ### browser.api.allowExec {#browser-api-allowexec}
 
 - **Type:** `boolean`
 - **Default:** inherited from [`api.allowExec`](/config/#api-allowexec)
 
-Allows browser API clients to run tests from the UI. If `browser.api.host` is exposed to the network and write/exec operations are enabled, anyone who can reach the browser API server can run arbitrary code on your machine.
+Allows browser API clients to run tests from the UI. If `browser.api.host` is exposed to the network and write/exec operations are enabled, anyone who can reach the browser API server can run arbitrary code on your machine. This option also gates privileged browser APIs that can execute code indirectly, such as raw Chrome DevTools Protocol access through [`cdp()`](/guide/browser/context#cdp).
 
 ## browser.provider {#browser-provider}
 

docs/guide/browser/context.md

@@ -116,6 +116,8 @@ The `cdp` export returns the current Chrome DevTools Protocol session. It is mos
 
 ::: warning
 CDP session works only with `playwright` provider and only when using `chromium` browser. You can read more about it in playwright's [`CDPSession`](https://playwright.dev/docs/api/class-cdpsession) documentation.
+
+CDP is a privileged debugging API. It is available only when browser API write and exec operations are enabled through [`browser.api.allowWrite`](/guide/browser/config#browser-api-allowwrite), [`browser.api.allowExec`](/guide/browser/config#browser-api-allowexec), [`api.allowWrite`](/config/#api-allowwrite), and [`api.allowExec`](/config/#api-allowexec).
 :::
 
 ```ts

packages/browser/src/node/commands/coverage.ts

@@ -0,0 +1,16 @@
+import type { BrowserCommand } from 'vitest/node'
+import type { BrowserServerCDPHandler } from '../cdp'
+
+export const _startV8Coverage: BrowserCommand<[]> = async (context) => {
+  const session: BrowserServerCDPHandler = await context.__ensureCDPHandler()
+  await session.send('Profiler.enable')
+  await session.send('Profiler.startPreciseCoverage', {
+    callCount: true,
+    detailed: true,
+  })
+}
+
+export const _takeV8Coverage: BrowserCommand<[]> = async (context) => {
+  const session: BrowserServerCDPHandler = await context.__ensureCDPHandler()
+  return session.send('Profiler.takePreciseCoverage')
+}

packages/browser/src/node/commands/index.ts

@@ -1,5 +1,6 @@
 import { clear } from './clear'
 import { click, dblClick, tripleClick } from './click'
+import { _startV8Coverage, _takeV8Coverage } from './coverage'
 import { dragAndDrop } from './dragAndDrop'
 import { fill } from './fill'
 import {
@@ -22,6 +23,8 @@ export default {
   removeFile: removeFile as typeof removeFile,
   writeFile: writeFile as typeof writeFile,
   __vitest_fileInfo: _fileInfo as typeof _fileInfo,
+  __vitest_startV8Coverage: _startV8Coverage as typeof _startV8Coverage,
+  __vitest_takeV8Coverage: _takeV8Coverage as typeof _takeV8Coverage,
   __vitest_upload: upload as typeof upload,
   __vitest_click: click as typeof click,
   __vitest_dblClick: dblClick as typeof dblClick,

packages/browser/src/node/providers/playwright.ts

@@ -404,19 +404,10 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     const page = this.getPage(sessionid)
     const cdp = await page.context().newCDPSession(page)
     return {
-      async send(method: string, params: any) {
-        const result = await cdp.send(method as 'DOM.querySelector', params)
-        return result as unknown
-      },
-      on(event: string, listener: (...args: any[]) => void) {
-        cdp.on(event as 'Accessibility.loadComplete', listener)
-      },
-      off(event: string, listener: (...args: any[]) => void) {
-        cdp.off(event as 'Accessibility.loadComplete', listener)
-      },
-      once(event: string, listener: (...args: any[]) => void) {
-        cdp.once(event as 'Accessibility.loadComplete', listener)
-      },
+      send: cdp.send.bind(cdp) as CDPSession['send'],
+      on: cdp.on.bind(cdp) as CDPSession['on'],
+      off: cdp.off.bind(cdp) as CDPSession['off'],
+      once: cdp.once.bind(cdp) as CDPSession['once'],
     }
   }
 

packages/browser/src/node/rpc.ts

@@ -128,6 +128,27 @@ export function setupBrowserRpc(globalServer: ParentBrowserProject, defaultMocke
     )
   }
 
+  function isCdpAllowed(project: TestProject) {
+    return (
+      project.config.api.allowExec
+      && project.config.browser.api.allowExec
+      && project.vitest.config.api.allowExec
+      && project.vitest.config.browser.api.allowExec
+      && project.config.api.allowWrite
+      && project.config.browser.api.allowWrite
+      && project.vitest.config.api.allowWrite
+      && project.vitest.config.browser.api.allowWrite
+    )
+  }
+
+  function assertCdpAllowed(project: TestProject) {
+    if (!isCdpAllowed(project)) {
+      throw new Error(
+        `Cannot use CDP because browser API write or exec operations are disabled. See https://vitest.dev/config/browser/api.`,
+      )
+    }
+  }
+
   function setupClient(project: TestProject, rpcId: string, ws: WebSocket) {
     const mockResolver = new ServerMockResolver(globalServer.vite, {
       moduleDirectories: project.config.server?.deps?.moduleDirectories,
@@ -271,6 +292,7 @@ export function setupBrowserRpc(globalServer: ParentBrowserProject, defaultMocke
               provider,
               contextId: sessionId,
               sessionId,
+              __ensureCDPHandler: () => globalServer.ensureCDPHandler(sessionId, rpcId),
             },
             provider.getCommandsContext(sessionId),
           ) as any as BrowserCommandContext
@@ -344,10 +366,12 @@ export function setupBrowserRpc(globalServer: ParentBrowserProject, defaultMocke
 
         // CDP
         async sendCdpEvent(sessionId: string, event: string, payload?: Record<string, unknown>) {
+          assertCdpAllowed(project)
           const cdp = await globalServer.ensureCDPHandler(sessionId, rpcId)
           return cdp.send(event, payload)
         },
         async trackCdpEvent(sessionId: string, type: 'on' | 'once' | 'off', event: string, listenerId: string) {
+          assertCdpAllowed(project)
           const cdp = await globalServer.ensureCDPHandler(sessionId, rpcId)
           cdp[type](event, listenerId)
         },

packages/coverage-v8/src/browser.ts

@@ -1,12 +1,15 @@
+import type { Profiler } from 'node:inspector'
 import type { CoverageProviderModule } from 'vitest/node'
 import type { V8CoverageProvider } from './provider'
-import { cdp } from '@vitest/browser/context'
 import { loadProvider } from './load-provider'
 
-const session = cdp()
 let enabled = false
 
-type ScriptCoverage = Awaited<ReturnType<typeof session.send<'Profiler.takePreciseCoverage'>>>
+type ScriptCoverage = Profiler.TakePreciseCoverageReturnType
+
+function triggerCommand(command: string, args: any[] = []): Promise<any> {
+  return (globalThis as any).__vitest_browser_runner__.commands.triggerCommand(command, args)
+}
 
 const mod: CoverageProviderModule = {
   async startCoverage() {
@@ -16,15 +19,11 @@ const mod: CoverageProviderModule = {
 
     enabled = true
 
-    await session.send('Profiler.enable')
-    await session.send('Profiler.startPreciseCoverage', {
-      callCount: true,
-      detailed: true,
-    })
+    await triggerCommand('__vitest_startV8Coverage')
   },
 
   async takeCoverage(): Promise<{ result: any[] }> {
-    const coverage = await session.send('Profiler.takePreciseCoverage')
+    const coverage: ScriptCoverage = await triggerCommand('__vitest_takeV8Coverage')
     const result: typeof coverage.result = []
 
     // Reduce amount of data sent over rpc by doing some early result filtering

packages/vitest/src/node/types/browser.ts

@@ -245,6 +245,12 @@ export interface BrowserCommandContext {
   /** @deprecated use `sessionId` instead */
   contextId: string
   sessionId: string
+  /**
+   * Returns Vitest's cached CDP handler for the current tester RPC connection.
+   *
+   * @internal
+   */
+  __ensureCDPHandler: () => Promise<any>
 }
 
 export interface BrowserServerStateSession {

test/browser/fixtures/errors-cdp/cdp.test.ts

@@ -0,0 +1,6 @@
+import { cdp } from '@vitest/browser/context'
+import { test } from 'vitest'
+
+test('cdp throws an error', async () => {
+  await cdp().send('Runtime.evaluate', { expression: '1 + 1' })
+})