Constrain frame-src CSP to only allow the playground and youtube embeds (#528)

Author: aomarks

README.md

@@ -113,7 +113,7 @@ Serves at [`http://localhost:6415`](http://localhost:6415)
 
 ```sh
 docker build -t litdev . --build-arg PLAYGROUND_SANDBOX=http://localhost:7416/
-docker run --rm --name litdev -p 7415:7415 -e PORT=7415 -e MODE=main litdev
+docker run --rm --name litdev -p 7415:7415 -e PORT=7415 -e MODE=main -e PLAYGROUND_SANDBOX=http://localhost:7416/ litdev
 docker run --rm --name litdev-playground -p 7416:7416 -e PORT=7416 -e MODE=playground litdev
 ```
 

cloudbuild-main.yaml

@@ -46,7 +46,7 @@ steps:
       - '--min-instances=1'
       - '--max-instances=1000'
       # Serve the main site
-      - '--update-env-vars=MODE=main,REPORT_CSP_VIOLATIONS=true'
+      - '--update-env-vars=MODE=main,REPORT_CSP_VIOLATIONS=true,PLAYGROUND_SANDBOX=https://playground.lit.dev/'
 
   # Create a new Cloud Run revision for the Playground sandbox.
   #

cloudbuild-pr.yaml

@@ -49,7 +49,7 @@ steps:
       - '--min-instances=0'
       - '--max-instances=1'
       # Serve the main site
-      - '--update-env-vars=MODE=main'
+      - '--update-env-vars=MODE=main,PLAYGROUND_SANDBOX=https://pr$_PR_NUMBER-$SHORT_SHA---lit-dev-playground-5ftespv5na-uc.a.run.app/'
 
   # Create a new Cloud Run revision for the playground sandbox.
   #

packages/lit-dev-server/package.json

@@ -11,7 +11,7 @@
     "build": "npm run build:ts",
     "build:ts": "../../node_modules/.bin/tsc",
     "start": "run-p start:main start:playground",
-    "start:main": "MODE=main PORT=6415 node lib/server.js",
+    "start:main": "MODE=main PORT=6415 PLAYGROUND_SANDBOX=http://localhost:6416 node lib/server.js",
     "start:playground": "MODE=playground PORT=6416 node lib/server.js",
     "format": "../../node_modules/.bin/prettier \"**/*.{ts,js,json,html,css,md}\" --write"
   },

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

@@ -26,6 +26,11 @@ export interface ContentSecurityPolicyMiddlewareOptions {
    * allowlisted to run as inline scripts.
    */
   inlineScriptHashes?: string[];
+
+  /**
+   * Origin for Playground preview iframes.
+   */
+  playgroundPreviewOrigin: string;
 }
 
 /**
@@ -39,7 +44,7 @@ export interface ContentSecurityPolicyMiddlewareOptions {
  * https://speakerdeck.com/lweichselbaum/csp-a-successful-mess-between-hardening-and-mitigation
  */
 export const contentSecurityPolicyMiddleware = (
-  opts: ContentSecurityPolicyMiddlewareOptions = {}
+  opts: ContentSecurityPolicyMiddlewareOptions
 ): Koa.Middleware => {
   const cspHeaderValue = [
     // TODO(aomarks) We should also enable trusted types, but that will require
@@ -71,13 +76,8 @@ export const contentSecurityPolicyMiddleware = (
     // them for automatic reloads.
     `connect-src 'self' https://unpkg.com/${opts.devMode ? ` ws:` : ''}`,
 
-    // TODO(aomarks) These frame-src directives are only needed for embedding
-    // Playground previews. We can know the exact origin that is being used for
-    // Playground previews, so we could restrict this further by passing that in
-    // as a parameter to the middleware.
-    //
-    // In dev mode, http: is needed for http://localhost Playground iframes.
-    `frame-src https:${opts.devMode ? ' http:' : ''}`,
+    // Playground previews and embedded YouTube videos.
+    `frame-src ${opts.playgroundPreviewOrigin} https://www.youtube-nocookie.com/`,
 
     // We need 'unsafe-inline' because CodeMirror uses inline styles See
     // https://discuss.codemirror.net/t/inline-styles-and-content-security-policy/1311/2

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

@@ -50,9 +50,14 @@ if (mode === 'playground') {
     )
     .trim()
     .split('\n');
+  const playgroundPreviewOrigin = process.env.PLAYGROUND_SANDBOX;
+  if (!playgroundPreviewOrigin) {
+    throw new Error('PLAYGROUND_SANDBOX env was not set');
+  }
   app.use(
     contentSecurityPolicyMiddleware({
       inlineScriptHashes,
+      playgroundPreviewOrigin,
       reportViolations: process.env.REPORT_CSP_VIOLATIONS === 'true',
     })
   );

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

@@ -79,7 +79,10 @@ startDevServer({
       removeWatchScriptFromPlaygroundFiles,
     ],
     middleware: [
-      contentSecurityPolicyMiddleware({devMode: true}),
+      contentSecurityPolicyMiddleware({
+        devMode: true,
+        playgroundPreviewOrigin: `http://localhost:${PLAYGROUND_PORT}`,
+      }),
       redirectMiddleware(),
     ],
     watch: true,