Add csp nonce to all inline script tags (#5566)

server/routes/app.ts

@@ -67,24 +67,24 @@ export const renderApp = async (
   const { shareId } = ctx.params;
   const page = await readIndexFile();
   const environment = `
-    <script>
+    <script nonce="${ctx.state.cspNonce}">
       window.env = ${JSON.stringify(presentEnv(env, options.analytics))};
     </script>
   `;
   const entry = "app/index.tsx";
   const scriptTags = isProduction
-    ? `<script type="module" src="${env.CDN_URL || ""}/static/${
+    ? `<script type="module" nonce="${ctx.state.cspNonce}" src="${
-        readManifestFile()[entry]["file"]
+        env.CDN_URL || ""
-      }"></script>`
+      }/static/${readManifestFile()[entry]["file"]}"></script>`
-    : `<script type="module">
+    : `<script type="module" nonce="${ctx.state.cspNonce}">
         import RefreshRuntime from 'http://localhost:3001/static/@react-refresh'
         RefreshRuntime.injectIntoGlobalHook(window)
         window.$RefreshReg$ = () => { }
         window.$RefreshSig$ = () => (type) => type
         window.__vite_plugin_react_preamble_installed__ = true
       </script>
-      <script type="module" src="http://localhost:3001/static/@vite/client"></script>
+      <script type="module" nonce="${ctx.state.cspNonce}" src="http://localhost:3001/static/@vite/client"></script>
-      <script type="module" src="http://localhost:3001/static/${entry}"></script>
+      <script type="module" nonce="${ctx.state.cspNonce}" src="http://localhost:3001/static/${entry}"></script>
     `;
 
   ctx.body = page
@@ -97,7 +97,8 @@ export const renderApp = async (
     .replace(/\{prefetch\}/g, shareId ? "" : prefetchTags)
     .replace(/\{slack-app-id\}/g, env.SLACK_APP_ID || "")
     .replace(/\{cdn-url\}/g, env.CDN_URL || "")
-    .replace(/\{script-tags\}/g, scriptTags);
+    .replace(/\{script-tags\}/g, scriptTags)
+    .replace(/\{csp-nonce\}/g, ctx.state.cspNonce);
 };
 
 export const renderShare = async (ctx: Context, next: Next) => {

server/routes/index.ts

@@ -156,10 +156,12 @@ koa.use(async (ctx, next) => {
   ctx.set("Timing-Allow-Origin", timingOrigins.join(", "));
   await next();
 });
+
 koa.use(apexRedirect());
 if (env.ENVIRONMENT === "test") {
   koa.use(errors.routes());
 }
+
 koa.use(router.routes());
 
 export default koa;

server/services/web.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+import crypto from "crypto";
 import { Server } from "https";
 import Koa from "koa";
 import {
@@ -27,8 +28,6 @@ const isProduction = env.ENVIRONMENT === "production";
 const defaultSrc = ["'self'"];
 const scriptSrc = [
   "'self'",
-  "'unsafe-inline'",
-  "'unsafe-eval'",
   "gist.github.com",
   "www.googletagmanager.com",
   "cdn.zapier.com",
@@ -103,19 +102,22 @@ export default function init(app: Koa = new Koa(), server?: Server) {
   // Sets common security headers by default, such as no-sniff, hsts, hide powered
   // by etc, these are applied after auth and api so they are only returned on
   // standard non-XHR accessed routes
-  app.use(
+  app.use((ctx, next) => {
-    contentSecurityPolicy({
+    ctx.state.cspNonce = crypto.randomBytes(16).toString("hex");
+
+    return contentSecurityPolicy({
       directives: {
         defaultSrc,
-        scriptSrc,
         styleSrc,
+        scriptSrc: [...scriptSrc, `'nonce-${ctx.state.cspNonce}'`],
         imgSrc: ["*", "data:", "blob:"],
         frameSrc: ["*", "data:"],
-        connectSrc: ["*"], // Do not use connect-src: because self + websockets does not work in
+        // Do not use connect-src: because self + websockets does not work in
         // Safari, ref: https://bugs.webkit.org/show_bug.cgi?id=201591
+        connectSrc: ["*"],
       },
-    })
+    })(ctx, next);
-  );
+  });
 
   // Allow DNS prefetching for performance, we do not care about leaking requests
   // to our own CDN's
@@ -129,6 +131,8 @@ export default function init(app: Koa = new Koa(), server?: Server) {
       policy: "no-referrer",
     })
   );
+
   app.use(mount(routes));
+
   return app;
 }

server/static/index.html

@@ -53,7 +53,7 @@
   <body>
     <div id="root"></div>
     {env}
-    <script>
+    <script nonce="{csp-nonce}">
       if (
         window.localStorage &&
         window.localStorage.getItem("theme") === "dark"