new_audit: csp-inline

cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -12,6 +12,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
 <meta property="og:description" content="Open Graph smoke test description">
 
+<!-- This CSP shouldn't block anything, we just want to see the meta tag CSP audit failures -->
+<meta http-equiv="Content-Security-Policy" content="style-src * 'unsafe-inline'">
+
 <template id="links-blocking-first-paint-tmpl">
   <link rel="stylesheet" href="./dbw_tester.css?scriptActivated&delay=200"> <!-- PASS: initiator is script -->
 </template>

cli/test/smokehouse/test-definitions/dobetterweb.js

@@ -146,6 +146,10 @@ const expectations = {
         content: 'Open Graph smoke test description',
         property: 'og:description',
       },
+      {
+        httpEquiv: 'content-security-policy',
+        content: 'style-src * \'unsafe-inline\'',
+      },
     ],
     TagsBlockingFirstPaint: [
       {
@@ -566,6 +570,19 @@ const expectations = {
           },
         },
       },
+      'csp-xss': {
+        details: {
+          items: {
+            _includes: [{
+              description: /The page contains a CSP defined in a <meta> tag/,
+              severity: 'Medium',
+            }],
+          },
+        },
+      },
+      'csp-inline': {
+        score: 0,
+      },
     },
     fullPageScreenshot: {
       screenshot: {

core/audits/csp-inline.js

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that advises users to avoid putting a CSP in an inline html meta tag. This descriptive title is shown to users when a CSP is not found in the page's html document. */
+  title: 'Does not define any CSPs in inline `<meta>` tags',
+  /** Title of a Lighthouse audit that advises users to avoid putting a CSP in an inline html meta tag. This descriptive title is shown to users when a CSP is found in the page's html document. */
+  failureTitle: 'Defines a CSP in an inline `<meta>` tag',
+  /** Description of a Lighthouse audit that advises users to avoid putting a CSP in an inline html meta tag. 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. */
+  description: 'A CSP defined in an inline `<meta>` tag will delay the preload scanner from ' +
+    'loading resources early. Consider defining all CSPs in http headers if you can. ' +
+    '[Learn more about defining a CSP in an inline meta tag]()',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const INLINE_CSP_REGEX = /http-equiv="content-security-policy"/i;
+
+class CSPInline extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'csp-inline',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['MainDocumentContent', 'MetaElements'],
+      supportedModes: ['navigation'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    const hasCspMetaTag = !!artifacts.MetaElements.find(m => {
+      return m.httpEquiv && m.httpEquiv.toLowerCase() === 'content-security-policy';
+    });
+
+    // The page could add a CSP meta tag in a script.
+    // This check doesn't cover all edge cases but should be good enough for our use case.
+    const hasInlineCsp = INLINE_CSP_REGEX.test(artifacts.MainDocumentContent);
+    const hasInlineCspMetaTag = hasCspMetaTag && hasInlineCsp;
+
+    return {
+      score: Number(!hasInlineCspMetaTag),
+    };
+  }
+}
+
+export default CSPInline;
+export {UIStrings};

core/config/default-config.js

@@ -229,6 +229,7 @@ const defaultConfig = {
     'valid-source-maps',
     'prioritize-lcp-image',
     'csp-xss',
+    'csp-inline',
     'script-treemap-data',
     'manual/pwa-cross-browser',
     'manual/pwa-page-transitions',
@@ -470,6 +471,7 @@ const defaultConfig = {
         {id: 'uses-responsive-images-snapshot', weight: 0},
         {id: 'work-during-interaction', weight: 0},
         {id: 'bf-cache', weight: 0},
+        {id: 'csp-inline', weight: 0},
 
         // Budget audits.
         {id: 'performance-budget', weight: 0, group: 'budgets'},

core/test/audits/csp-inline-test.js

@@ -0,0 +1,52 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import CSPInline from '../../audits/csp-inline.js';
+
+const CSP_HTML = `
+<html>
+<head>
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'"/>
+</head>
+<body>hi</body>
+</html>
+`;
+
+const NO_CSP_HTML = `
+<html>
+<body>hi</body>
+</html>
+`;
+
+const CSP_META_ELEMENT = {
+  httpEquiv: 'Content-Security-Policy',
+};
+
+describe('CSP inline audit', () => {
+  it('fails when HTML contains a CSP in an inline meta tag', async () => {
+    const auditResult = await CSPInline.audit({
+      MetaElements: [CSP_META_ELEMENT],
+      MainDocumentContent: CSP_HTML,
+    });
+    expect(auditResult.score).toEqual(0);
+  });
+
+  it('passes if a CSP meta tag was added dynamically', async () => {
+    const auditResult = await CSPInline.audit({
+      MetaElements: [CSP_META_ELEMENT],
+      MainDocumentContent: NO_CSP_HTML,
+    });
+    expect(auditResult.score).toEqual(1);
+  });
+
+  it('passes if there was no CSP meta tag', async () => {
+    const auditResult = await CSPInline.audit({
+      MetaElements: [],
+      MainDocumentContent: NO_CSP_HTML,
+    });
+    expect(auditResult.score).toEqual(1);
+  });
+});