feat(security): add security headers to all responses

Reported by the 408 Solutions Security Team (https://www.408solutions.com).

Author: bchapuis

apps/api/src/routes/types.ts

@@ -1,9 +1,9 @@
 import { GetNodeTypesResponse, WorkflowType } from "@dafthunk/types";
 import { Hono } from "hono";
 
+import { optionalJwtMiddleware } from "../auth";
 import { ApiContext } from "../context";
 import { CloudflareNodeRegistry } from "../nodes/cloudflare-node-registry";
-import { optionalJwtMiddleware } from "../auth";
 
 const typeRoutes = new Hono<ApiContext>();
 

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

@@ -1,11 +1,29 @@
 import { initializeApiBaseUrl } from "../src/config/api";
 import { render } from "../src/entry-server";
+import {
+  applySecurityHeadersToResponse,
+  shouldApplySecurityHeaders,
+} from "../src/utils/security-headers";
 
 interface Env {
   ASSETS: Fetcher;
   VITE_API_HOST?: 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 const onRequest: PagesFunction<Env> = async (context) => {
   const { request, env } = context;
   initializeApiBaseUrl(env.VITE_API_HOST);
@@ -36,13 +54,15 @@ export const onRequest: PagesFunction<Env> = async (context) => {
       .replace(`<!--app-head-->`, rendered.headHtml ?? "")
       .replace(`<!--app-html-->`, "");
 
-    return new Response(html, {
+    const response = new Response(html, {
       headers: { "Content-Type": "text/html" },
       status: 200,
     });
+
+    return addSecurityHeaders(response);
   } catch (e: any) {
     if (e instanceof Response) {
-      return e;
+      return addSecurityHeaders(e);
     }
     console.error("SSR Function Error:", e.stack || e);
     try {
@@ -55,9 +75,14 @@ export const onRequest: PagesFunction<Env> = async (context) => {
     } catch (fetchError) {
       console.error("SSR Fallback ASSETS.fetch error:", fetchError);
     }
-    return new Response("Internal Server Error. Please try again later.", {
-      status: 500,
-      headers: { "Content-Type": "text/html" },
-    });
+    const errorResponse = new Response(
+      "Internal Server Error. Please try again later.",
+      {
+        status: 500,
+        headers: { "Content-Type": "text/html" },
+      }
+    );
+
+    return addSecurityHeaders(errorResponse);
   }
 };

apps/web/server.ts

@@ -3,9 +3,45 @@ import fs from "node:fs/promises";
 import express from "express";
 import { createServer } from "vite";
 
+import {
+  applySecurityHeaders,
+  shouldApplySecurityHeaders,
+} from "./src/utils/security-headers";
+
 const port = process.env.PORT || 3000;
 const app = express();
 
+/**
+ * Middleware to add security headers to responses
+ */
+app.use((_, res, next) => {
+  const originalJson = res.json;
+  const originalSend = res.send;
+
+  res.send = function (body) {
+    addSecurityHeaders(this);
+    return originalSend.call(this, body);
+  };
+
+  res.json = function (obj) {
+    addSecurityHeaders(this);
+    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();
+});
+
 const vite = await createServer({
   server: { middlewareMode: true },
   appType: "custom",

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

@@ -0,0 +1,115 @@
+/**
+ * Security headers configuration
+ */
+export interface SecurityHeadersConfig {
+  /** Enforce HTTPS via HSTS */
+  enforceHttps?: boolean;
+  /** Custom CSP directives */
+  customCsp?: Record<string, string | string[]>;
+  /** Environment mode */
+  environment?: "development" | "production";
+}
+
+/**
+ * Get security headers for HTTP responses
+ * Protects against clickjacking, XSS, MIME confusion, and other attacks
+ */
+export function getSecurityHeaders(
+  config: SecurityHeadersConfig = {}
+): Record<string, string> {
+  const {
+    enforceHttps = true,
+    customCsp = {},
+    environment = "production",
+  } = config;
+
+  // Base CSP configuration
+  const baseCsp = {
+    "default-src": "'self'",
+    "script-src": "'self' 'unsafe-inline' 'unsafe-eval' https://static.cloudflareinsights.com", // React/Vite compatibility + Cloudflare Insights
+    "style-src": "'self' 'unsafe-inline'", // Tailwind/CSS-in-JS support
+    "img-src": "'self' data: https:",
+    "font-src": "'self' data:",
+    "connect-src": "'self' https://api.dafthunk.com", // Allow API connections
+    "frame-src": "'self' https://www.youtube.com", // Allow self-iframes and YouTube embeds
+    "frame-ancestors": "'none'", // Prevents clickjacking
+    "base-uri": "'self'",
+    "form-action": "'self'",
+    "object-src": "'none'",
+    "upgrade-insecure-requests": true,
+  };
+
+  const mergedCsp = { ...baseCsp, ...customCsp };
+
+  // Convert to CSP string
+  const cspString = Object.entries(mergedCsp)
+    .map(([directive, value]) => {
+      if (typeof value === "boolean") {
+        return value ? directive : "";
+      }
+      const valueStr = Array.isArray(value) ? value.join(" ") : value;
+      return `${directive} ${valueStr}`;
+    })
+    .filter(Boolean)
+    .join("; ");
+
+  const headers: Record<string, string> = {
+    "X-Frame-Options": "DENY", // Clickjacking protection
+    "Content-Security-Policy": cspString,
+    "X-Content-Type-Options": "nosniff", // MIME protection
+    "Referrer-Policy": "strict-origin-when-cross-origin",
+    "X-XSS-Protection": "1; mode=block", // Legacy XSS protection
+  };
+
+  // Add HSTS in production only
+  if (enforceHttps && environment === "production") {
+    headers["Strict-Transport-Security"] =
+      "max-age=31536000; includeSubDomains; preload";
+  }
+
+  return headers;
+}
+
+/** Apply security headers to Express response */
+export function applySecurityHeaders(
+  res: { set: (headers: Record<string, string>) => void },
+  config?: SecurityHeadersConfig
+): void {
+  const headers = getSecurityHeaders(config);
+  res.set(headers);
+}
+
+/** Apply security headers to Web API Response */
+export function applySecurityHeadersToResponse(
+  response: Response,
+  config?: SecurityHeadersConfig
+): Response {
+  const headers = getSecurityHeaders(config);
+
+  const newHeaders = new Headers(response.headers);
+  Object.entries(headers).forEach(([key, value]) => {
+    newHeaders.set(key, value);
+  });
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: newHeaders,
+  });
+}
+
+/** Check if response should have security headers (HTML and error responses) */
+export function shouldApplySecurityHeaders(
+  contentType?: string | null,
+  statusCode?: number
+): boolean {
+  if (!contentType && statusCode && statusCode >= 400) {
+    return true; // Error responses
+  }
+
+  if (contentType?.includes("text/html")) {
+    return true;
+  }
+
+  return false;
+}