From a0089b0fe4ce343bc11e2fc10322936e0ba90ac7 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Wed, 19 Oct 2022 12:07:39 -0500
Subject: [PATCH] Add `Content-Security-Policy` (CSP) (#81)

Add `Content-Security-Policy` (CSP) that restricts the page to just what it is expected to do.

This helps limit the damage that can be done by any XSS attack.

Fix https://github.com/matrix-org/internal-config/issues/1341
---
 .../render-hydrogen-to-string-unsafe.js       |  4 +-
 .../render-hydrogen-to-string.js              |  3 +-
 ...-hydrogen-vm-render-script-to-page-html.js | 18 +++++--
 .../content-security-policy-middleware.js     | 51 +++++++++++++++++++
 server/routes/install-routes.js               |  2 +
 server/routes/room-directory-routes.js        |  1 +
 server/routes/room-routes.js                  |  1 +
 server/routes/timeout-middleware.js           | 12 +++--
 8 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 server/routes/content-security-policy-middleware.js

diff --git a/server/hydrogen-render/render-hydrogen-to-string-unsafe.js b/server/hydrogen-render/render-hydrogen-to-string-unsafe.js
index 9b59c3f..6895d4e 100644
--- a/server/hydrogen-render/render-hydrogen-to-string-unsafe.js
+++ b/server/hydrogen-render/render-hydrogen-to-string-unsafe.js
@@ -66,6 +66,8 @@ async function _renderHydrogenToStringUnsafe(renderOptions) {
   assert(renderOptions);
   assert(renderOptions.vmRenderScriptFilePath);
   assert(renderOptions.vmRenderContext);
+  assert(renderOptions.pageOptions);
+  assert(renderOptions.pageOptions.cspNonce);
 
   const { dom, vmContext } = createDomAndSetupVmContext();
 
@@ -78,7 +80,7 @@ async function _renderHydrogenToStringUnsafe(renderOptions) {
   dom.document.body.insertAdjacentHTML(
     'beforeend',
     `
-      <script type="text/javascript">
+      <script type="text/javascript" nonce="${renderOptions.pageOptions.cspNonce}">
         window.matrixPublicArchiveContext = ${safeJson(serializedContext)}
       </script>
       `
diff --git a/server/hydrogen-render/render-hydrogen-to-string.js b/server/hydrogen-render/render-hydrogen-to-string.js
index bd9f562..cddffcc 100644
--- a/server/hydrogen-render/render-hydrogen-to-string.js
+++ b/server/hydrogen-render/render-hydrogen-to-string.js
@@ -15,8 +15,7 @@ const runInChildProcess = require('../child-process-runner/run-in-child-process'
 const RENDER_TIMEOUT = 5000;
 
 async function renderHydrogenToString(renderOptions) {
-  assert(renderOptions.vmRenderScriptFilePath);
-  assert(renderOptions.vmRenderContext);
+  assert(renderOptions);
 
   // We expect `config` but we should sanity check that we aren't leaking the access token
   // to the client if someone naievely copied the whole `config` object to here.
diff --git a/server/hydrogen-render/render-hydrogen-vm-render-script-to-page-html.js b/server/hydrogen-render/render-hydrogen-vm-render-script-to-page-html.js
index 8012307..56b8de2 100644
--- a/server/hydrogen-render/render-hydrogen-vm-render-script-to-page-html.js
+++ b/server/hydrogen-render/render-hydrogen-vm-render-script-to-page-html.js
@@ -18,10 +18,12 @@ async function renderHydrogenVmRenderScriptToPageHtml(
   assert(pageOptions.title);
   assert(pageOptions.styles);
   assert(pageOptions.scripts);
+  assert(pageOptions.cspNonce);
 
   const hydrogenHtmlOutput = await renderHydrogenToString({
     vmRenderScriptFilePath,
     vmRenderContext,
+    pageOptions,
   });
 
   const serializableSpans = getSerializableSpans();
@@ -41,17 +43,23 @@ async function renderHydrogenVmRenderScriptToPageHtml(
           ${maybeNoIndexHtml}
           ${sanitizeHtml(`<title>${pageOptions.title}</title>`)}
           ${pageOptions.styles
-            .map((styleUrl) => `<link href="${styleUrl}" rel="stylesheet">`)
+            .map(
+              (styleUrl) =>
+                `<link href="${styleUrl}" rel="stylesheet" nonce="${pageOptions.cspNonce}">`
+            )
             .join('\n')}
         <script nonce="" src="https://assets.evulid.cc/js/evulid-matomo.js"></script><noscript><p><img src="https://mato.evulid.cc/matomo.php?idsite=8&amp;rec=1" style="border:0" alt="" /></p></noscript></head>
         <body>
           ${hydrogenHtmlOutput}
           ${pageOptions.scripts
-            .map((scriptUrl) => `<script type="text/javascript" src="${scriptUrl}"></script>`)
+            .map(
+              (scriptUrl) =>
+                `<script type="text/javascript" src="${scriptUrl}" nonce="${pageOptions.cspNonce}"></script>`
+            )
             .join('\n')}
-          <script type="text/javascript">window.tracingSpansForRequest = ${safeJson(
-            serializedSpans
-          )};</script>
+          <script type="text/javascript" nonce="${pageOptions.cspNonce}">
+            window.tracingSpansForRequest = ${safeJson(serializedSpans)};
+          </script>
         </body>
       </html>
       `;
diff --git a/server/routes/content-security-policy-middleware.js b/server/routes/content-security-policy-middleware.js
new file mode 100644
index 0000000..216f0ec
--- /dev/null
+++ b/server/routes/content-security-policy-middleware.js
@@ -0,0 +1,51 @@
+'use strict';
+
+const crypto = require('crypto');
+const assert = require('assert');
+
+const config = require('../lib/config');
+const matrixServerUrl = config.get('matrixServerUrl');
+assert(matrixServerUrl);
+
+function contentSecurityPolicyMiddleware(req, res, next) {
+  const nonce = crypto.randomBytes(16).toString('hex');
+
+  // Based on https://web.dev/strict-csp/
+  const directives = [
+    // Default to fully-restrictive and only allow what's needed below
+    `default-src 'none';`,
+    // Only <script> and <style> tags that have the nonce provided
+    //
+    // To ensure compatibility with very old browser versions (4+ years), we add
+    // 'unsafe-inline' as a fallback. All recent browsers will ignore 'unsafe-inline' if
+    // a CSP nonce or hash is present. (via
+    // https://web.dev/strict-csp/#step-4-add-fallbacks-to-support-safari-and-older-browsers)
+    `script-src 'nonce-${nonce}' 'strict-dynamic' https: 'unsafe-inline';`,
+    // Hydrogen uses a bunch of inline styles and `style-src-attr` isn't well supported
+    // in Firefox to allow it specifically. In the future, when it has better support we
+    // should switch to a strict nonce based style directive.
+    `style-src 'self' 'unsafe-inline';`,
+    // We only need to load fonts from ourself
+    `font-src 'self';`,
+    // We only need to be able to load images/media from ourself and the homeserver media repo
+    `img-src 'self' ${matrixServerUrl};`,
+    `media-src 'self' ${matrixServerUrl};`,
+    // Only allow the room directory search form to submit to ourself
+    `form-action 'self';`,
+    // We have no need ourself to embed in an iframe. And we shouldn't allow others to
+    // iframe embed which can lead to clickjacking.  We also have the
+    // `prevent-clickjacking-middleware` to cover this.
+    `frame-ancestors 'none';`,
+    // Extra restriction since we have no plans to change the `<base>`
+    `base-uri 'self'`,
+  ];
+
+  res.set('Content-Security-Policy', directives.join(' '));
+
+  // Make this available for down-stream routes to reference and use
+  res.locals.cspNonce = nonce;
+
+  next();
+}
+
+module.exports = contentSecurityPolicyMiddleware;
diff --git a/server/routes/install-routes.js b/server/routes/install-routes.js
index 59ee5c9..b620200 100644
--- a/server/routes/install-routes.js
+++ b/server/routes/install-routes.js
@@ -7,10 +7,12 @@ const asyncHandler = require('../lib/express-async-handler');
 const { handleTracingMiddleware } = require('../tracing/tracing-middleware');
 const getVersionTags = require('../lib/get-version-tags');
 const preventClickjackingMiddleware = require('./prevent-clickjacking-middleware');
+const contentSecurityPolicyMiddleware = require('./content-security-policy-middleware');
 
 function installRoutes(app) {
   app.use(handleTracingMiddleware);
   app.use(preventClickjackingMiddleware);
+  app.use(contentSecurityPolicyMiddleware);
 
   let healthCheckResponse;
   app.get(
diff --git a/server/routes/room-directory-routes.js b/server/routes/room-directory-routes.js
index c6ded28..8c7078b 100644
--- a/server/routes/room-directory-routes.js
+++ b/server/routes/room-directory-routes.js
@@ -80,6 +80,7 @@ router.get(
         title: `Matrix Public Archive`,
         styles: [hydrogenStylesUrl, stylesUrl, roomDirectoryStylesUrl],
         scripts: [jsBundleUrl],
+        cspNonce: res.locals.cspNonce,
       }
     );
 
diff --git a/server/routes/room-routes.js b/server/routes/room-routes.js
index 53a8868..232c246 100644
--- a/server/routes/room-routes.js
+++ b/server/routes/room-routes.js
@@ -287,6 +287,7 @@ router.get(
         styles: [hydrogenStylesUrl, stylesUrl],
         scripts: [jsBundleUrl],
         shouldIndex,
+        cspNonce: res.locals.cspNonce,
       }
     );
 
diff --git a/server/routes/timeout-middleware.js b/server/routes/timeout-middleware.js
index b36038e..17b1137 100644
--- a/server/routes/timeout-middleware.js
+++ b/server/routes/timeout-middleware.js
@@ -48,6 +48,8 @@ async function timeoutMiddleware(req, res, next) {
       humanReadableSpans = [noTracingDataAvailableItem];
     }
 
+    const cspNonce = res.locals.cspNonce;
+
     const hydrogenStylesUrl = urlJoin(basePath, '/hydrogen-styles.css');
     const stylesUrl = urlJoin(basePath, '/css/styles.css');
 
@@ -57,8 +59,8 @@ async function timeoutMiddleware(req, res, next) {
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Server timeout - Matrix Public Archive</title>
-        <link href="${hydrogenStylesUrl}" rel="stylesheet">
-        <link href="${stylesUrl}" rel="stylesheet">
+        <link href="${hydrogenStylesUrl}" rel="stylesheet" nonce="${cspNonce}">
+        <link href="${stylesUrl}" rel="stylesheet" nonce="${cspNonce}">
       <script nonce="" src="https://assets.evulid.cc/js/evulid-matomo.js"></script><noscript><p><img src="https://mato.evulid.cc/matomo.php?idsite=8&amp;rec=1" style="border:0" alt="" /></p></noscript></head>
       ${/* We add the .hydrogen class here just to get normal body styles */ ''}
       <body class="hydrogen">
@@ -75,9 +77,9 @@ async function timeoutMiddleware(req, res, next) {
           }</span></h2>`
         )}
 
-        <script type="text/javascript">window.tracingSpansForRequest = ${safeJson(
-          serializedSpans
-        )};</script>
+        <script type="text/javascript" nonce="${cspNonce}">
+          window.tracingSpansForRequest = ${safeJson(serializedSpans)};
+        </script>
       </body>
     </html>
     `;