feat(security): enhance security headers with nonce support and middleware integration

Author: leonardcser

apps/web/functions/[[path]].ts

@@ -1,30 +1,18 @@
 import { initializeApiBaseUrl } from "../src/config/api";
 import { render } from "../src/entry-server";
-import {
-  applySecurityHeadersToResponse,
-  shouldApplySecurityHeaders,
-} from "../src/utils/security-headers";
+import { injectNonceIntoHTML } from "../src/utils/security-headers";
 
-interface Env {
-  ASSETS: Fetcher;
-  VITE_API_HOST?: string;
+export interface Data extends Record<string, unknown> {
+  nonce: string;
 }
 
-/**
- * Apply security headers to responses
- */
-function addSecurityHeaders(response: Response): Response {
-  const contentType = response.headers.get("content-type");
-  if (shouldApplySecurityHeaders(contentType, response.status)) {
-    return applySecurityHeadersToResponse(response, {
-      environment: "production",
-      enforceHttps: true,
-    });
-  }
-  return response;
+export interface Env {
+  ASSETS: Fetcher;
+  VITE_API_HOST?: string;
+  NONCE: string;
 }
 
-export const onRequest: PagesFunction<Env> = async (context) => {
+export const onRequest: PagesFunction<Env, any, Data> = async (context) => {
   const { request, env } = context;
   initializeApiBaseUrl(env.VITE_API_HOST);
 
@@ -50,19 +38,22 @@ export const onRequest: PagesFunction<Env> = async (context) => {
     const template = await indexHtmlResponse.text();
 
     const rendered = await render(request.clone() as unknown as Request);
-    const html = template
+    let html = template
       .replace(`<!--app-head-->`, rendered.headHtml ?? "")
       .replace(`<!--app-html-->`, "");
 
+    // Inject nonce into script tags
+    html = injectNonceIntoHTML(html, context.data.nonce);
+
     const response = new Response(html, {
       headers: { "Content-Type": "text/html" },
       status: 200,
     });
 
-    return addSecurityHeaders(response);
+    return response;
   } catch (e: any) {
     if (e instanceof Response) {
-      return addSecurityHeaders(e);
+      return e;
     }
     console.error("SSR Function Error:", e.stack || e);
     try {
@@ -83,6 +74,6 @@ export const onRequest: PagesFunction<Env> = async (context) => {
       }
     );
 
-    return addSecurityHeaders(errorResponse);
+    return errorResponse;
   }
 };

apps/web/functions/_middleware.ts

@@ -0,0 +1,30 @@
+import {
+  addSecurityHeaders,
+  generateNonce,
+} from "../src/utils/security-headers";
+import type { Data, Env } from "./[[path]].ts";
+
+/**
+ * Security middleware that applies security headers to all responses
+ * and injects nonce into HTML responses
+ */
+async function securityMiddleware(context: EventContext<Env, any, Data>) {
+  // Generate nonce for this request
+  const nonce = generateNonce();
+
+  // Store nonce in context for use by the main handler
+  context.data.nonce = nonce;
+
+  // Get the response from the next handler
+  const response = await context.next();
+
+  // Apply security headers with nonce configuration
+  return addSecurityHeaders(response, {
+    nonce,
+    environment:
+      process.env.NODE_ENV === "development" ? "development" : "production",
+    enforceHttps: true,
+  });
+}
+
+export const onRequest = [securityMiddleware];

apps/web/server.ts

@@ -4,8 +4,9 @@ import express from "express";
 import { createServer } from "vite";
 
 import {
-  applySecurityHeaders,
-  shouldApplySecurityHeaders,
+  addSecurityHeaders,
+  generateNonce,
+  injectNonceIntoHTML,
 } from "./src/utils/security-headers";
 
 const port = process.env.PORT || 3000;
@@ -18,27 +19,29 @@ app.use((_, res, next) => {
   const originalJson = res.json;
   const originalSend = res.send;
 
+  // Store nonce on the response object for later use
+  res.locals.nonce = generateNonce();
+  const environment =
+    (process.env.NODE_ENV as "development" | "production") ?? "development";
+
   res.send = function (body) {
-    addSecurityHeaders(this);
+    addSecurityHeaders(this, {
+      environment,
+      nonce: res.locals.nonce,
+      enforceHttps: false,
+    });
     return originalSend.call(this, body);
   };
 
   res.json = function (obj) {
-    addSecurityHeaders(this);
+    addSecurityHeaders(this, {
+      environment,
+      nonce: res.locals.nonce,
+      enforceHttps: false,
+    });
     return originalJson.call(this, obj);
   };
 
-  function addSecurityHeaders(response: express.Response) {
-    const contentType = response.get("Content-Type");
-    if (shouldApplySecurityHeaders(contentType, response.statusCode)) {
-      applySecurityHeaders(response, {
-        environment:
-          process.env.NODE_ENV === "production" ? "production" : "development",
-        enforceHttps: process.env.NODE_ENV === "production",
-      });
-    }
-  }
-
   next();
 });
 
@@ -69,10 +72,13 @@ app.use("*all", async (req, res) => {
 
     const rendered = await render(fetchRequest);
 
-    const html = template
+    let html = template
       .replace(`<!--app-head-->`, rendered.headHtml ?? "")
       .replace(`<!--app-html-->`, "");
 
+    // Inject nonce into script tags
+    html = injectNonceIntoHTML(html, res.locals.nonce);
+
     res.status(200).set({ "Content-Type": "text/html" }).send(html);
   } catch (e: any) {
     vite?.ssrFixStacktrace(e);

apps/web/src/utils/security-headers.test.ts

@@ -0,0 +1,149 @@
+import { describe, expect, it } from "vitest";
+
+import { generateNonce, injectNonceIntoHTML } from "./security-headers";
+
+describe("Security headers functionality", () => {
+  describe("generateNonce", () => {
+    it("should generate a unique nonce each time", () => {
+      const nonce1 = generateNonce();
+      const nonce2 = generateNonce();
+
+      expect(nonce1).toBeTruthy();
+      expect(nonce2).toBeTruthy();
+      expect(nonce1).not.toBe(nonce2);
+    });
+
+    it("should generate a base64-encoded string", () => {
+      const nonce = generateNonce();
+
+      // Base64 string should only contain valid base64 characters
+      expect(nonce).toMatch(/^[A-Za-z0-9+/]+=*$/);
+    });
+  });
+
+  describe("injectNonceIntoHTML", () => {
+    const testNonce = "test-nonce-123";
+
+    it("should inject nonce into simple script tag", () => {
+      const html = '<script src="/test.js"></script>';
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toBe(
+        `<script nonce="${testNonce}" src="/test.js"></script>`
+      );
+    });
+
+    it("should inject nonce into script tag with type module", () => {
+      const html = '<script type="module" src="/test.js"></script>';
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toBe(
+        `<script nonce="${testNonce}" type="module" src="/test.js"></script>`
+      );
+    });
+
+    it("should inject nonce into script tag with multiple attributes", () => {
+      const html =
+        '<script type="module" crossorigin src="/assets/index-CeBMaJSY.js"></script>';
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toBe(
+        `<script nonce="${testNonce}" type="module" crossorigin src="/assets/index-CeBMaJSY.js"></script>`
+      );
+    });
+
+    it("should inject nonce into inline script tag", () => {
+      const html = '<script type="module">console.log("test");</script>';
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toBe(
+        `<script nonce="${testNonce}" type="module">console.log("test");</script>`
+      );
+    });
+
+    it("should inject nonce into complex inline script", () => {
+      const html = `<script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
+injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;</script>`;
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toContain(`<script nonce="${testNonce}" type="module">`);
+    });
+
+    it("should not modify script tags that already have nonce", () => {
+      const html = '<script nonce="existing-nonce" src="/test.js"></script>';
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toBe(html); // Should remain unchanged
+    });
+
+    it("should handle multiple script tags correctly", () => {
+      const html = `
+        <script src="/test1.js"></script>
+        <script nonce="existing" src="/test2.js"></script>
+        <script type="module" src="/test3.js"></script>
+      `;
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toContain(
+        `<script nonce="${testNonce}" src="/test1.js"></script>`
+      );
+      expect(result).toContain(
+        `<script nonce="existing" src="/test2.js"></script>`
+      );
+      expect(result).toContain(
+        `<script nonce="${testNonce}" type="module" src="/test3.js"></script>`
+      );
+    });
+
+    it("should handle the actual HTML from development mode", () => {
+      const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
+injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;</script>
+
+    <script type="module" src="/@vite/client"></script>
+
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dafthunk</title><meta name="description" content="Workflow execution platform." data-managed-tag="true"/><meta property="og:title" content="Dafthunk" data-managed-tag="true"/><meta property="og:description" content="Workflow execution platform." data-managed-tag="true"/><meta property="og:type" content="website" data-managed-tag="true"/><meta name="twitter:card" content="summary_large_image" data-managed-tag="true"/><meta name="twitter:title" content="Dafthunk" data-managed-tag="true"/><meta name="twitter:description" content="Workflow execution platform." data-managed-tag="true"/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/entry-client.tsx"></script>
+  </body>
+</html>`;
+
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      // Should inject nonce into all three script tags
+      const scriptMatches = result.match(/<script[^>]*>/g);
+      expect(scriptMatches).toHaveLength(3);
+
+      // All script tags should have the nonce
+      scriptMatches?.forEach((tag) => {
+        expect(tag).toContain(`nonce="${testNonce}"`);
+      });
+    });
+
+    it("should not affect non-script tags", () => {
+      const html = `
+        <div>content</div>
+        <script src="/test.js"></script>
+        <link rel="stylesheet" href="/style.css">
+      `;
+      const result = injectNonceIntoHTML(html, testNonce);
+
+      expect(result).toContain("<div>content</div>");
+      expect(result).toContain('<link rel="stylesheet" href="/style.css">');
+      expect(result).toContain(
+        `<script nonce="${testNonce}" src="/test.js"></script>`
+      );
+    });
+  });
+});