Merge branch 'ChromeDevTools:main' into feat-computed-css

Author: jitterbox

README.md

@@ -1,11 +1,12 @@
-# Chrome DevTools MCP
+# Chrome DevTools for Agents
 
 [![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](https://npmjs.org/package/chrome-devtools-mcp)
 
-`chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
+Chrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
 control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
 (MCP) server, giving your AI coding assistant access to the full power of
 Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
+A [CLI](docs/cli.md) is also provided for use without MCP.
 
 ## [Tool reference](./docs/tool-reference.md) | [MCP tools guide](./docs/mcp-tools-user-guide.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 
@@ -630,6 +631,11 @@ The Chrome DevTools MCP server supports the following configuration option:
   Exposes a "slim" set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks.
   - **Type:** boolean
 
+- **`--redactNetworkHeaders`/ `--redact-network-headers`**
+  If true, redacts some of the network headers considered senstive before returning to the client.
+  - **Type:** boolean
+  - **Default:** `false`
+
 <!-- END AUTO GENERATED OPTIONS -->
 
 Pass them via the `args` property in the JSON configuration. For example:

SECURITY.md

@@ -1,3 +1,9 @@
 ## Security policy
 
 The Chrome DevTools MCP project takes security very seriously. Please use [Chromium’s process to report security issues](https://www.chromium.org/Home/chromium-security/reporting-security-bugs/).
+
+### Scope
+
+In general, it is the expectation that the AI agent or client using this MCP server validates any input before sending it. The server provides powerful capabilities for browser automation and inspection, and it is the responsibility of the calling agent to ensure these are used safely and as intended.
+
+Several tools in this project have the ability to perform actions such as writing files to disk (e.g., via browser downloads or screenshots) or dynamically loading Chrome extensions. These are intentional, documented features and are not vulnerabilities.

package-lock.json

@@ -61,7 +61,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1611825",
+    "chrome-devtools-frontend": "1.0.1613625",
     "core-js": "3.49.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",

package.json

@@ -26,6 +26,7 @@ function main(): void {
 
   // Create i18n mock
   const i18nDir = path.join(BUILD_DIR, devtoolsFrontEndCorePath, 'i18n');
+  fs.mkdirSync(i18nDir, {recursive: true});
   const localesFile = path.join(i18nDir, 'locales.js');
   const localesContent = `
 export const LOCALES = [

scripts/post-build.ts

@@ -122,6 +122,7 @@ async function runNodeTestBatch(testTimeoutMs, testFiles, label) {
         ...process.env,
         CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: true,
         CHROME_DEVTOOLS_MCP_CRASH_ON_UNCAUGHT: true,
+        CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: true,
       },
     });
     child.on('close', code => {

scripts/test.mjs

@@ -189,6 +189,7 @@ export class McpResponse implements Response {
   #tabId?: string;
   #args: ParsedArguments;
   #page?: McpPage;
+  #redactNetworkHeaders = true;
 
   constructor(args: ParsedArguments) {
     this.#args = args;
@@ -198,6 +199,10 @@ export class McpResponse implements Response {
     this.#page = page;
   }
 
+  setRedactNetworkHeaders(value: boolean): void {
+    this.#redactNetworkHeaders = value;
+  }
+
   attachDevToolsData(data: DevToolsData): void {
     this.#devToolsData = data;
   }
@@ -429,6 +434,7 @@ export class McpResponse implements Response {
         requestFilePath: this.#attachedNetworkRequestOptions?.requestFilePath,
         responseFilePath: this.#attachedNetworkRequestOptions?.responseFilePath,
         saveFile: (data, filename) => context.saveFile(data, filename),
+        redactNetworkHeaders: this.#redactNetworkHeaders,
       });
       detailedNetworkRequest = formatter;
     }
@@ -572,6 +578,7 @@ export class McpResponse implements Response {
                 this.#networkRequestsOptions?.networkRequestIdInDevToolsUI,
               fetchData: false,
               saveFile: (data, filename) => context.saveFile(data, filename),
+              redactNetworkHeaders: this.#redactNetworkHeaders,
             }),
           ),
         );

src/McpResponse.ts

@@ -261,6 +261,12 @@ export const cliOptions = {
       'Set by Chrome DevTools CLI if the MCP server is started via the CLI client (this arg exists for usage stats)',
     hidden: true,
   },
+  redactNetworkHeaders: {
+    type: 'boolean',
+    describe:
+      'If true, redacts some of the network headers considered senstive before returning to the client.',
+    default: false,
+  },
 } satisfies Record<string, YargsOptions>;
 
 export type ParsedArguments = ReturnType<typeof parseArguments>;

src/bin/chrome-devtools-mcp-cli-options.ts

@@ -6,7 +6,11 @@
 
 import {isUtf8} from 'node:buffer';
 
-import type {HTTPRequest, HTTPResponse} from '../third_party/index.js';
+import {
+  DevTools,
+  type HTTPRequest,
+  type HTTPResponse,
+} from '../third_party/index.js';
 
 const BODY_CONTEXT_SIZE_LIMIT = 10000;
 
@@ -21,6 +25,7 @@ export interface NetworkFormatterOptions {
     data: Uint8Array<ArrayBufferLike>,
     filename: string,
   ) => Promise<{filename: string}>;
+  redactNetworkHeaders: boolean;
 }
 
 interface NetworkRequestConcise {
@@ -150,6 +155,20 @@ export class NetworkFormatter {
     };
   }
 
+  #redactNetworkHeaders(
+    headers: Record<string, string>,
+  ): Record<string, string> {
+    const headersList = Object.entries(headers).map(item => {
+      return {name: item[0], value: item[1]};
+    });
+    const redacted =
+      DevTools.NetworkRequestFormatter.sanitizeHeaders(headersList);
+    return redacted.reduce<Record<string, string>>((acc, item) => {
+      acc[item.name] = item.value;
+      return acc;
+    }, {});
+  }
+
   toJSONDetailed(): NetworkRequestDetailed {
     const redirectChain = this.#request.redirectChain();
     const formattedRedirectChain = redirectChain.reverse().map(request => {
@@ -159,16 +178,24 @@ export class NetworkFormatter {
       const formatter = new NetworkFormatter(request, {
         requestId: id,
         saveFile: this.#options.saveFile,
+        redactNetworkHeaders: this.#options.redactNetworkHeaders,
       });
       return formatter.toJSON();
     });
 
+    const responseHeaders = this.#request.response()?.headers();
+
     return {
       ...this.toJSON(),
-      requestHeaders: this.#request.headers(),
+      requestHeaders: this.#options.redactNetworkHeaders
+        ? this.#redactNetworkHeaders(this.#request.headers())
+        : this.#request.headers(),
       requestBody: this.#requestBody,
       requestBodyFilePath: this.#requestBodyFilePath,
-      responseHeaders: this.#request.response()?.headers(),
+      responseHeaders:
+        this.#options.redactNetworkHeaders && responseHeaders
+          ? this.#redactNetworkHeaders(responseHeaders)
+          : this.#request.response()?.headers(),
       responseBody: this.#responseBody,
       responseBodyFilePath: this.#responseBodyFilePath,
       failure: this.#request.failure()?.errorText,

src/formatters/NetworkFormatter.ts

@@ -192,6 +192,8 @@ export async function createMcpServer(
           const response = serverArgs.slim
             ? new SlimMcpResponse(serverArgs)
             : new McpResponse(serverArgs);
+
+          response.setRedactNetworkHeaders(serverArgs.redactNetworkHeaders);
           if ('pageScoped' in tool && tool.pageScoped) {
             const page =
               serverArgs.experimentalPageIdRouting &&