Fix: QA issues on v0.10 (#795)

* Fix tabFrames calculation in the report. * Remove unwanted `. * Add unknown to the analytics. * Change httpOnly to httponly. * Fix http only filter sorting. * Fix types that break the build. * Remove animation which used to delay thecolor updation. * Add darkmode for report. * Add darkmode for extension report. * Fix white color. * Fix empty circle color. * Center align section, add text for zero blocked cookies, update header dark color * Fix failing test. * Fix failing test. * Add httonly to js cookies in cli. * Move generateTableCSV to common folder and reuse it. * Fix file naming and import. * Fix build breaking. * Make samesite lowercase default. Use samesite instead of sameSite. * Use lax bydefault. * Fix failing tests. * Fix failing text. * Fix command in the workflow doc. * Fix command in the workflow doc. * Fix sameSite attribute. * Use i18n for samesite in CSV and update key in hook * Update comparator * Update comparator * Fix the csv sanitisation. * Fix failing tests. * Fix sanitisation of records and fix failing tests * Add edgecase data to cli-dashboard. --------- Co-authored-by: Mayank Rana <mayankranax1@gmail.com>
GoogleChromeLabs · Aug 2, 2024 · 2a6c6ed · 2a6c6ed
1 parent 0d7fb9a
commit 2a6c6ed
Show file tree

Hide file tree

Showing 48 changed files with 365 additions and 138 deletions.
diff --git a/docs/development-workflows.md b/docs/development-workflows.md
@@ -41,7 +41,7 @@ npm run dev:cli
 
 After making changes in the `cli`, `cli-dashboard`, or any CLI-related packages, use:
 ```bash
-npm run build:cli
+npm run build:cli:dashboard
 ```
 
 ## Build Workflows

diff --git a/packages/analysis-utils/src/browserManagement/index.ts b/packages/analysis-utils/src/browserManagement/index.ts
@@ -334,7 +334,7 @@ export class BrowserManagement {
             domain: parsedCookie.domain,
             path: parsedCookie.path || '/',
             value: parsedCookie.value,
-            samesite: parsedCookie.samesite || 'Lax',
+            samesite: parsedCookie.samesite?.toLowerCase() || 'lax',
             expires: parsedCookie.expires || 'Session',
             httponly: parsedCookie.httponly || false,
             secure: parsedCookie.secure || false,
@@ -407,9 +407,9 @@ export class BrowserManagement {
           domain: associatedCookie.cookie.domain,
           path: associatedCookie.cookie.path || '/',
           value: associatedCookie.cookie.value,
-          sameSite: associatedCookie.cookie.sameSite || 'Lax',
+          samesite: associatedCookie.cookie.sameSite?.toLowerCase() || 'lax',
           expires: associatedCookie.cookie.expires || 'Session',
-          httpOnly: associatedCookie.cookie.httpOnly || false,
+          httponly: associatedCookie.cookie.httpOnly || false,
           secure: associatedCookie.cookie.secure || false,
           partitionKey: '',
         },
@@ -562,7 +562,12 @@ export class BrowserManagement {
             }
             const key = cookie.name + ':' + cookie.domain + ':' + cookie.path;
             frameCookies[key] = {
-              parsedCookie: { ...cookie, partitionKey: '' },
+              parsedCookie: {
+                ...cookie,
+                partitionKey: '',
+                httponly: false,
+                samesite: cookie.sameSite?.toLowerCase() || 'lax',
+              },
             };
           });
 

diff --git a/packages/analysis-utils/src/types.ts b/packages/analysis-utils/src/types.ts
@@ -56,7 +56,7 @@ export interface CookieLogDetails
   category: string;
   description: string;
   isFirstParty: 'Yes' | 'No';
-  sameSite: string;
+  samesite: string;
   partitionKey?: Protocol.Network.CookiePartitionKey;
   pageUrl: string;
   requestUrls: { [key: string]: string };

diff --git a/packages/cli-dashboard/src/app.tsx b/packages/cli-dashboard/src/app.tsx
@@ -60,6 +60,10 @@ const App = () => {
       return;
     }
 
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      bodyTag.classList.add('dark');
+    }
+
     bodyTag.style.fontSize = '75%';
   }, []);
 
@@ -130,7 +134,7 @@ const App = () => {
   }
 
   return (
-    <div className="w-full h-screen flex">
+    <div className="w-full h-screen flex dark:bg-raisin-black text-raisin-black dark:text-bright-gray">
       <SiteReport
         completeJson={completeJsonReport}
         cookies={cookies}

diff --git a/packages/cli-dashboard/src/dummyData/PSAT_DATA.js b/packages/cli-dashboard/src/dummyData/PSAT_DATA.js
@@ -22,6 +22,151 @@ export default {
       cookieData: {
         'https://open.spotify.com': {
           frameCookies: {
+            '_cc_cccrwdcntrl.net/': {
+              parsedCookie: {
+                domain: '.crwdcntrl.net',
+                name: '_cc_cc',
+                path: '/',
+                samesite: 'none',
+                httponly: false,
+                priority: 'Medium',
+                value:
+                  '"ACZ4nGNQMDewNDA1N080NjA0SzVINbQwSzExMbcwNLMwNDQzNjBnAIK0Wb7zGRAAACRYCVA%3D"',
+                partitionKey: '',
+                expires: '2025-04-15T11:27:27.639Z',
+                httpOnly: false,
+                sameParty: false,
+                sameSite: 'None',
+                secure: true,
+                session: false,
+                size: 82,
+                sourcePort: 443,
+                sourceScheme: 'Secure',
+              },
+              warningReasons: [],
+              blockedReasons: ['ThirdPartyPhaseout'],
+              networkEvents: {
+                requestEvents: [],
+                responseEvents: [],
+              },
+              headerType: 'http',
+              isFirstParty: false,
+              url: '',
+              frameIdList: ['6C93EFD2145CB7798F6C74BC08576FAE'],
+              analytics: {
+                platform: 'Lotame',
+                category: 'Marketing',
+                name: '_cc_cc',
+                domain: 'crwdcntrl.net',
+                description: 'OCD__cc_cc_description',
+                retention: 'OCD_retention_session',
+                dataController: 'Lotame',
+                gdprUrl:
+                  'https://www.lotame.com/about-lotame/privacy/lotames-products-services-privacy-policy/',
+                wildcard: '0',
+              },
+              blockingStatus: {
+                inboundBlock: 'NOT_BLOCKED',
+                outboundBlock: 'BLOCKED_IN_ALL_EVENTS',
+              },
+              isBlocked: true,
+            },
+            '_cc_audcrwdcntrl.net/': {
+              parsedCookie: {
+                domain: '.crwdcntrl.net',
+                name: '_cc_aud',
+                path: '/',
+                samesite: 'none',
+                httponly: false,
+                priority: 'Medium',
+                value: '"ABR4nGNgYGBIm%2BU7nwEOABfpAe0%3D"',
+                partitionKey: '',
+                expires: '2025-04-15T11:27:27.639Z',
+                httpOnly: false,
+                sameParty: false,
+                sameSite: 'None',
+                secure: true,
+                session: false,
+                size: 41,
+                sourcePort: 443,
+                sourceScheme: 'Secure',
+              },
+              warningReasons: [],
+              blockedReasons: ['ThirdPartyPhaseout'],
+              networkEvents: {
+                requestEvents: [],
+                responseEvents: [],
+              },
+              headerType: 'http',
+              isFirstParty: false,
+              url: '',
+              frameIdList: ['6C93EFD2145CB7798F6C74BC08576FAE'],
+              analytics: {
+                platform: 'Lotame',
+                category: 'Marketing',
+                name: '_cc_aud',
+                domain: 'crwdcntrl.net',
+                description: 'OCD__cc_aud_description',
+                retention: 'OCD_retention_269_days',
+                dataController: 'Lotame',
+                gdprUrl:
+                  'https://www.lotame.com/about-lotame/privacy/lotames-products-services-privacy-policy/',
+                wildcard: '0',
+              },
+              blockingStatus: {
+                inboundBlock: 'NOT_BLOCKED',
+                outboundBlock: 'BLOCKED_IN_ALL_EVENTS',
+              },
+              isBlocked: true,
+            },
+            'plsGeoObjspectator.org/': {
+              isBlocked: false,
+              parsedCookie: {
+                domain: 'spectator.org',
+                expires: '2024-08-03T07:24:10.000Z',
+                httpOnly: false,
+                name: 'plsGeoObj',
+                path: '/',
+                priority: 'Medium',
+                sameParty: false,
+                sameSite: 'Lax',
+                secure: false,
+                session: false,
+                size: 117,
+                sourcePort: 443,
+                sourceScheme: 'Secure',
+                value:
+                  '{"ip":"59.88.27.175","country":"IN","region":"MH","city":"Pune","zip":"411004","location":"18.6161,73.7286"}',
+                httponly: false,
+                samesite: 'lax',
+                partitionKey: '',
+              },
+              networkEvents: {
+                requestEvents: [],
+                responseEvents: [],
+              },
+              blockedReasons: [],
+              analytics: {
+                platform: 'Unknown',
+                category: 'Uncategorized',
+                name: '',
+                domain: '',
+                description: '',
+                retention: '',
+                dataController: '',
+                gdprUrl: '',
+                wildcard: '',
+              },
+              url: '',
+              headerType: 'http',
+              isFirstParty: true,
+              frameIdList: ['6C93EFD2145CB7798F6C74BC08576FAE'],
+              blockingStatus: {
+                inboundBlock: 'NOT_BLOCKED',
+                outboundBlock: 'NOT_BLOCKED',
+              },
+              warningReasons: [],
+            },
             'sp_t:.spotify.com:/': {
               parsedCookie: {
                 name: 'sp_t',

diff --git a/packages/common/src/cookies.types.ts b/packages/common/src/cookies.types.ts
@@ -203,9 +203,9 @@ export type CookieJsonDataType = {
     partitionKey: string;
     path: string;
     expires: string;
-    httpOnly: boolean;
+    httponly: boolean;
     secure: boolean;
-    sameSite: string;
+    samesite: string;
     priority?: 'Low' | 'Medium' | 'High';
     size?: number;
   };

diff --git a/packages/common/src/utils/findAnalyticsMatch.ts b/packages/common/src/utils/findAnalyticsMatch.ts
@@ -34,7 +34,7 @@ const wildTest = (wildcard: string, str: string): boolean => {
 };
 
 export const emptyAnalytics = {
-  platform: '',
+  platform: 'Unknown',
   category: 'Uncategorized',
   name: '',
   domain: '',

diff --git a/packages/common/src/utils/generateReports/generateAllCookiesCSV.ts b/packages/common/src/utils/generateReports/generateAllCookiesCSV.ts
@@ -17,16 +17,17 @@
 /**
  * External dependencies
  */
-import sanitizeCsvRecord from '../sanitizeCsvRecord';
 import { I18n } from '@google-psat/i18n';
 /**
  * Internal dependencies
  */
 import {
+  CookieTableData,
   type CompleteJson,
   type CookieJsonDataType,
 } from '../../cookies.types';
-import calculateEffectiveExpiryDate from '../calculateEffectiveExpiryDate';
+import generateExtensionCookieTableCSV from './generateExtensionCookietableCSV';
+import generateCLICookieTableCSV from './generateCLICookieTableCSV';
 
 export const COOKIES_DATA_HEADER = [
   () => I18n.getMessage('name'),
@@ -59,61 +60,19 @@ const generateAllCookiesCSV = (siteAnalysisData: CompleteJson): string => {
     });
   });
 
-  if (isExtension) {
-    COOKIES_DATA_HEADER.push(
-      () => I18n.getMessage('priority'),
-      () => I18n.getMessage('size')
-    );
-  }
-
-  let cookieRecords = '';
+  const cookieRecords: CookieTableData[] = [];
 
   for (const cookie of cookieMap.values()) {
-    //This should be in the same order as cookieDataHeader
-    const expires = calculateEffectiveExpiryDate(cookie.parsedCookie.expires);
-
-    const recordsArray = [
-      cookie.parsedCookie.name,
-      cookie.isFirstParty
-        ? I18n.getMessage('firstParty')
-        : I18n.getMessage('thirdParty'),
-      cookie.parsedCookie.domain || ' ',
-      cookie.parsedCookie.partitionKey || ' ',
-      cookie.parsedCookie.sameSite,
-      I18n.getMessage(
-        cookie.analytics?.category?.toLowerCase() || 'uncategorized'
-      ),
-      cookie.analytics.platform,
-      cookie.parsedCookie.httpOnly
-        ? I18n.getMessage('yes')
-        : I18n.getMessage('no'),
-      cookie.parsedCookie.secure
-        ? I18n.getMessage('yes')
-        : I18n.getMessage('no'),
-      cookie.parsedCookie.value,
-      cookie.parsedCookie.path,
-      expires === 'Session' ? I18n.getMessage('session') : expires,
-      cookie.isBlocked ? I18n.getMessage('yes') : I18n.getMessage('no'),
-      cookie.analytics.GDPR || 'NA',
-    ];
-
-    if (isExtension) {
-      recordsArray.push(
-        I18n.getMessage((cookie.parsedCookie?.priority || ' ').toLowerCase()),
-        cookie.parsedCookie?.size?.toString() ?? ' '
-      );
-    }
-
-    recordsArray.map(sanitizeCsvRecord);
-
-    cookieRecords += recordsArray.join(',') + '\r\n';
+    //@ts-ignore
+    cookieRecords.push(cookie);
+  }
+  if (isExtension) {
+    return generateExtensionCookieTableCSV(cookieRecords, true) as string;
+  } else {
+    return generateCLICookieTableCSV(cookieRecords, true) as string;
   }
 
-  return (
-    COOKIES_DATA_HEADER.map((header) => header()).join(',') +
-    '\r\n' +
-    cookieRecords
-  );
+  return '';
 };
 
 export default generateAllCookiesCSV;
diff --git a/.../table/utils/generateCLICookieTableCSV.ts → ...erateReports/generateCLICookieTableCSV.ts b/.../table/utils/generateCLICookieTableCSV.ts → ...erateReports/generateCLICookieTableCSV.ts
@@ -16,8 +16,12 @@
 /**
  * External dependencies.
  */
-import { type CookieTableData, sanitizeCsvRecord } from '@google-psat/common';
 import { I18n } from '@google-psat/i18n';
+/**
+ * Internal dependencies.
+ */
+import sanitizeCsvRecord from '../sanitizeCsvRecord';
+import { type CookieTableData } from '../../cookies.types';
 
 const COOKIES_TABLE_DATA_HEADER_CLI = [
   () => I18n.getMessage('name'),
@@ -36,7 +40,10 @@ const COOKIES_TABLE_DATA_HEADER_CLI = [
   () => I18n.getMessage('gdpr'),
 ];
 
-const generateCLICookieTableCSV = (cookies: CookieTableData[]): Blob => {
+const generateCLICookieTableCSV = (
+  cookies: CookieTableData[],
+  returnString = false
+): Blob | string => {
   let cookieRecords = '';
 
   for (const cookie of cookies) {
@@ -48,8 +55,7 @@ const generateCLICookieTableCSV = (cookies: CookieTableData[]): Blob => {
         : I18n.getMessage('thirdParty'),
       cookie.parsedCookie.domain || ' ',
       cookie.parsedCookie.partitionKey || ' ',
-      //@ts-ignore
-      cookie.parsedCookie?.sameSite ?? cookie.parsedCookie?.samesite,
+      I18n.getMessage((cookie.parsedCookie?.samesite ?? 'lax').toLowerCase()),
       I18n.getMessage(
         cookie.analytics?.category?.toLowerCase() || 'uncategorized'
       ),
@@ -70,6 +76,14 @@ const generateCLICookieTableCSV = (cookies: CookieTableData[]): Blob => {
     cookieRecords += recordsArray.join(',') + '\r\n';
   }
 
+  if (returnString) {
+    return (
+      COOKIES_TABLE_DATA_HEADER_CLI.map((header) => header()).join(',') +
+      '\r\n' +
+      cookieRecords
+    );
+  }
+
   return new Blob([
     COOKIES_TABLE_DATA_HEADER_CLI.map((header) => header()).join(',') +
       '\r\n' +