AI: Format and sanitize trace network requests

Bug: 394552594
Change-Id: I87cd95fcc1d5b40f0c7377550241eb09ab78b73d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6277285
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/data_formatters/NetworkRequestFormatter.test.ts

@@ -7,13 +7,13 @@ import {NetworkRequestFormatter} from '../ai_assistance.js';
 describe('NetworkRequestFormatter', () => {
   describe('allowHeader', () => {
     it('allows a header from the list', () => {
-      assert.isTrue(NetworkRequestFormatter.allowHeader({name: 'content-type', value: 'foo'}));
+      assert.isTrue(NetworkRequestFormatter.allowHeader('content-type'));
     });
 
     it('disallows headers not on the list', () => {
-      assert.isFalse(NetworkRequestFormatter.allowHeader({name: 'cookie', value: 'foo'}));
-      assert.isFalse(NetworkRequestFormatter.allowHeader({name: 'set-cookie', value: 'foo'}));
-      assert.isFalse(NetworkRequestFormatter.allowHeader({name: 'authorization', value: 'foo'}));
+      assert.isFalse(NetworkRequestFormatter.allowHeader('cookie'));
+      assert.isFalse(NetworkRequestFormatter.allowHeader('set-cookie'));
+      assert.isFalse(NetworkRequestFormatter.allowHeader('authorization'));
     });
   });
 

front_end/panels/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -9,24 +9,29 @@ import * as Network from '../../network/network.js';
 
 const MAX_HEADERS_SIZE = 1000;
 
+/**
+ * Sanitizes the set of headers, removing values that are not on the allow-list and replacing them with '<redacted>'.
+ */
+function sanitizeHeaders(headers: Array<{name: string, value: string}>): Array<{name: string, value: string}> {
+  return headers.map(header => {
+    if (NetworkRequestFormatter.allowHeader(header.name)) {
+      return header;
+    }
+    return {name: header.name, value: '<redacted>'};
+  });
+}
+
 export class NetworkRequestFormatter {
-  static allowHeader(header: SDK.NetworkRequest.NameValue): boolean {
-    return allowedHeaders.has(header.name.toLowerCase().trim());
+  static allowHeader(headerName: string): boolean {
+    return allowedHeaders.has(headerName.toLowerCase().trim());
   }
-  static formatHeaders(title: string, headers: SDK.NetworkRequest.NameValue[]): string {
+  static formatHeaders(title: string, headers: Array<{name: string, value: string}>, addListPrefixToEachLine?: boolean):
+      string {
     return formatLines(
-        title,
-        headers
-            .map(header => {
-              if (NetworkRequestFormatter.allowHeader(header)) {
-                return header;
-              }
-              return {
-                name: header.name,
-                value: '<redacted>',
-              };
-            })
-            .map(header => header.name + ': ' + header.value + '\n'),
+        title, sanitizeHeaders(headers).map(header => {
+          const prefix = addListPrefixToEachLine ? '- ' : '';
+          return prefix + header.name + ': ' + header.value + '\n';
+        }),
         MAX_HEADERS_SIZE);
   }
 

front_end/panels/ai_assistance/data_formatters/PerformanceInsightFormatter.test.ts

@@ -5,10 +5,10 @@
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {getFirstOrError, getInsightOrError} from '../../../testing/InsightHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
-import {PerformanceInsightFormatter} from '../ai_assistance.js';
+import {PerformanceInsightFormatter, TraceEventFormatter} from '../ai_assistance.js';
 
-describe('PerformanceInsightFormatter', () => {
-  describeWithEnvironment('for LCP by Phase', () => {
+describeWithEnvironment('PerformanceInsightFormatter', () => {
+  describe('for LCP by Phase', () => {
     it('serializes the correct details', async function() {
       const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
       assert.isOk(insights);
@@ -40,4 +40,47 @@ We can break this time down into the 4 phases that combine to make up the LCP ti
       assert.strictEqual(output, expected);
     });
   });
+
+  describe('Formatting TraceEvents', () => {
+    it('formats network requests', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
+      const requestUrl = 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800';
+      const request = parsedTrace.NetworkRequests.byTime.find(r => r.args.data.url === requestUrl);
+      assert.isOk(request);
+      const output = TraceEventFormatter.networkRequest(request, parsedTrace);
+      const expected = `## Network request: https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800
+Timings:
+- Start time: 37.62 ms
+- Queued at: 43.24 ms
+- Request sent at: 41.71 ms
+- Download complete at: 48.04 ms
+- Fully completed at: 51.55 ms
+- Total request duration: 13.93 ms
+Status code: 200
+MIME Type: text/css
+Priority:
+- Initial: VeryHigh
+- Final: VeryHigh
+Render blocking?: Yes
+From a service worker: No
+Response headers
+- date: Thu, 07 Mar 2024 21:17:02 GMT
+- content-encoding: gzip
+- x-content-type-options: nosniff
+- last-modified: Thu, 07 Mar 2024 21:17:02 GMT
+- server: ESF
+- cross-origin-opener-policy: <redacted>
+- x-frame-options: SAMEORIGIN
+- content-type: text/css; charset=utf-8
+- access-control-allow-origin: *
+- cache-control: private, max-age=86400, stale-while-revalidate=604800
+- cross-origin-resource-policy: <redacted>
+- timing-allow-origin: *
+- link: <https://fonts.gstatic.com>; rel=preconnect; crossorigin
+- x-xss-protection: 0
+- expires: Thu, 07 Mar 2024 21:17:02 GMT`;
+
+      assert.strictEqual(output, expected);
+    });
+  });
 });

front_end/panels/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -4,13 +4,24 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Trace from '../../../models/trace/trace.js';
 
+import {
+  NetworkRequestFormatter,
+} from './NetworkRequestFormatter.js';
+
 function formatMilli(x: number|undefined): string {
   if (x === undefined) {
     return '';
   }
   return i18n.TimeUtilities.preciseMillisToString(x, 2);
 }
 
+function formatMicro(x: number|undefined): string {
+  if (x === undefined) {
+    return '';
+  }
+  return formatMilli(Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro));
+}
+
 export class PerformanceInsightFormatter {
   #insight: Trace.Insights.Types.InsightModel<{}, {}>;
   constructor(insight: Trace.Insights.Types.InsightModel<{}, {}>) {
@@ -121,3 +132,59 @@ We can break this time down into the 4 phases that combine to make up the LCP ti
     }
   }
 }
+
+export class TraceEventFormatter {
+  /**
+   * This is the data passed to a network request when the Performance Insights
+   * agent is asking for information. It is a slimmed down version of the
+   * request's data to avoid using up too much of the context window.
+   * IMPORTANT: these set of fields have been reviewed by Chrome Privacy &
+   * Security; be careful about adding new data here. If you are in doubt please
+   * talk to jacktfranklin@.
+   */
+  static networkRequest(
+      request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.Handlers.Types.ParsedTrace): string {
+    const {url, statusCode, initialPriority, priority, fromServiceWorker, mimeType, responseHeaders, syntheticData} =
+        request.args.data;
+
+    // Note: unlike other agents, we do have the ability to include
+    // cross-origins, hence why we do not sanitize the URLs here.
+    const navigationForEvent = Trace.Helpers.Trace.getNavigationForTraceEvent(
+        request,
+        request.args.data.frame,
+        parsedTrace.Meta.navigationsByFrameId,
+    );
+    const baseTime = navigationForEvent?.ts ?? parsedTrace.Meta.traceBounds.min;
+
+    // Gets all the timings for this request, relative to the base time.
+    // Note that this is the start time, not total time. E.g. "queueing: X"
+    // means that the request was queued at Xms, not that it queued for Xms.
+    const startTimesForLifecycle = {
+      start: request.ts - baseTime,
+      queueing: syntheticData.downloadStart - baseTime,
+      requestSent: syntheticData.sendStartTime - baseTime,
+      downloadComplete: syntheticData.finishTime - baseTime,
+      processingComplete: request.ts + request.dur - baseTime,
+
+    } as const;
+
+    const renderBlocking = Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(request);
+
+    return `## Network request: ${url}
+Timings:
+- Start time: ${formatMicro(startTimesForLifecycle.start)}
+- Queued at: ${formatMicro(startTimesForLifecycle.queueing)}
+- Request sent at: ${formatMicro(startTimesForLifecycle.requestSent)}
+- Download complete at: ${formatMicro(startTimesForLifecycle.downloadComplete)}
+- Fully completed at: ${formatMicro(startTimesForLifecycle.processingComplete)}
+- Total request duration: ${formatMicro(request.dur)}
+Status code: ${statusCode}
+MIME Type: ${mimeType}
+Priority:
+- Initial: ${initialPriority}
+- Final: ${priority}
+Render blocking?: ${renderBlocking ? 'Yes' : 'No'}
+From a service worker: ${fromServiceWorker ? 'Yes' : 'No'}
+${NetworkRequestFormatter.formatHeaders('Response headers', responseHeaders, true)}`;
+  }
+}