CONSOLE-5524: Add CSP violation detection to Playwright

frontend/e2e/fixtures/csp-violation-tracker.ts

@@ -0,0 +1,191 @@
+import type { Page } from '@playwright/test';
+
+export interface CSPViolationReport {
+  'csp-report': Pick<
+    SecurityPolicyViolationEvent,
+    | 'documentURI'
+    | 'violatedDirective'
+    | 'effectiveDirective'
+    | 'blockedURI'
+    | 'sourceFile'
+    | 'lineNumber'
+    | 'disposition'
+  >;
+}
+
+// Shape of the POST body the browser sends to a `report-uri` endpoint. It uses
+// kebab-case keys (per the legacy CSP violation report spec), not the camelCase
+// names on SecurityPolicyViolationEvent used by CSPViolationReport above.
+interface RawCSPReportBody {
+  'document-uri'?: string;
+  'violated-directive'?: string;
+  'effective-directive'?: string;
+  'blocked-uri'?: string;
+  'source-file'?: string;
+  'line-number'?: number;
+  disposition?: SecurityPolicyViolationEvent['disposition'];
+}
+
+// Fake reporting endpoint. Requests to it never hit the network: they're
+// intercepted and fulfilled locally via CDP below.
+const CSP_REPORT_URL = 'https://csp-violation-report.test/report';
+
+// Normalize the browser's kebab-case report body into the camelCase shape
+// callers expect. The body can also be missing entirely: CDP omits
+// `request.postData` when the body isn't available inline (too large, or not
+// text), so an unparseable body must produce a clearly-labelled report rather
+// than one whose every field is `undefined`.
+const parseCSPReport = (postData: string | undefined, fallbackURI: string): CSPViolationReport => {
+  let raw: RawCSPReportBody | undefined;
+  try {
+    raw = JSON.parse(postData)?.['csp-report'];
+  } catch (e) {
+    raw = undefined;
+    console.warn('[CSP] Failed to parse CSP report POST data', e);
+  }
+
+  if (!raw || typeof raw !== 'object') {
+    return {
+      'csp-report': {
+        documentURI: fallbackURI,
+        violatedDirective: 'unknown',
+        effectiveDirective: 'unknown',
+        blockedURI: 'unknown',
+        sourceFile: undefined,
+        lineNumber: undefined,
+        disposition: undefined,
+      },
+    };
+  }
+
+  return {
+    'csp-report': {
+      documentURI: raw['document-uri'],
+      violatedDirective: raw['violated-directive'],
+      effectiveDirective: raw['effective-directive'],
+      blockedURI: raw['blocked-uri'],
+      sourceFile: raw['source-file'],
+      lineNumber: raw['line-number'],
+      disposition: raw.disposition,
+    },
+  };
+};
+
+// Import from Git e2e tests make direct browser requests to api.github.com
+// which violates connect-src CSP. This is expected since git hosting can be
+// on any arbitrary hostname (e.g. Gitea) and cannot be allowlisted in CSP.
+const isExpectedGitConnectViolation = (report: CSPViolationReport['csp-report']) =>
+  report.effectiveDirective === 'connect-src' &&
+  report.blockedURI?.startsWith('https://api.github.com/');
+
+// Resuming an intercepted request routinely fails with a "target closed" error
+// when the request is still paused as the page is torn down at the end of a
+// test; that is expected and must not be reported. Any other failure means the
+// request stays paused forever, which surfaces as an unexplained navigation
+// timeout, so make that visible instead of swallowing it.
+const ignoreClosedTarget = (send: Promise<unknown>) =>
+  send.catch((error) => {
+    const message = error instanceof Error ? error.message : String(error);
+    if (!/closed|detached/i.test(message)) {
+      console.warn(`[CSP] Failed to resume intercepted request: ${message}`);
+    }
+  });
+
+// Console only emits a CSP `report-uri` directive when the request serving the
+// page carries a `Test-CSP-Reporting-Endpoint` header (see
+// pkg/utils/utils.go BuildCSPDirectives / pkg/server/server.go indexHandler).
+//
+// Use `page` to test for Content Security Policy (CSP) violations, ported
+// from the CDP-based approach in the former test-puppeteer-csp.ts, now
+// applied to every navigation in every test rather than a single hardcoded
+// page.
+//
+// `baseURL` scopes the header to Console's own origin. Only Console's backend
+// understands it, and document navigations regularly leave that origin (the
+// OAuth login flow redirects to the cluster's OAuth server), so without the
+// scope this internal test-only header would be sent to third parties.
+export interface CSPViolationTracker {
+  violations: CSPViolationReport[];
+  // CDP delivers events and command responses over the same ordered channel,
+  // so round-tripping a command guarantees any 'Fetch.requestPaused' events
+  // already in flight (e.g. from a violation triggered by the test's last
+  // action) have been received and pushed to `violations` before this
+  // resolves. Callers must await this before reading `violations`.
+  waitForPendingReports: () => Promise<void>;
+}
+
+export const trackCSPViolations = async (
+  page: Page,
+  baseURL: string,
+): Promise<CSPViolationTracker> => {
+  const violations: CSPViolationReport[] = [];
+
+  // Create a Chrome DevTools Protocol (CDP) session for the page.
+  const cdpSession = await page.context().newCDPSession(page);
+
+  const consoleOrigin = new URL(baseURL).origin;
+  const isConsoleURL = (url: string) => {
+    try {
+      return new URL(url).origin === consoleOrigin;
+    } catch {
+      return false;
+    }
+  };
+
+  // Subscribe before enabling the domain: a 'Fetch.requestPaused' event that
+  // arrives with no listener attached leaves that request paused forever.
+  cdpSession.on('Fetch.requestPaused', ({ resourceType, request, requestId }) => {
+    // When requesting the web page, add custom 'Test-CSP-Reporting-Endpoint' HTTP header
+    // in order to instruct Console Bridge server to use the given CSP reporting endpoint.
+    if (resourceType === 'Document' && isConsoleURL(request.url)) {
+      const headers = Object.entries(request.headers).map(([name, value]) => ({ name, value }));
+
+      headers.push({ name: 'Test-CSP-Reporting-Endpoint', value: CSP_REPORT_URL });
+      ignoreClosedTarget(cdpSession.send('Fetch.continueRequest', { requestId, headers }));
+    }
+
+    // The browser will attempt to send any CSP violations to the CSP reporting endpoint.
+    // When such request occurs, we manually fulfill that request before it is sent over
+    // the network and therefore avoiding the need to implement that reporting endpoint.
+    else if (resourceType === 'CSPViolationReport' && request.url === CSP_REPORT_URL) {
+      const report = parseCSPReport(request.postData, request.url);
+      if (!isExpectedGitConnectViolation(report['csp-report'])) {
+        violations.push(report);
+      }
+      ignoreClosedTarget(cdpSession.send('Fetch.fulfillRequest', { requestId, responseCode: 200 }));
+    }
+
+    // Resume other requests that were not explicitly handled above.
+    else {
+      ignoreClosedTarget(cdpSession.send('Fetch.continueRequest', { requestId }));
+    }
+  });
+
+  // This will trigger 'Fetch.requestPaused' events for the matching requests.
+  await cdpSession.send('Fetch.enable', {
+    patterns: [{ resourceType: 'Document' }, { resourceType: 'CSPViolationReport' }],
+  });
+
+  const waitForPendingReports = () =>
+    ignoreClosedTarget(cdpSession.send('Runtime.evaluate', { expression: 'void 0' })).then(
+      () => {},
+    );
+
+  return { violations, waitForPendingReports };
+};
+
+export const assertNoCSPViolations = (violations: CSPViolationReport[]) => {
+  if (violations.length === 0) {
+    return;
+  }
+  const details = violations
+    .map((v) => {
+      const report = v['csp-report'];
+      return (
+        `  - ${report.violatedDirective} blocked ${report.blockedURI} on ${report.documentURI}` +
+        (report.sourceFile ? ` (${report.sourceFile}:${report.lineNumber})` : '')
+      );
+    })
+    .join('\n');
+  throw new Error(`Content Security Policy violation(s) detected:\n${details}`);
+};

frontend/e2e/fixtures/index.ts

@@ -8,6 +8,8 @@ import { loginFromEnv } from '../setup/login-helper';
 
 import type { CleanupFixture } from './cleanup-fixture';
 import { createCleanupFixture } from './cleanup-fixture';
+import { assertNoCSPViolations, trackCSPViolations } from './csp-violation-tracker';
+import { assertNoWindowErrors } from './window-error-tracker';
 
 // URLs the console redirects to when a shared storageState session expires or is
 // invalidated (e.g. by a console rollout in another spec). Matches the OAuth
@@ -29,6 +31,21 @@ type WorkerFixtures = {
   k8sClient: KubernetesClient;
 };
 
+/** Runs a number of assertion callbacks independently, failing the test if any of them throw. */
+const assertNoErrorsThrown = async (...callbacks: (() => void | Promise<void>)[]) => {
+  const errors: string[] = [];
+  for (const callback of callbacks) {
+    try {
+      await callback();
+    } catch (error) {
+      errors.push(error instanceof Error ? error.message : String(error));
+    }
+  }
+  if (errors.length > 0) {
+    throw new Error(errors.join('\n\n'));
+  }
+};
+
 export const test = base.extend<TestFixtures, WorkerFixtures>({
   // Override the built-in `page` fixture to self-heal lost sessions. When any
   // navigation is bounced to the OAuth login page — during warmup or mid-test —
@@ -42,55 +59,78 @@ export const test = base.extend<TestFixtures, WorkerFixtures>({
   // persistence across pod restarts) must opt out with a
   // `{ type: 'no-auto-reauth' }` annotation, otherwise transparent recovery
   // would mask the very failure they check for.
-  page: async ({ page }, use, testInfo) => {
-    if (testInfo.annotations.some((a) => a.type === 'no-auto-reauth')) {
-      await use(page);
-      return;
-    }
-    const persona = testInfo.project.name.endsWith('-developer') ? 'developer' : 'admin';
-    const originalGoto = page.goto.bind(page);
-    let recovering = false;
-
-    const recoverIfRedirectedToLogin = async (): Promise<boolean> => {
-      // Guard against re-entrancy: loginFromEnv navigates internally, and those
-      // navigations flow back through this override.
-      if (recovering || !OAUTH_REDIRECT_RE.test(page.url())) {
-        return false;
-      }
-      recovering = true;
-      try {
-        await loginFromEnv(page, persona);
-      } finally {
-        recovering = false;
-      }
-      return true;
-    };
-
-    page.goto = async (url, options) => {
-      const response = await originalGoto(url, options);
-      // The console redirects to the OAuth login page client-side, a beat after
-      // the initial document loads, so `page.url()` can still read the target
-      // right after goto resolves. Wait for auth to settle before deciding: the
-      // console boots with a `co-auth-pending` class on <html> and removes it
-      // once its authenticated bootstrap fetch succeeds (see public/components/
-      // app.tsx); a 401 instead redirects to OAuth. Race that class dropping
-      // against the OAuth redirect so we neither miss the redirect nor stall the
-      // happy path.
-      if (!recovering) {
-        // eslint-disable-next-line no-restricted-syntax -- waiting for state, no action follows
-        const authSettled = page
-          .locator('html:not(.co-auth-pending)')
-          .waitFor({ state: 'attached', timeout: 30_000 });
-        const redirectedToLogin = page.waitForURL(OAUTH_REDIRECT_RE, { timeout: 30_000 });
-        await Promise.race([authSettled.catch(() => {}), redirectedToLogin.catch(() => {})]);
-      }
-      if (await recoverIfRedirectedToLogin()) {
-        return originalGoto(url, options);
+  //
+  // Also tracks Content Security Policy violations and unhandled page errors
+  // (window.onerror / unhandledrejection / CSP / plugin load failures — see
+  // window-error-tracker.ts) for the lifetime of the page and fails the test
+  // if either occurred, regardless of which branch below runs. See
+  // csp-violation-tracker.ts for why CSP tracking works even though Console's
+  // CSP header is report-only.
+  page: async ({ page, baseURL }, use, testInfo) => {
+    const { violations: cspViolations, waitForPendingReports } = await trackCSPViolations(
+      page,
+      baseURL,
+    );
+
+    try {
+      if (testInfo.annotations.some((a) => a.type === 'no-auto-reauth')) {
+        await use(page);
+        return;
       }
-      return response;
-    };
+      const persona = testInfo.project.name.endsWith('-developer') ? 'developer' : 'admin';
+      const originalGoto = page.goto.bind(page);
+      let recovering = false;
 
-    await use(page);
+      const recoverIfRedirectedToLogin = async (): Promise<boolean> => {
+        // Guard against re-entrancy: loginFromEnv navigates internally, and those
+        // navigations flow back through this override.
+        if (recovering || !OAUTH_REDIRECT_RE.test(page.url())) {
+          return false;
+        }
+        recovering = true;
+        try {
+          await loginFromEnv(page, persona);
+        } finally {
+          recovering = false;
+        }
+        return true;
+      };
+
+      page.goto = async (url, options) => {
+        const response = await originalGoto(url, options);
+        // The console redirects to the OAuth login page client-side, a beat after
+        // the initial document loads, so `page.url()` can still read the target
+        // right after goto resolves. Wait for auth to settle before deciding: the
+        // console boots with a `co-auth-pending` class on <html> and removes it
+        // once its authenticated bootstrap fetch succeeds (see public/components/
+        // app.tsx); a 401 instead redirects to OAuth. Race that class dropping
+        // against the OAuth redirect so we neither miss the redirect nor stall the
+        // happy path.
+        if (!recovering) {
+          // eslint-disable-next-line no-restricted-syntax -- waiting for state, no action follows
+          const authSettled = page
+            .locator('html:not(.co-auth-pending)')
+            .waitFor({ state: 'attached', timeout: 30_000 });
+          const redirectedToLogin = page.waitForURL(OAUTH_REDIRECT_RE, { timeout: 30_000 });
+          await Promise.race([authSettled.catch(() => {}), redirectedToLogin.catch(() => {})]);
+        }
+        if (await recoverIfRedirectedToLogin()) {
+          return originalGoto(url, options);
+        }
+        return response;
+      };
+
+      await use(page);
+    } finally {
+      // Drain any 'Fetch.requestPaused' events already in flight (e.g. a
+      // violation triggered by the test's last action) before reading
+      // `cspViolations`, otherwise a late-arriving report is silently missed.
+      await waitForPendingReports();
+      await assertNoErrorsThrown(
+        () => assertNoCSPViolations(cspViolations),
+        () => assertNoWindowErrors(page),
+      );
+    }
   },
 
   testConfig: [

frontend/e2e/fixtures/window-error-tracker.ts

@@ -0,0 +1,15 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Asserts no errors from {@link window.windowError} were reported during the test,
+ * which gets sourced from `window.onerror`, `window.onunhandledrejection`, and other
+ * unhandled page errors
+ *
+ * If any errors were reported, throws an error with the list of errors.
+ */
+export const assertNoWindowErrors = async (page: Page) => {
+  const windowError = await page.evaluate(() => window.windowError);
+  if (windowError) {
+    throw new Error(`Unhandled error(s) detected on the page:\n${windowError}`);
+  }
+};

frontend/package.json

@@ -35,7 +35,6 @@
     "test-playwright-ui": "playwright test --ui",
     "test-playwright-admin": "playwright test --project=smoke --project=console --project=dev-console --project=helm --project=knative --project=olm --project=topology --project=webterminal",
     "test-playwright-developer": "playwright test --project=dev-console-developer --project=topology-developer --project=smoke-developer",
-    "test-puppeteer-csp": "yarn ts-node ./test-puppeteer-csp.ts",
     "cypress-merge": "mochawesome-merge ./gui_test_screenshots/cypress_report*.json > ./gui_test_screenshots/cypress.json",
     "cypress-generate": "marge -o ./gui_test_screenshots/ -f cypress-report -t 'OpenShift Console Cypress Test Results' -p 'OpenShift Cypress Test Results' --showPassed false --assetsDir ./gui_test_screenshots/cypress/assets ./gui_test_screenshots/cypress.json",
     "cypress-postreport": "yarn cypress-merge && yarn cypress-generate",
@@ -138,7 +137,6 @@
     "@kubernetes/client-node": "^1.4.0",
     "@playwright/test": "^1.59.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@puppeteer/browsers": "^2.6.1",
     "@rsdoctor/rspack-plugin": "^1.6.2",
     "@rspack/cli": "^2.1.10",
     "@rspack/core": "^2.1.10",
@@ -194,7 +192,6 @@
     "node-fetch": "^2.3.0",
     "node-polyfill-webpack-plugin": "~4.0.0",
     "prettier": "^3.9.6",
-    "puppeteer-core": "^23.9.0",
     "react-refresh": "^0.18.0",
     "read-pkg": "5.x",
     "resolve-url-loader": "^5.0.0",