Retrieve and show cookie report data

As relevant cookieIssues are reported by the issueManager, the
CookieReportView is notified and will gather the cookieReportInfo
from the cookieIssue. This report information is pulled from the
third-party-web.

https://screenshot.googleplex.com/9n4NAQnhu69niv2.png

Bug: 365737493
Change-Id: I86967ce6d76c4aa14c4c3de2192dc7638e7f5b2d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5980008
Commit-Queue: Joshua Thomas <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Reviewed-by: Shuran Huang <[email protected]>

Author: masnoble

front_end/models/issues_manager/BUILD.gn

@@ -53,6 +53,7 @@ devtools_module("issues_manager") {
     "../../models/text_utils:bundle",
     "../../models/workspace:bundle",
     "../../third_party/marked:bundle",
+    "../../third_party/third-party-web:bundle",
   ]
 
   public_deps = [ ":descriptions" ]
@@ -231,6 +232,7 @@ devtools_entrypoint("bundle") {
     "../../panels/elements/*",
     "../../panels/issues/*",
     "../../panels/network/*",
+    "../../panels/security/*",
     "../../panels/sources/*",
     "../../testing/*",
     "../../ui/components/docs/issue_counter/*",

front_end/models/issues_manager/CookieIssue.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as ThirdPartyWeb from '../../third_party/third-party-web/third-party-web.js';
 
 import {Issue, IssueCategory, IssueKind} from './Issue.js';
 import {
@@ -67,6 +68,23 @@ export const enum CookieIssueSubCategory {
   THIRD_PARTY_PHASEOUT_COOKIE = 'ThirdPartyPhaseoutCookie',
 }
 
+// Enum to show cookie status from the security panel's third-party cookie report tool
+export const enum CookieStatus {
+  BLOCKED = 0,
+  ALLOWED = 1,
+  ALLOWED_BY_GRACE_PERIOD = 2,
+  ALLOWED_BY_HEURISTICS = 3,
+}
+
+export interface CookieReportInfo {
+  name: string;
+  domain: string;
+  type?: string;
+  platform?: string;
+  status: CookieStatus;
+  recommendation?: string;
+}
+
 export class CookieIssue extends Issue {
   #issueDetails: Protocol.Audits.CookieIssueDetails;
 
@@ -77,7 +95,7 @@ export class CookieIssue extends Issue {
     this.#issueDetails = issueDetails;
   }
 
-  #cookieId(): string {
+  cookieId(): string {
     if (this.#issueDetails.cookie) {
       const {domain, path, name} = this.#issueDetails.cookie;
       const cookieId = `${domain};${path};${name}`;
@@ -88,7 +106,7 @@ export class CookieIssue extends Issue {
 
   primaryKey(): string {
     const requestId = this.#issueDetails.request ? this.#issueDetails.request.requestId : 'no-request';
-    return `${this.code()}-(${this.#cookieId()})-(${requestId})`;
+    return `${this.code()}-(${this.cookieId()})-(${requestId})`;
   }
 
   /**
@@ -253,6 +271,45 @@ export class CookieIssue extends Issue {
     return IssueKind.BREAKING_CHANGE;
   }
 
+  makeCookieReportEntry(): CookieReportInfo|undefined {
+    const status = CookieIssue.getCookieStatus(this.#issueDetails);
+    if (this.#issueDetails.cookie && this.#issueDetails.cookieUrl && status !== undefined) {
+      const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(this.#issueDetails.cookieUrl);
+      return {
+        name: this.#issueDetails.cookie.name,
+        domain: this.#issueDetails.cookie.domain,
+        type: entity?.category,
+        platform: entity?.name,
+        status,
+      };
+    }
+
+    return;
+  }
+
+  static getCookieStatus(cookieIssueDetails: Protocol.Audits.CookieIssueDetails): CookieStatus|undefined {
+    if (cookieIssueDetails.cookieExclusionReasons.includes(
+            Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout)) {
+      return CookieStatus.BLOCKED;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(
+            Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata)) {
+      return CookieStatus.ALLOWED_BY_GRACE_PERIOD;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(
+            Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic)) {
+      return CookieStatus.ALLOWED_BY_HEURISTICS;
+    }
+
+    if (cookieIssueDetails.cookieWarningReasons.includes(Protocol.Audits.CookieWarningReason.WarnThirdPartyPhaseout)) {
+      return CookieStatus.ALLOWED;
+    }
+
+    return;
+  }
+
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
       CookieIssue[] {
     const cookieIssueDetails = inspectorIssue.details.cookieIssueDetails;

front_end/panels/security/BUILD.gn

@@ -35,8 +35,10 @@ devtools_module("security") {
     "../../core/i18n:bundle",
     "../../core/sdk:bundle",
     "../../generated:protocol",
+    "../../models/issues_manager:bundle",
     "../../panels/network/forward:bundle",
     "../../ui/legacy:bundle",
+    "../../ui/legacy/components/data_grid:bundle",
   ]
 }
 
@@ -72,6 +74,7 @@ ts_library("unittests") {
   testonly = true
 
   sources = [
+    "CookieReportView.test.ts",
     "SecurityModel.test.ts",
     "SecurityPanel.test.ts",
   ]

front_end/panels/security/CookieReportView.test.ts

@@ -0,0 +1,139 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Protocol from '../../generated/protocol.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import {createFakeSetting, createTarget} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+
+import * as Security from './security.js';
+
+function getTestCookieIssue(
+    readCookie?: boolean, exclusionReason?: Protocol.Audits.CookieExclusionReason,
+    warningReason?: Protocol.Audits.CookieWarningReason, cookieName?: string): Protocol.Audits.InspectorIssue {
+  // if no exclusion or warning reason provided, use a default
+  if (!exclusionReason && !warningReason) {
+    exclusionReason = Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout;
+  }
+
+  return {
+    code: Protocol.Audits.InspectorIssueCode.CookieIssue,
+    details: {
+      cookieIssueDetails: {
+        cookie: {
+          name: cookieName + 'test',
+          path: '/',
+          domain: 'a.' + cookieName + 'test',
+        },
+        cookieExclusionReasons: exclusionReason ? [exclusionReason] : [],
+        cookieWarningReasons: warningReason ? [warningReason] : [],
+        operation: readCookie ? Protocol.Audits.CookieOperation.ReadCookie : Protocol.Audits.CookieOperation.SetCookie,
+        cookieUrl: 'a.' + cookieName + 'test',
+      },
+    },
+  };
+}
+
+describeWithMockConnection('CookieReportView', () => {
+  let mockView: sinon.SinonStub;
+
+  beforeEach(() => {
+    mockView = sinon.stub();
+    createTarget();
+    const showThirdPartyIssuesSetting = createFakeSetting('third party flag', true);
+    IssuesManager.IssuesManager.IssuesManager.instance({
+      forceNew: false,
+      ensureFirst: false,
+      showThirdPartyIssuesSetting,
+    });
+  });
+
+  it('should contain no rows if no issues were created', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    assert.strictEqual(view.gridData.length, 0);
+  });
+
+  it('should have row when there was a preexisting cookie issue', async () => {
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+    await view.pendingUpdate();
+
+    assert.strictEqual(view.gridData.length, 1);
+  });
+
+  it('should add row when issue added after view creation', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+  });
+
+  it('should ignore non-third-party-cookie related exclusionReason', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(
+        getTestCookieIssue(undefined, Protocol.Audits.CookieExclusionReason.ExcludeSameSiteNoneInsecure));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // Make sure ExcludeThirdPartyPhaseout (default) is added.
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+    assert.strictEqual(view.gridData[0].data.status, 'Blocked');
+  });
+
+  it('should ignore non-third-party-cookie related warningReason', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(
+        getTestCookieIssue(undefined, undefined, Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeLax));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // Make sure warning 3pc warning reasons are added
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata, 'metadata'));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic, 'heuristic'));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnThirdPartyPhaseout, 'phaseout'));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 3);
+    assert.strictEqual(view.gridData[0].data.status, 'Allowed By Exception');
+    assert.strictEqual(view.gridData[1].data.status, 'Allowed By Exception');
+    assert.strictEqual(view.gridData[2].data.status, 'Allowed');
+  });
+
+  it('should only have a single entry for same cookie with a read and a write operations', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(true));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(false));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+  });
+});