feat(security): add no-op middleware for CSP in development environment

Author: stephenway

apps/web/app/lib/security.ts

@@ -31,14 +31,29 @@ const allowedOrigins = [env.ALLOWED_ORIGIN_1, env.ALLOWED_ORIGIN_2].filter(
 );
 
 // Security middleware configurations
-export const apiSecurity = createApiSecurity(allowedOrigins, logger);
+// For development, create a no-op middleware to disable CSP
+export const apiSecurity =
+  process.env.NODE_ENV === 'development'
+    ? (req: any, res: any, next: any) => {
+        // Skip API security in development to avoid CSP issues
+        next();
+      }
+    : createApiSecurity(allowedOrigins, logger);
 export const authSecurity = createAuthSecurity(allowedOrigins, logger);
 export const formSecurity = createFormSecurity(allowedOrigins, logger);
 export const passwordResetSecurity = createPasswordResetSecurity(
   allowedOrigins,
   logger
 );
-export const staticSecurity = createStaticSecurity();
+// For development, we'll disable CSP entirely to allow inline scripts
+// In production, use the default secure CSP
+export const staticSecurity =
+  process.env.NODE_ENV === 'development'
+    ? (req: any, res: any, next: any) => {
+        // Skip CSP in development
+        next();
+      }
+    : createStaticSecurity();
 
 // API security middleware
 export const validateApiKey = createValidateApiKey(logger);

apps/web/server/app.ts

@@ -3,7 +3,11 @@ import express from 'express';
 import 'react-router';
 
 // Import security middleware
-import { apiSecurity, formatApiResponse } from '../app/lib/security';
+import {
+  apiSecurity,
+  formatApiResponse,
+  staticSecurity,
+} from '../app/lib/security';
 
 declare module 'react-router' {
   interface AppLoadContext {
@@ -14,6 +18,7 @@ declare module 'react-router' {
 export const app = express();
 
 // Apply security middleware
+app.use(staticSecurity);
 app.use(apiSecurity);
 app.use(formatApiResponse);