playwriter 0.0.62 → 0.0.63

package/src/cdp-relay.ts

@@ -17,6 +17,13 @@ import type {
   IsRecordingParams,
 } from './protocol.js'
 import pc from 'picocolors'
+import util from 'node:util'
+
+// Prevent Buffers from dumping hex bytes in util.inspect output.
+Buffer.prototype[util.inspect.custom] = function () {
+  return `<Buffer ${this.length} bytes>`
+}
+
 import { EventEmitter } from 'node:events'
 import { VERSION, EXTENSION_IDS } from './utils.js'
 import { createCdpLogger, type CdpLogEntry, type CdpLogger } from './cdp-log.js'
@@ -71,6 +78,8 @@ type ExtensionInfo = {
   browser?: string
   email?: string
   id?: string
+  /** playwriter package version the extension was built with (sent as ?v= query param) */
+  version?: string
 }
 
 type ExtensionConnection = {
@@ -675,6 +684,7 @@ export async function startPlayWriterCDPRelayServer({
       activeTargets,
       browser: info?.browser || null,
       profile: info ? { email: info.email || '', id: info.id || '' } : null,
+      playwriterVersion: info?.version || null,
     })
   })
 
@@ -686,6 +696,7 @@ export async function startPlayWriterCDPRelayServer({
         browser: extension.info.browser || null,
         profile: extension.info ? { email: extension.info.email || '', id: extension.info.id || '' } : null,
         activeTargets: extension.connectedTargets.size,
+        playwriterVersion: extension.info?.version || null,
       }
     })
     return c.json({ extensions })
@@ -1002,10 +1013,12 @@ export async function startPlayWriterCDPRelayServer({
     const browser = c.req.query('browser')
     const email = c.req.query('email')
     const id = c.req.query('id')
+    const version = c.req.query('v')
     return {
       browser: browser || undefined,
       email: email || undefined,
       id: id || undefined,
+      version: version || undefined,
     }
   }
 
@@ -1428,6 +1441,60 @@ export async function startPlayWriterCDPRelayServer({
     return executorManager
   }
 
+  // ============================================================================
+  // Security middleware for privileged HTTP routes (/cli/*, /recording/*)
+  //
+  // CORS alone does NOT prevent cross-origin POST attacks. Browsers skip the
+  // preflight for "simple" requests (POST + Content-Type: text/plain), so a
+  // malicious website can fire-and-forget a POST to localhost:19988/cli/execute
+  // and the code executes before CORS even enters the picture.
+  //
+  // Two layers of defense:
+  // 1. Sec-Fetch-Site: browsers set this forbidden header on every request.
+  //    If present and not "same-origin"/"none", it's a cross-origin browser
+  //    request → reject. Node.js clients don't send it → unaffected.
+  // 2. Content-Type must be application/json on POST. This forces a CORS
+  //    preflight as a fallback, which our CORS policy already blocks.
+  // 3. When token mode is enabled (remote access), require the token.
+  // ============================================================================
+  const privilegedRouteMiddleware = async (c: Parameters<Parameters<typeof app.use>[1]>[0], next: () => Promise<void>) => {
+    // Block cross-origin browser requests via Sec-Fetch-Site header.
+    // Browsers always set this forbidden header; it cannot be spoofed.
+    // Non-browser clients (Node.js, curl, MCP) don't send it.
+    const secFetchSite = c.req.header('sec-fetch-site')
+    if (secFetchSite && secFetchSite !== 'same-origin' && secFetchSite !== 'none') {
+      logger?.log(pc.red(`Rejecting ${c.req.path}: cross-origin browser request (Sec-Fetch-Site: ${secFetchSite})`))
+      return c.text('Forbidden - Cross-origin requests not allowed', 403)
+    }
+
+    // Require application/json on POST to force CORS preflight as backup defense.
+    // A text/plain POST is a "simple request" that skips preflight entirely.
+    if (c.req.method === 'POST') {
+      const contentType = c.req.header('content-type') || ''
+      if (!contentType.includes('application/json')) {
+        logger?.log(pc.red(`Rejecting ${c.req.path}: Content-Type must be application/json, got: ${contentType}`))
+        return c.text('Content-Type must be application/json', 415)
+      }
+    }
+
+    // When token mode is enabled (remote/serve mode), require authentication.
+    if (token) {
+      const authHeader = c.req.header('authorization') || ''
+      const bearerToken = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : null
+      const url = new URL(c.req.url, 'http://localhost')
+      const queryToken = url.searchParams.get('token')
+      if (bearerToken !== token && queryToken !== token) {
+        logger?.log(pc.red(`Rejecting ${c.req.path}: invalid or missing token`))
+        return c.text('Unauthorized', 401)
+      }
+    }
+
+    return next()
+  }
+
+  app.use('/cli/*', privilegedRouteMiddleware)
+  app.use('/recording/*', privilegedRouteMiddleware)
+
   app.post('/cli/execute', async (c) => {
     try {
       const body = await c.req.json() as { sessionId: string | number; code: string; timeout?: number }

package/src/cli.ts

@@ -2,11 +2,17 @@
 
 import fs from 'node:fs'
 import path from 'node:path'
+import util from 'node:util'
 import { fileURLToPath } from 'node:url'
 import { cac } from '@xmorse/cac'
+
+// Prevent Buffers from dumping hex bytes in util.inspect output.
+Buffer.prototype[util.inspect.custom] = function () {
+  return `<Buffer ${this.length} bytes>`
+}
 import { killPortProcess } from './kill-port.js'
 import { VERSION, LOG_FILE_PATH, LOG_CDP_FILE_PATH, parseRelayHost } from './utils.js'
-import { ensureRelayServer, RELAY_PORT, waitForExtension } from './relay-client.js'
+import { ensureRelayServer, RELAY_PORT, waitForExtension, getExtensionOutdatedWarning, getExtensionStatus } from './relay-client.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
@@ -20,6 +26,7 @@ type ExtensionStatus = {
   browser: string | null
   profile: { email: string; id: string } | null
   activeTargets: number
+  playwriterVersion?: string | null
 }
 
 cli
@@ -74,22 +81,24 @@ async function fetchExtensionsStatus(host?: string): Promise<ExtensionStatus[]>
         activeTargets: number
         browser: string | null
         profile: { email: string; id: string } | null
+        playwriterVersion?: string | null
       }
-      if (!fallbackData.connected) {
+      if (!fallbackData?.connected) {
         return []
       }
       return [{
         extensionId: 'default',
         stableKey: undefined,
-        browser: fallbackData.browser,
-        profile: fallbackData.profile,
-        activeTargets: fallbackData.activeTargets,
+        browser: fallbackData?.browser,
+        profile: fallbackData?.profile,
+        activeTargets: fallbackData?.activeTargets,
+        playwriterVersion: fallbackData?.playwriterVersion || null,
       }]
     }
     const data = await response.json() as {
       extensions: ExtensionStatus[]
     }
-    return data.extensions
+    return data?.extensions || []
   } catch {
     return []
   }
@@ -126,6 +135,13 @@ async function executeCode(options: {
     }
   }
 
+  // Warn once if extension is outdated
+  const extensionStatus = await getExtensionStatus()
+  const outdatedWarning = getExtensionOutdatedWarning(extensionStatus?.playwriterVersion)
+  if (outdatedWarning) {
+    console.error(outdatedWarning)
+  }
+
   // Build request URL with token if provided
   const executeUrl = `${serverUrl}/cli/execute`
 
@@ -197,6 +213,15 @@ cli
       process.exit(1)
     }
 
+    // Warn if any connected extension was built with an older playwriter version
+    for (const ext of extensions) {
+      const warning = getExtensionOutdatedWarning(ext.playwriterVersion)
+      if (warning) {
+        console.error(warning)
+        break
+      }
+    }
+
     let selectedExtension: ExtensionStatus | null = null
 
     if (extensions.length === 1) {

package/src/create-logger.ts

@@ -22,7 +22,7 @@ export function createFileLogger({ logFilePath }: { logFilePath?: string } = {})
 
   const log = (...args: unknown[]): Promise<void> => {
     const message = args.map(arg =>
-      typeof arg === 'string' ? arg : util.inspect(arg, { depth: null, colors: false })
+      typeof arg === 'string' ? arg : util.inspect(arg, { depth: null, colors: false, maxStringLength: 1000 })
     ).join(' ')
     queue = queue.then(() => fs.promises.appendFile(resolvedLogFilePath, stripAnsi(message) + '\n'))
     return queue

package/src/executor.ts

@@ -15,6 +15,7 @@ import vm from 'node:vm'
 import * as acorn from 'acorn'
 import { createSmartDiff } from './diff-utils.js'
 import { getCdpUrl, parseRelayHost } from './utils.js'
+import { getExtensionOutdatedWarning } from './relay-client.js'
 import { waitForPageLoad, WaitForPageLoadOptions, WaitForPageLoadResult } from './wait-for-page-load.js'
 import { ICDPSession, getCDPSessionForPage } from './cdp-session.js'
 import { Debugger } from './debugger.js'
@@ -225,6 +226,7 @@ export class PlaywrightExecutor {
   private cdpConfig: CdpConfig
   private logger: ExecutorLogger
   private sessionMetadata: SessionMetadata
+  private hasWarnedExtensionOutdated = false
 
   constructor(options: ExecutorOptions) {
     this.cdpConfig = options.cdpConfig
@@ -292,6 +294,17 @@ export class PlaywrightExecutor {
     this.context = null
   }
 
+  private warnIfExtensionOutdated(playwriterVersion: string | null) {
+    if (this.hasWarnedExtensionOutdated) {
+      return
+    }
+    const warning = getExtensionOutdatedWarning(playwriterVersion)
+    if (warning) {
+      this.logger.log(warning)
+      this.hasWarnedExtensionOutdated = true
+    }
+  }
+
   private setupPageConsoleListener(page: Page) {
     // Use targetId() if available, fallback to internal _guid for CDP connections
     const targetId = page.targetId() || (page as any)._guid as string | undefined
@@ -330,9 +343,10 @@ export class PlaywrightExecutor {
     })
   }
 
-  private async checkExtensionStatus(): Promise<{ connected: boolean; activeTargets: number }> {
+  private async checkExtensionStatus(): Promise<{ connected: boolean; activeTargets: number; playwriterVersion: string | null }> {
     const { host = '127.0.0.1', port = 19988, extensionId } = this.cdpConfig
     const { httpBaseUrl } = parseRelayHost(host, port)
+    const notConnected = { connected: false, activeTargets: 0, playwriterVersion: null }
     try {
       if (extensionId) {
         const response = await fetch(`${httpBaseUrl}/extensions/status`, {
@@ -343,31 +357,31 @@ export class PlaywrightExecutor {
             signal: AbortSignal.timeout(2000),
           })
           if (!fallback.ok) {
-            return { connected: false, activeTargets: 0 }
+            return notConnected
           }
-          return (await fallback.json()) as { connected: boolean; activeTargets: number }
+          return (await fallback.json()) as { connected: boolean; activeTargets: number; playwriterVersion: string | null }
         }
         const data = await response.json() as {
-          extensions: Array<{ extensionId: string; stableKey?: string; activeTargets: number }>
+          extensions: Array<{ extensionId: string; stableKey?: string; activeTargets: number; playwriterVersion?: string | null }>
         }
         const extension = data.extensions.find((item) => {
           return item.extensionId === extensionId || item.stableKey === extensionId
         })
         if (!extension) {
-          return { connected: false, activeTargets: 0 }
+          return notConnected
         }
-        return { connected: true, activeTargets: extension.activeTargets }
+        return { connected: true, activeTargets: extension.activeTargets, playwriterVersion: extension?.playwriterVersion || null }
       }
 
       const response = await fetch(`${httpBaseUrl}/extension/status`, {
         signal: AbortSignal.timeout(2000),
       })
       if (!response.ok) {
-        return { connected: false, activeTargets: 0 }
+        return notConnected
       }
-      return (await response.json()) as { connected: boolean; activeTargets: number }
+      return (await response.json()) as { connected: boolean; activeTargets: number; playwriterVersion: string | null }
     } catch {
-      return { connected: false, activeTargets: 0 }
+      return notConnected
     }
   }
 
@@ -381,6 +395,7 @@ export class PlaywrightExecutor {
     if (!extensionStatus.connected) {
       throw new Error(EXTENSION_NOT_CONNECTED_ERROR)
     }
+    this.warnIfExtensionOutdated(extensionStatus.playwriterVersion)
 
     // Generate a fresh unique URL for each Playwright connection
     const cdpUrl = getCdpUrl(this.cdpConfig)
@@ -455,6 +470,7 @@ export class PlaywrightExecutor {
     if (!extensionStatus.connected) {
       throw new Error(EXTENSION_NOT_CONNECTED_ERROR)
     }
+    this.warnIfExtensionOutdated(extensionStatus.playwriterVersion)
 
     // Generate a fresh unique URL for each Playwright connection
     const cdpUrl = getCdpUrl(this.cdpConfig)
@@ -498,7 +514,7 @@ export class PlaywrightExecutor {
         const formattedArgs = args
           .map((arg) => {
             if (typeof arg === 'string') return arg
-            return util.inspect(arg, { depth: 4, colors: false, maxArrayLength: 100, breakLength: 80 })
+            return util.inspect(arg, { depth: 4, colors: false, maxArrayLength: 100, maxStringLength: 1000, breakLength: 80 })
           })
           .join(' ')
         text += `[${method}] ${formattedArgs}\n`
@@ -837,7 +853,7 @@ export class PlaywrightExecutor {
           const formatted =
             typeof resolvedResult === 'string'
               ? resolvedResult
-              : util.inspect(resolvedResult, { depth: 4, colors: false, maxArrayLength: 100, breakLength: 80 })
+              : util.inspect(resolvedResult, { depth: 4, colors: false, maxArrayLength: 100, maxStringLength: 1000, breakLength: 80 })
           if (formatted.trim()) {
             responseText += `[return value] ${formatted}\n`
           }

package/src/mcp.ts

@@ -3,8 +3,16 @@ import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { z } from 'zod'
 import fs from 'node:fs'
 import path from 'node:path'
+import util from 'node:util'
 import { fileURLToPath } from 'node:url'
 import { createRequire } from 'node:module'
+
+// Prevent Buffers from dumping hex bytes in util.inspect output.
+// Without this, returning a screenshot Buffer would log ~400+ chars of useless hex.
+Buffer.prototype[util.inspect.custom] = function () {
+  return `<Buffer ${this.length} bytes>`
+}
+
 import dedent from 'string-dedent'
 import { LOG_FILE_PATH, VERSION, parseRelayHost } from './utils.js'
 import { ensureRelayServer, RELAY_PORT } from './relay-client.js'

package/src/relay-client.ts

@@ -30,7 +30,7 @@ export async function getRelayServerVersion(port: number = RELAY_PORT): Promise<
   }
 }
 
-export async function getExtensionStatus(port: number = RELAY_PORT): Promise<{ connected: boolean; activeTargets: number } | null> {
+export async function getExtensionStatus(port: number = RELAY_PORT): Promise<{ connected: boolean; activeTargets: number; playwriterVersion: string | null } | null> {
   try {
     const response = await fetch(`http://127.0.0.1:${port}/extension/status`, {
       signal: AbortSignal.timeout(500),
@@ -38,7 +38,7 @@ export async function getExtensionStatus(port: number = RELAY_PORT): Promise<{ c
     if (!response.ok) {
       return null
     }
-    return await response.json() as { connected: boolean; activeTargets: number }
+    return await response.json() as { connected: boolean; activeTargets: number; playwriterVersion: string | null }
   } catch {
     return null
   }
@@ -96,7 +96,7 @@ async function killRelayServer(options: { port: number; waitForFreeMs?: number }
  * - 0 if v1 === v2
  * - positive if v1 > v2
  */
-function compareVersions(v1: string, v2: string): number {
+export function compareVersions(v1: string, v2: string): number {
   const parts1 = v1.split('.').map(Number)
   const parts2 = v2.split('.').map(Number)
   const len = Math.max(parts1.length, parts2.length)
@@ -111,6 +111,22 @@ function compareVersions(v1: string, v2: string): number {
   return 0
 }
 
+/**
+ * Check if the running playwriter package is older than the version the extension was built with.
+ * The extension bundles the playwriter version at build time. If the extension reports a newer
+ * version, it means the user's CLI/MCP needs updating.
+ * Returns a warning message if outdated, null otherwise.
+ */
+export function getExtensionOutdatedWarning(extensionPlaywriterVersion: string | null | undefined): string | null {
+  if (!extensionPlaywriterVersion) {
+    return null
+  }
+  if (compareVersions(extensionPlaywriterVersion, VERSION) > 0) {
+    return `Playwriter ${VERSION} is outdated (extension requires ${extensionPlaywriterVersion}). Run \`npm install -g playwriter@latest\` or update the playwriter package in your project.`
+  }
+  return null
+}
+
 export interface EnsureRelayServerOptions {
   logger?: { log: (...args: any[]) => void }
   /** If true, will kill and restart server on version mismatch. Default: true */