lighthouse 12.2.3-dev.20241210 → 12.2.3-dev.20241211

package/cli/test/smokehouse/core-tests.js

@@ -37,6 +37,8 @@ import metricsTrickyTti from './test-definitions/metrics-tricky-tti.js';
 import metricsTrickyTtiLateFcp from './test-definitions/metrics-tricky-tti-late-fcp.js';
 import oopifRequests from './test-definitions/oopif-requests.js';
 import oopifScripts from './test-definitions/oopif-scripts.js';
+import originIsolationCoopHeaderMissing from './test-definitions/origin-isolation-coop-header-missing.js';
+import originIsolationCoopPresent from './test-definitions/origin-isolation-coop-present.js';
 import perfDebug from './test-definitions/perf-debug.js';
 import perfDiagnosticsAnimations from './test-definitions/perf-diagnostics-animations.js';
 import perfDiagnosticsThirdParty from './test-definitions/perf-diagnostics-third-party.js';
@@ -97,6 +99,8 @@ const smokeTests = [
   metricsTrickyTtiLateFcp,
   oopifRequests,
   oopifScripts,
+  originIsolationCoopHeaderMissing,
+  originIsolationCoopPresent,
   perfDebug,
   perfDiagnosticsAnimations,
   perfDiagnosticsThirdParty,

package/core/audits/origin-isolation.d.ts

@@ -0,0 +1,40 @@
+export default OriginIsolation;
+declare class OriginIsolation extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<string[]>}
+     */
+    static getRawCoop(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<string[]>;
+    /**
+     * @param {string | undefined} coopDirective
+     * @param {LH.IcuMessage | string} findingDescription
+     * @param {LH.IcuMessage=} severity
+     * @return {LH.Audit.Details.TableItem}
+     */
+    static findingToTableItem(coopDirective: string | undefined, findingDescription: LH.IcuMessage | string, severity?: LH.IcuMessage | undefined): LH.Audit.Details.TableItem;
+    /**
+     * @param {string[]} coopHeaders
+     * @return {{score: number, results: LH.Audit.Details.TableItem[]}}
+     */
+    static constructResults(coopHeaders: string[]): {
+        score: number;
+        results: LH.Audit.Details.TableItem[];
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    let title: string;
+    let description: string;
+    let noCoop: string;
+    let invalidSyntax: string;
+    let columnDirective: string;
+    let columnSeverity: string;
+}
+import { Audit } from './audit.js';
+//# sourceMappingURL=origin-isolation.d.ts.map

package/core/audits/origin-isolation.js

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Audit} from './audit.js';
+import {MainResource} from '../computed/main-resource.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that evaluates the security of a page's COOP header for origin isolation. "COOP" stands for "Cross-Origin-Opener-Policy" and should not be translated. */
+  title: 'Ensure proper origin isolation with COOP',
+  /** Description of a Lighthouse audit that evaluates the security of a page's COOP header for origin isolation. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. "COOP" stands for "Cross-Origin-Opener-Policy", neither should be translated. */
+  description: 'The Cross-Origin-Opener-Policy (COOP) can be used to isolate the top-level window from other documents such as pop-ups. [Learn more about deploying the COOP header.](https://web.dev/articles/why-coop-coep#coop)',
+  /** Summary text for the results of a Lighthouse audit that evaluates the COOP header for origin isolation. This is displayed if no COOP header is deployed. "COOP" stands for "Cross-Origin-Opener-Policy" and should not be translated. */
+  noCoop: 'No COOP header found',
+  /** Table item value calling out the presence of a syntax error. */
+  invalidSyntax: 'Invalid syntax',
+  /** Label for a column in a data table; entries will be a directive of the COOP header. "COOP" stands for "Cross-Origin-Opener-Policy". */
+  columnDirective: 'Directive',
+  /** Label for a column in a data table; entries will be the severity of an issue with the COOP header. "COOP" stands for "Cross-Origin-Opener-Policy". */
+  columnSeverity: 'Severity',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class OriginIsolation extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'origin-isolation',
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['devtoolsLogs', 'URL'],
+      supportedModes: ['navigation'],
+    };
+  }
+
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<string[]>}
+   */
+  static async getRawCoop(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const mainResource =
+        await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+
+    let coopHeaders =
+        mainResource.responseHeaders
+            .filter(h => {
+              return h.name.toLowerCase() === 'cross-origin-opener-policy';
+            })
+            .flatMap(h => h.value);
+
+    // Sanitize the header value.
+    coopHeaders = coopHeaders.map(v => v.toLowerCase().replace(/\s/g, ''));
+
+    return coopHeaders;
+  }
+
+  /**
+   * @param {string | undefined} coopDirective
+   * @param {LH.IcuMessage | string} findingDescription
+   * @param {LH.IcuMessage=} severity
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static findingToTableItem(coopDirective, findingDescription, severity) {
+    return {
+      directive: coopDirective,
+      description: findingDescription,
+      severity,
+    };
+  }
+
+  /**
+   * @param {string[]} coopHeaders
+   * @return {{score: number, results: LH.Audit.Details.TableItem[]}}
+   */
+  static constructResults(coopHeaders) {
+    const rawCoop = [...coopHeaders];
+    const allowedDirectives = [
+      'unsafe-none', 'same-origin-allow-popups', 'same-origin',
+      'noopener-allow-popups',
+    ];
+    const violations = [];
+    const syntax = [];
+
+    if (!rawCoop.length) {
+      violations.push({
+        severity: str_(i18n.UIStrings.itemSeverityHigh),
+        description: str_(UIStrings.noCoop),
+        directive: undefined,
+      });
+    }
+
+    for (const actualDirective of coopHeaders) {
+      // If there is a directive that's not an official COOP directive.
+      if (!allowedDirectives.includes(actualDirective)) {
+        syntax.push({
+          severity: str_(i18n.UIStrings.itemSeverityLow),
+          description: str_(UIStrings.invalidSyntax),
+          directive: actualDirective,
+        });
+      }
+    }
+
+    const results = [
+      ...violations.map(
+          f => this.findingToTableItem(
+              f.directive, f.description,
+              str_(i18n.UIStrings.itemSeverityHigh))),
+      ...syntax.map(
+          f => this.findingToTableItem(
+              f.directive, f.description,
+              str_(i18n.UIStrings.itemSeverityLow))),
+    ];
+
+    return {score: violations.length || syntax.length ? 0 : 1, results};
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const coopHeaders = await this.getRawCoop(artifacts, context);
+    const {score, results} = this.constructResults(coopHeaders);
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'description', valueType: 'text', subItemsHeading: {key: 'description'}, label: str_(i18n.UIStrings.columnDescription)},
+      {key: 'directive', valueType: 'code', subItemsHeading: {key: 'directive'}, label: str_(UIStrings.columnDirective)},
+      {key: 'severity', valueType: 'text', subItemsHeading: {key: 'severity'}, label: str_(UIStrings.columnSeverity)},
+      /* eslint-enable max-len */
+    ];
+    const details = Audit.makeTableDetails(headings, results);
+
+    return {
+      score,
+      notApplicable: !results.length,
+      details,
+    };
+  }
+}
+
+export default OriginIsolation;
+export {UIStrings};

package/core/config/default-config.js

@@ -193,6 +193,7 @@ const defaultConfig = {
     'prioritize-lcp-image',
     'csp-xss',
     'has-hsts',
+    'origin-isolation',
     'script-treemap-data',
     'accessibility/accesskeys',
     'accessibility/aria-allowed-attr',
@@ -543,6 +544,7 @@ const defaultConfig = {
         {id: 'notification-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'csp-xss', weight: 0, group: 'best-practices-trust-safety'},
         {id: 'has-hsts', weight: 0, group: 'best-practices-trust-safety'},
+        {id: 'origin-isolation', weight: 0, group: 'best-practices-trust-safety'},
         // User Experience
         {id: 'paste-preventing-inputs', weight: 3, group: 'best-practices-ux'},
         {id: 'image-aspect-ratio', weight: 1, group: 'best-practices-ux'},

package/core/gather/gatherers/seo/font-size.d.ts

@@ -52,6 +52,7 @@ declare class FontSize extends BaseGatherer {
         nodeIndex: number;
         backendNodeId: number;
         fontSize: number;
+        visibility: string;
         textLength: number;
         parentNode: {
             parentNode: {

package/core/gather/gatherers/seo/font-size.js

@@ -221,8 +221,9 @@ class FontSize extends BaseGatherer {
 
         const nodeIndex = doc.layout.nodeIndex[layoutIndex];
         const styles = doc.layout.styles[layoutIndex];
-        const [fontSizeStringId] = styles;
+        const [fontSizeStringId, visibilityStringId] = styles;
         const fontSize = getFloat(fontSizeStringId);
+        const visibility = getString(visibilityStringId);
 
         const parentIndex = nodes.parentIndex[nodeIndex];
         const grandParentIndex = nodes.parentIndex[parentIndex];
@@ -234,6 +235,7 @@ class FontSize extends BaseGatherer {
           nodeIndex,
           backendNodeId: nodes.backendNodeId[nodeIndex],
           fontSize,
+          visibility,
           textLength: getTextLength(text),
           parentNode: {
             ...parentNode,
@@ -257,17 +259,24 @@ class FontSize extends BaseGatherer {
     let failingTextLength = 0;
 
     for (const textNodeData of this.getTextNodesInLayoutFromSnapshot(snapshot)) {
+      if (textNodeData.visibility === 'hidden') {
+        continue;
+      }
+
       totalTextLength += textNodeData.textLength;
-      if (textNodeData.fontSize < MINIMAL_LEGIBLE_FONT_SIZE_PX) {
-        // Once a bad TextNode is identified, its parent Node is needed.
-        failingTextLength += textNodeData.textLength;
-        failingNodes.push({
-          nodeId: 0, // Set later in fetchFailingNodeSourceRules.
-          parentNode: textNodeData.parentNode,
-          textLength: textNodeData.textLength,
-          fontSize: textNodeData.fontSize,
-        });
+
+      if (textNodeData.fontSize >= MINIMAL_LEGIBLE_FONT_SIZE_PX) {
+        continue;
       }
+
+      // Once a bad TextNode is identified, its parent Node is needed.
+      failingTextLength += textNodeData.textLength;
+      failingNodes.push({
+        nodeId: 0, // Set later in fetchFailingNodeSourceRules.
+        parentNode: textNodeData.parentNode,
+        textLength: textNodeData.textLength,
+        fontSize: textNodeData.fontSize,
+      });
     }
 
     return {totalTextLength, failingTextLength, failingNodes};
@@ -294,7 +303,7 @@ class FontSize extends BaseGatherer {
 
     // Get the computed font-size style of every node.
     const snapshot = await session.sendCommand('DOMSnapshot.captureSnapshot', {
-      computedStyles: ['font-size'],
+      computedStyles: ['font-size', 'visibility'],
     });
 
     const {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.2.3-dev.20241210",
+  "version": "12.2.3-dev.20241211",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/shared/localization/locales/en-US.json

@@ -1217,6 +1217,24 @@
   "core/audits/non-composited-animations.js | unsupportedTimingParameters": {
     "message": "Effect has unsupported timing parameters"
   },
+  "core/audits/origin-isolation.js | columnDirective": {
+    "message": "Directive"
+  },
+  "core/audits/origin-isolation.js | columnSeverity": {
+    "message": "Severity"
+  },
+  "core/audits/origin-isolation.js | description": {
+    "message": "The Cross-Origin-Opener-Policy (COOP) can be used to isolate the top-level window from other documents such as pop-ups. [Learn more about deploying the COOP header.](https://web.dev/articles/why-coop-coep#coop)"
+  },
+  "core/audits/origin-isolation.js | invalidSyntax": {
+    "message": "Invalid syntax"
+  },
+  "core/audits/origin-isolation.js | noCoop": {
+    "message": "No COOP header found"
+  },
+  "core/audits/origin-isolation.js | title": {
+    "message": "Ensure proper origin isolation with COOP"
+  },
   "core/audits/preload-fonts.js | description": {
     "message": "Preload `optional` fonts so first-time visitors may use them. [Learn more about preloading fonts](https://web.dev/articles/preload-optional-fonts)"
   },

package/shared/localization/locales/en-XL.json

@@ -1217,6 +1217,24 @@
   "core/audits/non-composited-animations.js | unsupportedTimingParameters": {
     "message": "Êf́f̂éĉt́ ĥáŝ ún̂śûṕp̂ór̂t́êd́ t̂ím̂ín̂ǵ p̂ár̂ám̂ét̂ér̂ś"
   },
+  "core/audits/origin-isolation.js | columnDirective": {
+    "message": "D̂ír̂éĉt́îv́ê"
+  },
+  "core/audits/origin-isolation.js | columnSeverity": {
+    "message": "Ŝév̂ér̂ít̂ý"
+  },
+  "core/audits/origin-isolation.js | description": {
+    "message": "T̂h́ê Ćr̂óŝś-Ôŕîǵîń-Ôṕêńêŕ-P̂ól̂íĉý (ĈÓÔṔ) ĉán̂ b́ê úŝéd̂ t́ô íŝól̂át̂é t̂h́ê t́ôṕ-l̂év̂él̂ ẃîńd̂óŵ f́r̂óm̂ ót̂h́êŕ d̂óĉúm̂én̂t́ŝ śûćĥ áŝ ṕôṕ-ûṕŝ. [Ĺêár̂ń m̂ór̂é âb́ôút̂ d́êṕl̂óŷín̂ǵ t̂h́ê ĆÔÓP̂ h́êád̂ér̂.](https://web.dev/articles/why-coop-coep#coop)"
+  },
+  "core/audits/origin-isolation.js | invalidSyntax": {
+    "message": "Îńv̂ál̂íd̂ śŷńt̂áx̂"
+  },
+  "core/audits/origin-isolation.js | noCoop": {
+    "message": "N̂ó ĈÓÔṔ ĥéâd́êŕ f̂óûńd̂"
+  },
+  "core/audits/origin-isolation.js | title": {
+    "message": "Êńŝúr̂é p̂ŕôṕêŕ ôŕîǵîń îśôĺât́îón̂ ẃît́ĥ ĆÔÓP̂"
+  },
   "core/audits/preload-fonts.js | description": {
     "message": "P̂ŕêĺôád̂ `optional` f́ôńt̂ś ŝó f̂ír̂śt̂-t́îḿê v́îśît́ôŕŝ ḿâý ûśê t́ĥém̂. [Ĺêár̂ń m̂ór̂é âb́ôút̂ ṕr̂él̂óâd́îńĝ f́ôńt̂ś](https://web.dev/articles/preload-optional-fonts)"
   },