fix(csp): runtime variable resolution for CSP

Author: waleedlatif

apps/sim/lib/security/csp.ts

@@ -1,4 +1,5 @@
-import { env } from '../env'
+import crypto from 'crypto'
+import { env, getEnv } from '../env'
 
 /**
  * Content Security Policy (CSP) configuration builder
@@ -20,7 +21,8 @@ export interface CSPDirectives {
   'object-src'?: string[]
 }
 
-export const cspDirectives: CSPDirectives = {
+// Build-time CSP directives (for next.config.ts)
+export const buildTimeCSPDirectives: CSPDirectives = {
   'default-src': ["'self'"],
 
   'script-src': [
@@ -115,10 +117,60 @@ export function buildCSPString(directives: CSPDirectives): string {
 }
 
 /**
- * Get the main CSP policy string
+ * Generate runtime CSP header with dynamic environment variables (safer approach)
+ * This maintains compatibility with existing inline scripts while fixing Docker env var issues
+ */
+export function generateRuntimeCSP(): string {
+  const socketUrl = getEnv('NEXT_PUBLIC_SOCKET_URL') || 'http://localhost:3002'
+  const socketWsUrl =
+    socketUrl.replace('http://', 'ws://').replace('https://', 'wss://') || 'ws://localhost:3002'
+  const appUrl = getEnv('NEXT_PUBLIC_APP_URL') || ''
+  const ollamaUrl = getEnv('OLLAMA_URL') || 'http://localhost:11434'
+
+  return `
+    default-src 'self';
+    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google.com https://apis.google.com https://*.vercel-scripts.com https://*.vercel-insights.com https://vercel.live https://*.vercel.live https://vercel.com https://*.vercel.app https://vitals.vercel-insights.com https://b2bjsstore.s3.us-west-2.amazonaws.com;
+    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
+    img-src 'self' data: blob: https://*.googleusercontent.com https://*.google.com https://*.atlassian.com https://cdn.discordapp.com https://*.githubusercontent.com https://*.public.blob.vercel-storage.com;
+    media-src 'self' blob:;
+    font-src 'self' https://fonts.gstatic.com;
+    connect-src 'self' ${appUrl} ${ollamaUrl} ${socketUrl} ${socketWsUrl} https://*.up.railway.app wss://*.up.railway.app https://api.browser-use.com https://api.exa.ai https://api.firecrawl.dev https://*.googleapis.com https://*.amazonaws.com https://*.s3.amazonaws.com https://*.blob.core.windows.net https://*.vercel-insights.com https://vitals.vercel-insights.com https://*.atlassian.com https://*.supabase.co https://vercel.live https://*.vercel.live https://vercel.com https://*.vercel.app wss://*.vercel.app https://pro.ip-api.com;
+    frame-src https://drive.google.com https://docs.google.com https://*.google.com;
+    frame-ancestors 'self';
+    form-action 'self';
+    base-uri 'self';
+    object-src 'none';
+  `
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+}
+
+/**
+ * Get the main CSP policy string (build-time)
  */
 export function getMainCSPPolicy(): string {
-  return buildCSPString(cspDirectives)
+  return buildCSPString(buildTimeCSPDirectives)
+}
+
+/**
+ * Generate a cryptographically secure nonce for CSP
+ */
+export function generateNonce(): string {
+  return Buffer.from(crypto.randomUUID()).toString('base64')
+}
+
+/**
+ * Get the current request's nonce from headers (for use in app components)
+ */
+export function getNonce(): string | null {
+  try {
+    // This requires dynamic imports to avoid edge runtime issues
+    const { headers } = require('next/headers')
+    const headersList = headers()
+    return headersList.get('x-nonce')
+  } catch {
+    return null
+  }
 }
 
 /**
@@ -129,22 +181,24 @@ export function getWorkflowExecutionCSPPolicy(): string {
 }
 
 /**
- * Add a source to a specific directive
+ * Add a source to a specific directive (modifies build-time directives)
  */
 export function addCSPSource(directive: keyof CSPDirectives, source: string): void {
-  if (!cspDirectives[directive]) {
-    cspDirectives[directive] = []
+  if (!buildTimeCSPDirectives[directive]) {
+    buildTimeCSPDirectives[directive] = []
   }
-  if (!cspDirectives[directive]!.includes(source)) {
-    cspDirectives[directive]!.push(source)
+  if (!buildTimeCSPDirectives[directive]!.includes(source)) {
+    buildTimeCSPDirectives[directive]!.push(source)
   }
 }
 
 /**
- * Remove a source from a specific directive
+ * Remove a source from a specific directive (modifies build-time directives)
  */
 export function removeCSPSource(directive: keyof CSPDirectives, source: string): void {
-  if (cspDirectives[directive]) {
-    cspDirectives[directive] = cspDirectives[directive]!.filter((s: string) => s !== source)
+  if (buildTimeCSPDirectives[directive]) {
+    buildTimeCSPDirectives[directive] = buildTimeCSPDirectives[directive]!.filter(
+      (s: string) => s !== source
+    )
   }
 }

apps/sim/middleware.ts

@@ -2,6 +2,7 @@ import { getSessionCookie } from 'better-auth/cookies'
 import { type NextRequest, NextResponse } from 'next/server'
 import { isDev } from './lib/environment'
 import { createLogger } from './lib/logs/console/logger'
+import { generateRuntimeCSP } from './lib/security/csp'
 import { getBaseDomain } from './lib/urls/utils'
 
 const logger = createLogger('Middleware')
@@ -159,6 +160,16 @@ export async function middleware(request: NextRequest) {
 
   const response = NextResponse.next()
   response.headers.set('Vary', 'User-Agent')
+
+  // Generate runtime CSP for main application routes that need dynamic environment variables
+  if (
+    url.pathname.startsWith('/workspace') ||
+    url.pathname.startsWith('/chat') ||
+    url.pathname === '/'
+  ) {
+    response.headers.set('Content-Security-Policy', generateRuntimeCSP())
+  }
+
   return response
 }
 

apps/sim/next.config.ts

@@ -133,9 +133,10 @@ const nextConfig: NextConfig = {
           },
         ],
       },
-      // Apply security headers to all routes
+      // Apply security headers to routes not handled by middleware runtime CSP
+      // Middleware handles: /, /workspace/*, /chat/*
       {
-        source: '/:path*',
+        source: '/((?!workspace|chat$).*)',
         headers: [
           {
             key: 'X-Content-Type-Options',