Merge branch 'main' of github.com:ChromeDevTools/chrome-devtools-mcp into webmcp

Author: beaufortfrancois

README.md

@@ -620,6 +620,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:

package-lock.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

@@ -101,6 +101,7 @@ async function runTests(attempt) {
         ...process.env,
         CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: true,
         CHROME_DEVTOOLS_MCP_CRASH_ON_UNCAUGHT: true,
+        CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: true,
       },
     });
 

scripts/test.mjs

@@ -188,6 +188,7 @@ export class McpResponse implements Response {
   #tabId?: string;
   #args: ParsedArguments;
   #page?: McpPage;
+  #redactNetworkHeaders = true;
 
   constructor(args: ParsedArguments) {
     this.#args = args;
@@ -197,6 +198,10 @@ export class McpResponse implements Response {
     this.#page = page;
   }
 
+  setRedactNetworkHeaders(value: boolean): void {
+    this.#redactNetworkHeaders = value;
+  }
+
   attachDevToolsData(data: DevToolsData): void {
     this.#devToolsData = data;
   }
@@ -434,6 +439,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;
     }
@@ -583,6 +589,7 @@ export class McpResponse implements Response {
                 this.#networkRequestsOptions?.networkRequestIdInDevToolsUI,
               fetchData: false,
               saveFile: (data, filename) => context.saveFile(data, filename),
+              redactNetworkHeaders: this.#redactNetworkHeaders,
             }),
           ),
         );

src/McpResponse.ts

@@ -266,6 +266,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

@@ -197,6 +197,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 &&

src/index.ts

@@ -6,7 +6,7 @@ exports[`McpContext > should include detailed network request in structured cont
     "url": "http://example.com/detail",
     "status": "pending",
     "requestHeaders": {
-      "content-size": "10"
+      "content-size": "<redacted>"
     }
   }
 }

tests/McpContext.test.js.snapshot

@@ -2,7 +2,7 @@ exports[`McpResponse > add network request when attached 1`] = `
 ## Request http://example.com
 Status: pending
 ### Request Headers
-- content-size:10
+- content-size:<redacted>
 ## Network requests
 Showing 1-1 of 1 (Page 1 of 1).
 reqid=1 GET http://example.com [pending]
@@ -16,7 +16,7 @@ exports[`McpResponse > add network request when attached 2`] = `
     "url": "http://example.com",
     "status": "pending",
     "requestHeaders": {
-      "content-size": "10"
+      "content-size": "<redacted>"
     }
   },
   "pagination": {
@@ -44,7 +44,7 @@ exports[`McpResponse > add network request when attached with POST data 1`] = `
 ## Request http://example.com
 Status: 200
 ### Request Headers
-- content-size:10
+- content-size:<redacted>
 ### Request Body
 {"request":"body"}
 ### Response Headers
@@ -64,7 +64,7 @@ exports[`McpResponse > add network request when attached with POST data 2`] = `
     "url": "http://example.com",
     "status": "200",
     "requestHeaders": {
-      "content-size": "10"
+      "content-size": "<redacted>"
     },
     "requestBody": "{\\"request\\":\\"body\\"}",
     "responseHeaders": {