fix: backport #7317 to v2 (#7318)

Author: hi-ogawa

.github/workflows/ci.yml

@@ -10,8 +10,6 @@ on:
       - main
 
   pull_request:
-    branches:
-      - main
 
   workflow_dispatch:
 

packages/browser/src/client/client.ts

@@ -14,7 +14,7 @@ export const SESSION_ID
     : getBrowserState().testerId
 export const ENTRY_URL = `${
   location.protocol === 'https:' ? 'wss:' : 'ws:'
-}//${HOST}/__vitest_browser_api__?type=${PAGE_TYPE}&sessionId=${SESSION_ID}`
+}//${HOST}/__vitest_browser_api__?type=${PAGE_TYPE}&sessionId=${SESSION_ID}&token=${(window as any).VITEST_API_TOKEN}`
 
 let setCancel = (_: CancelReason) => {}
 export const onCancel = new Promise<CancelReason>((resolve) => {

packages/browser/src/client/public/esm-client-injector.js

@@ -29,6 +29,7 @@
     provider: { __VITEST_PROVIDER__ },
     providedContext: { __VITEST_PROVIDED_CONTEXT__ },
   };
+  window.VITEST_API_TOKEN = { __VITEST_API_TOKEN__ };
 
   const config = __vitest_browser_runner__.config;
 

packages/browser/src/node/rpc.ts

@@ -8,7 +8,7 @@ import { ServerMockResolver } from '@vitest/mocker/node'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import { dirname } from 'pathe'
-import { createDebugger, isFileServingAllowed } from 'vitest/node'
+import { createDebugger, isFileServingAllowed, isValidApiRequest } from 'vitest/node'
 import { WebSocketServer } from 'ws'
 
 const debug = createDebugger('vitest:browser:api')
@@ -32,6 +32,11 @@ export function setupBrowserRpc(server: BrowserServer) {
       return
     }
 
+    if (!isValidApiRequest(ctx.config, request)) {
+      socket.destroy()
+      return
+    }
+
     const type = searchParams.get('type') ?? 'tester'
     const sessionId = searchParams.get('sessionId') ?? '0'
 

packages/browser/src/node/serverOrchestrator.ts

@@ -32,6 +32,7 @@ export async function resolveOrchestrator(
     __VITEST_CONTEXT_ID__: JSON.stringify(contextId),
     __VITEST_TESTER_ID__: '"none"',
     __VITEST_PROVIDED_CONTEXT__: '{}',
+    __VITEST_API_TOKEN__: JSON.stringify(project.ctx.config.api.token),
   })
 
   // disable CSP for the orchestrator as we are the ones controlling it

packages/browser/src/node/serverTester.ts

@@ -52,6 +52,7 @@ export async function resolveTester(
     __VITEST_CONTEXT_ID__: JSON.stringify(contextId),
     __VITEST_TESTER_ID__: JSON.stringify(crypto.randomUUID()),
     __VITEST_PROVIDED_CONTEXT__: JSON.stringify(stringify(project.getProvidedContext())),
+    __VITEST_API_TOKEN__: JSON.stringify(project.ctx.config.api.token),
   })
 
   const testerHtml = typeof server.testerHtml === 'string'

packages/ui/client/constants.ts

@@ -4,6 +4,6 @@ export const PORT = import.meta.hot && !browserState ? '51204' : location.port
 export const HOST = [location.hostname, PORT].filter(Boolean).join(':')
 export const ENTRY_URL = `${
   location.protocol === 'https:' ? 'wss:' : 'ws:'
-}//${HOST}/__vitest_api__`
+}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN}`
 export const isReport = !!window.METADATA_PATH
 export const BASE_PATH = isReport ? import.meta.env.BASE_URL : __BASE_PATH__

packages/ui/node/index.ts

@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite'
 import type { Vitest } from 'vitest/node'
+import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { toArray } from '@vitest/utils'
 import { basename, resolve } from 'pathe'
@@ -52,6 +53,27 @@ export default (ctx: Vitest): Plugin => {
         }
 
         const clientDist = resolve(fileURLToPath(import.meta.url), '../client')
+        const clientIndexHtml = fs.readFileSync(resolve(clientDist, 'index.html'), 'utf-8')
+
+        // serve index.html with api token
+        server.middlewares.use((req, res, next) => {
+          if (req.url) {
+            const url = new URL(req.url, 'http://localhost')
+            if (url.pathname === base) {
+              const html = clientIndexHtml.replace(
+                '<!-- !LOAD_METADATA! -->',
+                `<script>window.VITEST_API_TOKEN = ${JSON.stringify(ctx.config.api.token)}</script>`,
+              )
+              res.setHeader('Cache-Control', 'no-cache, max-age=0, must-revalidate')
+              res.setHeader('Content-Type', 'text/html; charset=utf-8')
+              res.write(html)
+              res.end()
+              return
+            }
+          }
+          next()
+        })
+
         server.middlewares.use(
           base,
           sirv(clientDist, {

packages/vitest/rollup.config.js

@@ -72,6 +72,7 @@ const external = [
   'node:os',
   'node:stream',
   'node:vm',
+  'node:http',
   'inspector',
   'vite-node/source-map',
   'vite-node/client',

packages/vitest/src/api/check.ts

@@ -0,0 +1,22 @@
+import type { IncomingMessage } from 'node:http'
+import type { ResolvedConfig } from '../node/types/config'
+import crypto from 'node:crypto'
+
+export function isValidApiRequest(config: ResolvedConfig, req: IncomingMessage): boolean {
+  const url = new URL(req.url ?? '', 'http://localhost')
+
+  // validate token. token is injected in ui/tester/orchestrator html, which is cross origin proteced.
+  try {
+    const token = url.searchParams.get('token')
+    if (token && crypto.timingSafeEqual(
+      Buffer.from(token),
+      Buffer.from(config.api.token),
+    )) {
+      return true
+    }
+  }
+  // an error is thrown when the length is incorrect
+  catch {}
+
+  return false
+}