core(csp-xss): add severity text column to report

lighthouse-core/audits/csp-xss.js

@@ -29,6 +29,8 @@ const UIStrings = {
     'Consider defining the CSP in an HTTP header if you can.',
   /** Label for a column in a data table; entries will be a directive of a CSP. "CSP" stands for "Content Security Policy". */
   columnDirective: 'Directive',
+  /** Label for a column in a data table; entries will be the severity of an issue with the CSP. "CSP" stands for "Content Security Policy". */
+  columnSeverity: 'Severity',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -74,14 +76,14 @@ class CspXss extends Audit {
 
   /**
    * @param {Finding} finding
-   * @param {string=} icon
+   * @param {(string|LH.IcuMessage)=} severity
    * @return {LH.Audit.Details.TableItem}
    */
-  static findingToTableItem(finding, icon) {
+  static findingToTableItem(finding, severity) {
     return {
       directive: finding.directive,
       description: getTranslatedDescription(finding),
-      severity: icon,
+      severity,
     };
   }
 
@@ -98,7 +100,7 @@ class CspXss extends Audit {
       const items = syntaxFindings[i].map(f => this.findingToTableItem(f));
       if (!items.length) continue;
       results.push({
-        severity: 'Syntax',
+        severity: str_(i18n.UIStrings.itemSeverityHigh),
         description: {
           type: 'code',
           value: rawCsps[i],
@@ -124,7 +126,7 @@ class CspXss extends Audit {
       return {
         score: 0,
         results: [{
-          severity: 'Bypass',
+          severity: str_(i18n.UIStrings.itemSeverityHigh),
           description: str_(UIStrings.noCsp),
           directive: undefined,
         }],
@@ -135,14 +137,14 @@ class CspXss extends Audit {
 
     const results = [
       ...this.constructSyntaxResults(syntax, rawCsps),
-      ...bypasses.map(f => this.findingToTableItem(f, 'Bypass')),
-      ...warnings.map(f => this.findingToTableItem(f, 'Warning')),
+      ...bypasses.map(f => this.findingToTableItem(f, str_(i18n.UIStrings.itemSeverityHigh))),
+      ...warnings.map(f => this.findingToTableItem(f, str_(i18n.UIStrings.itemSeverityMedium))),
     ];
 
     // Add extra warning for a CSP defined in a meta tag.
     if (cspMetaTags.length) {
       results.push({
-        severity: 'Warning',
+        severity: str_(i18n.UIStrings.itemSeverityMedium),
         description: str_(UIStrings.metaTagMessage),
         directive: undefined,
       });
@@ -165,6 +167,7 @@ class CspXss extends Audit {
       /* eslint-disable max-len */
       {key: 'description', itemType: 'text', subItemsHeading: {key: 'description'}, text: str_(i18n.UIStrings.columnDescription)},
       {key: 'directive', itemType: 'code', subItemsHeading: {key: 'directive'}, text: str_(UIStrings.columnDirective)},
+      {key: 'severity', itemType: 'text', subItemsHeading: {key: 'severity'}, text: str_(UIStrings.columnSeverity)},
       /* eslint-enable max-len */
     ];
     const details = Audit.makeTableDetails(headings, results);

lighthouse-core/audits/dobetterweb/no-vulnerable-libraries.js

@@ -40,23 +40,17 @@ const UIStrings = {
   columnVuln: 'Vulnerability Count',
   /** Label for a column in a data table; entries will be the severity of the vulnerabilities found within a Javascript library. */
   columnSeverity: 'Highest Severity',
-  /** Table row value for the severity of a small, or low impact Javascript vulnerability.  Part of a ranking scale in the form: low, medium, high. */
-  rowSeverityLow: 'Low',
-  /** Table row value for the severity of a Javascript vulnerability.  Part of a ranking scale in the form: low, medium, high. */
-  rowSeverityMedium: 'Medium',
-  /** Table row value for the severity of a high impact, or dangerous Javascript vulnerability.  Part of a ranking scale in the form: low, medium, high. */
-  rowSeverityHigh: 'High',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 const SEMVER_REGEX = /^(\d+\.\d+\.\d+)[^-0-9]+/;
 
 /** @type {Record<string, LH.IcuMessage>} */
-const rowMap = {
-  'low': str_(UIStrings.rowSeverityLow),
-  'medium': str_(UIStrings.rowSeverityMedium),
-  'high': str_(UIStrings.rowSeverityHigh),
+const severityStringsMap = {
+  'low': str_(i18n.UIStrings.itemSeverityLow),
+  'medium': str_(i18n.UIStrings.itemSeverityMedium),
+  'high': str_(i18n.UIStrings.itemSeverityHigh),
 };
 
 /** @typedef {{npm: Object<string, Array<{id: string, severity: string, semver: {vulnerable: Array<string>}}>>}} SnykDB */
@@ -146,7 +140,7 @@ class NoVulnerableLibrariesAudit extends Audit {
 
     const vulns = matchingVulns.map(vuln => {
       return {
-        severity: rowMap[vuln.severity],
+        severity: severityStringsMap[vuln.severity],
         numericSeverity: this.severityMap[vuln.severity],
         library: `${lib.name}@${normalizedVersion}`,
         url: 'https://snyk.io/vuln/' + vuln.id,

lighthouse-core/lib/i18n/i18n.js

@@ -140,6 +140,12 @@ const UIStrings = {
   largestContentfulPaintMetric: 'Largest Contentful Paint',
   /** The name of the metric "Cumulative Layout Shift" that indicates how much the page changes its layout while it loads. If big segments of the page shift their location during load, the Cumulative Layout Shift will be higher. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
   cumulativeLayoutShiftMetric: 'Cumulative Layout Shift',
+  /** Table item value for the severity of a small, or low impact vulnerability. Part of a ranking scale in the form: low, medium, high. */
+  itemSeverityLow: 'Low',
+  /** Table item value for the severity of a vulnerability. Part of a ranking scale in the form: low, medium, high. */
+  itemSeverityMedium: 'Medium',
+  /** Table item value for the severity of a high impact, or dangerous vulnerability. Part of a ranking scale in the form: low, medium, high. */
+  itemSeverityHigh: 'High',
 };
 
 const formats = {