Remove unsafe-inline from CSP by hashing inline scripts (#527)

Part of #517

Author: aomarks

packages/lit-dev-content/.eleventy.js

@@ -19,6 +19,7 @@ const {
 const {createSearchIndex} = require('../lit-dev-tools/lib/search/plugin.js');
 const {preCompress} = require('../lit-dev-tools/lib/pre-compress.js');
 const luxon = require('luxon');
+const crypto = require('crypto');
 
 // Use the same slugify as 11ty for markdownItAnchor. It's similar to Jekyll,
 // and preserves the existing URL fragments
@@ -29,6 +30,8 @@ const OUTPUT_DIR = DEV ? '_dev' : '_site';
 const PLAYGROUND_SANDBOX =
   process.env.PLAYGROUND_SANDBOX || 'http://localhost:6416/';
 
+const cspInlineScriptHashes = new Set();
+
 module.exports = function (eleventyConfig) {
   // https://github.com/JordanShurmer/eleventy-plugin-toc#readme
   eleventyConfig.addPlugin(pluginTOC, {
@@ -333,7 +336,12 @@ ${content}
     if (DEV) {
       return `<script type="module" src="/js/${path}"></script>`;
     }
-    const script = fsSync.readFileSync(`rollupout/${path}`, 'utf8');
+    // Note we must trim before hashing, because our html-minifier will trim
+    // inline script trailing newlines, and otherwise our hash will be wrong.
+    const script = fsSync.readFileSync(`rollupout/${path}`, 'utf8').trim();
+    const hash =
+      'sha256-' + crypto.createHash('sha256').update(script).digest('base64');
+    cspInlineScriptHashes.add(hash);
     return `<script type="module">${script}</script>`;
   });
 
@@ -351,6 +359,10 @@ ${content}
     );
   });
 
+  eleventyConfig.on('beforeBuild', () => {
+    cspInlineScriptHashes.clear();
+  });
+
   eleventyConfig.on('afterBuild', async () => {
     // The eleventyNavigation plugin requires that each section heading in our
     // docs has its own actual markdown file. But we don't actually use these
@@ -412,6 +424,14 @@ ${content}
       // them directly instead of spending its own cycles. Note this adds ~4
       // seconds to the build, but it's disabled during dev.
       await preCompress({glob: `${OUTPUT_DIR}/**/*`});
+
+      // Note we only need to write CSP inline script hashes for the production
+      // output, because in dev mode we don't inline scripts.
+      await fs.writeFile(
+        path.join(OUTPUT_DIR, 'csp-inline-script-hashes.txt'),
+        [...cspInlineScriptHashes].join('\n'),
+        'utf8'
+      );
     }
   });
 

packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts

@@ -20,6 +20,12 @@ export interface ContentSecurityPolicyMiddlewareOptions {
    * If true, CSP violations will be reported to the Google CSP Collector.
    */
   reportViolations?: boolean;
+
+  /**
+   * An array of "<hash-algorithm>-<base64-value>" CSP sources that will be
+   * allowlisted to run as inline scripts.
+   */
+  inlineScriptHashes?: string[];
 }
 
 /**
@@ -40,11 +46,6 @@ export const contentSecurityPolicyMiddleware = (
     // a policy in playground-elements for creating the worker, and a policy
     // es-module-lexer for doing an eval (see next comment for more on that).
 
-    // TODO(aomarks) unsafe-inline is needed because we use some inline scripts
-    // on some pages. We should generate hashes for them during Eleventy build
-    // and allowlist them here using `<hash-algorithm>-<base64-value>`
-    // directives.
-    //
     // TODO(aomarks) unsafe-eval is needed for an eval that is made by
     // es-module-lexer to perform JavaScript string unescaping
     // (https://github.com/guybedford/es-module-lexer/blob/91964da6b086dc5029091eeef481180a814ce24a/src/lexer.js#L32).
@@ -57,9 +58,9 @@ export const contentSecurityPolicyMiddleware = (
     //
     // In dev mode, data: scripts are required because @web/dev-server uses them
     // for automatic reloads.
-    `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com/gtag/js ${
-      opts.devMode ? ` data:` : ''
-    }`,
+    `script-src 'self' 'unsafe-eval' ${
+      opts.inlineScriptHashes?.map((hash) => `'${hash}'`).join(' ') ?? ''
+    } https://www.googletagmanager.com/gtag/js ${opts.devMode ? ` data:` : ''}`,
 
     // unpkg.com is needed to allow the Playground worker to fetch dependencies.
     // TODO(aomarks) After https://crbug.com/1253267 is fixed we can serve a

packages/lit-dev-server/src/server.ts

@@ -10,6 +10,7 @@ import koaConditionalGet from 'koa-conditional-get';
 import koaEtag from 'koa-etag';
 import {fileURLToPath} from 'url';
 import * as path from 'path';
+import * as fs from 'fs';
 import {redirectMiddleware} from './middleware/redirect-middleware.js';
 import {playgroundMiddleware} from './middleware/playground-middleware.js';
 import {contentSecurityPolicyMiddleware} from './middleware/content-security-policy-middleware.js';
@@ -42,8 +43,16 @@ const app = new Koa();
 if (mode === 'playground') {
   app.use(playgroundMiddleware());
 } else {
+  const inlineScriptHashes = fs
+    .readFileSync(
+      path.join(contentPackage, '_site', 'csp-inline-script-hashes.txt'),
+      'utf8'
+    )
+    .trim()
+    .split('\n');
   app.use(
     contentSecurityPolicyMiddleware({
+      inlineScriptHashes,
       reportViolations: process.env.REPORT_CSP_VIOLATIONS === 'true',
     })
   );