what-server 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-server",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "What Framework - SSR, islands architecture, static generation",
   "type": "module",
   "main": "src/index.js",
@@ -32,7 +32,7 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "what-core": "^0.3.0"
+    "what-core": "^0.4.0"
   },
   "repository": {
     "type": "git",

package/src/actions.js

@@ -19,10 +19,68 @@ import { signal, batch } from 'what-core';
 const actionRegistry = new Map();
 let actionIdCounter = 0;
 
+// --- CSRF Protection ---
+// Server generates a token per session; client sends it with every action request.
+// The token is injected into the page via a meta tag or embedded in the server response.
+
+// Client: read the CSRF token from the page meta tag or cookie
+// Re-reads on every call to handle token rotation
+function getCsrfToken() {
+  if (typeof document !== 'undefined') {
+    // Try meta tag first
+    const meta = document.querySelector('meta[name="what-csrf-token"]');
+    if (meta) {
+      return meta.getAttribute('content');
+    }
+    // Try cookie
+    const match = document.cookie.match(/(?:^|;\s*)what-csrf=([^;]+)/);
+    if (match) {
+      return decodeURIComponent(match[1]);
+    }
+  }
+  return null;
+}
+
+// Server: generate a CSRF token (call this per session/request)
+export function generateCsrfToken() {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  // Fallback for older Node
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+// Server: validate CSRF token from request header against session token
+export function validateCsrfToken(requestToken, sessionToken) {
+  if (!requestToken || !sessionToken) return false;
+  // Constant-time comparison to prevent timing attacks
+  if (requestToken.length !== sessionToken.length) return false;
+  let result = 0;
+  for (let i = 0; i < requestToken.length; i++) {
+    result |= requestToken.charCodeAt(i) ^ sessionToken.charCodeAt(i);
+  }
+  return result === 0;
+}
+
+// Server: middleware helper to inject CSRF meta tag into HTML
+export function csrfMetaTag(token) {
+  // HTML-escape the token to prevent XSS if a non-standard value is used
+  const escaped = String(token).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return `<meta name="what-csrf-token" content="${escaped}">`;
+}
+
 // --- Define a server action ---
 
+function generateActionId() {
+  // Generate a random ID that's not easily enumerable
+  const rand = typeof crypto !== 'undefined' && crypto.getRandomValues
+    ? Array.from(crypto.getRandomValues(new Uint8Array(6)), b => b.toString(16).padStart(2, '0')).join('')
+    : Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+  return `a_${rand}`;
+}
+
 export function action(fn, options = {}) {
-  const id = options.id || `action_${++actionIdCounter}`;
+  const id = options.id || generateActionId();
   const { onError, onSuccess, revalidate } = options;
 
   // Server-side: register the action
@@ -37,14 +95,24 @@ export function action(fn, options = {}) {
       return fn(...args);
     }
 
-    // Client-side: call via fetch
+    // Client-side: call via fetch with timeout support
+    const timeout = options.timeout || 30000; // Default 30s timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
     try {
+      const csrfToken = getCsrfToken();
+      const headers = {
+        'Content-Type': 'application/json',
+        'X-What-Action': id,
+      };
+      if (csrfToken) headers['X-CSRF-Token'] = csrfToken;
+
       const response = await fetch('/__what_action', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-What-Action': id,
-        },
+        headers,
+        credentials: 'same-origin',
+        signal: controller.signal,
         body: JSON.stringify({ args }),
       });
 
@@ -65,8 +133,16 @@ export function action(fn, options = {}) {
 
       return result;
     } catch (error) {
+      if (error.name === 'AbortError') {
+        const timeoutError = new Error(`Action "${id}" timed out after ${timeout}ms`);
+        timeoutError.code = 'TIMEOUT';
+        if (onError) onError(timeoutError);
+        throw timeoutError;
+      }
       if (onError) onError(error);
       throw error;
+    } finally {
+      clearTimeout(timeoutId);
     }
   }
 
@@ -184,6 +260,7 @@ export function useFormAction(actionFn, options = {}) {
 export function useOptimistic(initialValue, reducer) {
   const value = signal(initialValue);
   const pending = signal([]);
+  const baseValue = signal(initialValue); // Track the confirmed server value
 
   function addOptimistic(action) {
     const optimisticValue = reducer(value.peek(), action);
@@ -193,24 +270,57 @@ export function useOptimistic(initialValue, reducer) {
     });
   }
 
-  function resolve(action) {
-    pending.set(pending.peek().filter(a => a !== action));
+  function resolve(action, serverValue) {
+    batch(() => {
+      pending.set(pending.peek().filter(a => a !== action));
+      if (serverValue !== undefined) {
+        baseValue.set(serverValue);
+        // Recompute optimistic state from new base + remaining pending actions
+        let current = serverValue;
+        for (const a of pending.peek()) {
+          current = reducer(current, a);
+        }
+        value.set(current);
+      }
+    });
   }
 
   function rollback(action, realValue) {
     batch(() => {
-      pending.set(pending.peek().filter(a => a !== action));
-      value.set(realValue);
+      const newPending = pending.peek().filter(a => a !== action);
+      pending.set(newPending);
+      const base = realValue !== undefined ? realValue : baseValue.peek();
+      baseValue.set(base);
+      // Recompute from base + remaining pending actions
+      let current = base;
+      for (const a of newPending) {
+        current = reducer(current, a);
+      }
+      value.set(current);
     });
   }
 
+  // Auto-rollback helper: wraps an async action with automatic rollback on error
+  async function withOptimistic(action, asyncFn) {
+    addOptimistic(action);
+    try {
+      const result = await asyncFn();
+      resolve(action, result);
+      return result;
+    } catch (e) {
+      rollback(action);
+      throw e;
+    }
+  }
+
   return {
     value: () => value(),
     isPending: () => pending().length > 0,
     addOptimistic,
     resolve,
     rollback,
-    set: (v) => value.set(v),
+    withOptimistic,
+    set: (v) => { value.set(v); baseValue.set(v); },
   };
 }
 
@@ -241,18 +351,49 @@ export function invalidatePath(path) {
 // --- Server-side action handler ---
 // Add this to your server middleware.
 
-export function handleActionRequest(req, actionId, args) {
+export function handleActionRequest(req, actionId, args, options = {}) {
+  const { csrfToken: sessionCsrfToken, skipCsrf = false } = options;
+
+  // Validate CSRF token unless explicitly skipped
+  if (!skipCsrf) {
+    if (!sessionCsrfToken) {
+      // Fail closed: no CSRF token configured means the developer forgot to set it up.
+      // This prevents silent security vulnerabilities in production.
+      return Promise.resolve({
+        status: 500,
+        body: {
+          message: '[what] CSRF token not configured. ' +
+            'Pass { csrfToken: sessionToken } to handleActionRequest, ' +
+            'or { skipCsrf: true } to explicitly opt out.'
+        }
+      });
+    }
+    const requestCsrfToken = req?.headers?.['x-csrf-token'] || req?.headers?.['X-CSRF-Token'];
+    if (!validateCsrfToken(requestCsrfToken, sessionCsrfToken)) {
+      return Promise.resolve({ status: 403, body: { message: 'Invalid CSRF token' } });
+    }
+  }
+
   const action = actionRegistry.get(actionId);
   if (!action) {
-    return { status: 404, body: { message: `Action "${actionId}" not found` } };
+    return Promise.resolve({ status: 404, body: { message: 'Action not found' } });
+  }
+
+  // Validate args is an array to prevent prototype pollution
+  if (!Array.isArray(args)) {
+    return Promise.resolve({ status: 400, body: { message: 'Invalid action arguments' } });
   }
 
   return action.fn(...args)
     .then(result => ({ status: 200, body: result }))
-    .catch(error => ({
-      status: 500,
-      body: { message: error.message || 'Action failed' },
-    }));
+    .catch(error => {
+      // Log the full error server-side, return generic message to client
+      console.error(`[what] Action "${actionId}" error:`, error);
+      return {
+        status: 500,
+        body: { message: 'Action failed' },
+      };
+    });
 }
 
 // --- Get all registered actions (for SSR/build) ---