create-jen-app 1.2.3 → 1.2.4

package/templates/static/lib/runtime/render.js

@@ -1,35 +1,36 @@
-/*
- * This file is part of Jen.js.
- * Copyright (C) 2026 oopsio
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
- */
 import {
   createRouteMiddlewareContext,
   executeRouteMiddleware,
 } from "../core/middleware-hooks.js";
+import {
+  scanLayouts,
+  buildLayoutHierarchy,
+  resolveLayoutStack,
+  renderWithLayoutStack,
+  collectLayoutHeads,
+} from "../core/layouts/index.js";
 import { createIslandMarker } from "./islands.js";
-import { h } from "preact";
 import renderToString from "preact-render-to-string";
 import { pathToFileURL } from "node:url";
 import { join } from "node:path";
-import { mkdirSync, existsSync } from "node:fs";
+import {
+  mkdirSync,
+  existsSync,
+  readFileSync,
+  statSync,
+  writeFileSync,
+} from "node:fs";
+import { createHash } from "node:crypto";
 import esbuild from "esbuild";
 import {
   vueEsbuildPlugin,
   svelteEsbuildPlugin,
 } from "../compilers/esbuild-plugins.js";
+/**
+ * Maximum data size for serialization (1MB).
+ * Prevents DoS attacks via extremely large payloads.
+ */
+const MAX_DATA_SIZE = 1024 * 1024; // 1MB
 /**
  * Escapes HTML special characters to prevent injection attacks.
  * Used when serializing user data or dynamic values into HTML attributes or script content.
@@ -45,23 +46,134 @@ function escapeHtml(s) {
     .replaceAll('"', "&quot;")
     .replaceAll("'", "&#39;");
 }
+/**
+ * Recursively escapes all strings in an object to prevent XSS attacks.
+ * Traverses nested objects, arrays, and all string values.
+ * Non-string, non-object values are returned as-is.
+ *
+ * @param value The value to escape (can be any type).
+ * @returns A new object with all strings escaped.
+ */
+function recursivelyEscapeStrings(value) {
+  if (typeof value === "string") {
+    return escapeHtml(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(recursivelyEscapeStrings);
+  }
+  if (value !== null && typeof value === "object") {
+    const escaped = {};
+    for (const [key, val] of Object.entries(value)) {
+      escaped[key] = recursivelyEscapeStrings(val);
+    }
+    return escaped;
+  }
+  // Return primitives (numbers, booleans, null, undefined) as-is
+  return value;
+}
+/**
+ * In-memory deduplication map for concurrent transpile requests.
+ * Prevents race conditions where multiple concurrent requests transpile the same file.
+ * Maps from cache key to a Promise that resolves to the output file path.
+ */
+const transpileInProgress = new Map();
+/**
+ * Computes a hash of the file content to track changes.
+ * Uses SHA-256 to create a unique hash of the source file.
+ * This enables cache invalidation when the file changes.
+ *
+ * @param filePath The absolute path to the file.
+ * @returns A short hash of the file content (first 8 chars).
+ */
+function getFileHash(filePath) {
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    const hash = createHash("sha256").update(content).digest("hex");
+    return hash.slice(0, 8);
+  } catch {
+    return "unknown";
+  }
+}
+/**
+ * Gets the modification time of a file.
+ * Used to detect stale cache entries.
+ *
+ * @param filePath The absolute path to the file.
+ * @returns The modification time in milliseconds, or 0 if file doesn't exist.
+ */
+function getFileMtime(filePath) {
+  try {
+    return statSync(filePath).mtimeMs;
+  } catch {
+    return 0;
+  }
+}
 /**
  * Resolves the cache directory path for compiled route modules.
- * Transpiled TypeScript/JSX/Vue/Svelte routes are cached to avoid repeated compilation.
+ * Cache key includes file hash to track changes.
  * Cache is stored in node_modules/.jen/cache to leverage .gitignore and keep the workspace clean.
  * Path names are flattened to avoid nested directory creation issues on Windows.
  *
+ * Cache metadata file (.meta) stores:
+ * - Original file modification time
+ * - File content hash
+ * - Cache creation time
+ *
  * @param filePath The absolute path to the original source file.
- * @returns The absolute path to the cached compiled output file.
+ * @returns Object with cache file path and metadata file path.
  */
 function getCachePath(filePath) {
   const cacheDir = join(process.cwd(), "node_modules", ".jen", "cache");
   if (!existsSync(cacheDir)) {
     mkdirSync(cacheDir, { recursive: true });
   }
-  // Flatten path to avoid directory structure issues.
+  // Flatten path and append file hash for uniqueness
   const flatName = filePath.replace(/[\\/:]/g, "_").replace(/^_+/, "");
-  return join(cacheDir, flatName + ".mjs");
+  const fileHash = getFileHash(filePath);
+  const cacheName = `${flatName}_${fileHash}`;
+  const cachePath = join(cacheDir, cacheName + ".mjs");
+  const metaPath = join(cacheDir, cacheName + ".meta");
+  return { cachePath, metaPath };
+}
+/**
+ * Checks if cache is still valid (file hasn't changed).
+ * Compares file hash and modification time from metadata.
+ *
+ * @param filePath The absolute path to the source file.
+ * @param metaPath The absolute path to the metadata file.
+ * @returns true if cache is valid, false if file changed or metadata missing.
+ */
+function isCacheValid(filePath, metaPath) {
+  try {
+    const meta = JSON.parse(readFileSync(metaPath, "utf-8"));
+    const currentHash = getFileHash(filePath);
+    const currentMtime = getFileMtime(filePath);
+    // Check if file hash or mtime changed
+    return meta.fileHash === currentHash && meta.fileMtime === currentMtime;
+  } catch {
+    return false;
+  }
+}
+/**
+ * Writes cache metadata to track file state.
+ * Stores file hash, mtime, and cache time for future validation.
+ *
+ * @param filePath The absolute path to the source file.
+ * @param metaPath The absolute path to the metadata file.
+ */
+function writeCacheMeta(filePath, metaPath) {
+  try {
+    const meta = {
+      filePath,
+      fileHash: getFileHash(filePath),
+      fileMtime: getFileMtime(filePath),
+      cacheTime: Date.now(),
+    };
+    writeFileSync(metaPath, JSON.stringify(meta, null, 2));
+  } catch (err) {
+    // Non-critical: log but don't fail transpilation
+    console.warn(`Failed to write cache metadata: ${metaPath}`, err);
+  }
 }
 /**
  * Renders a route module to a complete HTML document.
@@ -92,6 +204,14 @@ function getCachePath(filePath) {
  */
 export async function renderRouteToHtml(opts) {
   const { config, route, url, params, query, headers, cookies } = opts;
+  // Scan and build layout hierarchy for this route
+  const layoutEntries = scanLayouts(config);
+  const applicableLayouts = buildLayoutHierarchy(
+    layoutEntries,
+    route.filePath,
+    config.siteDir,
+  );
+  const layoutStack = await resolveLayoutStack(applicableLayouts);
   // Transpile route file if needed. TypeScript and JSX require compilation to JavaScript.
   // Vue and Svelte components also need transpilation to Preact-compatible JavaScript.
   let moduleUrl = route.filePath;
@@ -100,19 +220,43 @@ export async function renderRouteToHtml(opts) {
     route.filePath.toLowerCase().endsWith(e),
   );
   if (requiresTranspile) {
-    const outfile = getCachePath(route.filePath);
-    await esbuild.build({
-      entryPoints: [route.filePath],
-      outfile,
-      format: "esm",
-      platform: "node", // Node platform for SSR supports built-ins like fs, path, etc.
-      target: "es2022",
-      bundle: true, // Bundle all local imports into a single file for simplicity.
-      external: ["preact", "preact-render-to-string", "jenjs"], // Keep framework imports external.
-      write: true,
-      plugins: [vueEsbuildPlugin(), svelteEsbuildPlugin()],
-    });
-    moduleUrl = outfile;
+    const { cachePath, metaPath } = getCachePath(route.filePath);
+    // Check if valid cache exists (file hasn't changed)
+    if (existsSync(cachePath) && isCacheValid(route.filePath, metaPath)) {
+      moduleUrl = cachePath;
+    } else {
+      // Use deduplication map to prevent concurrent transpile races
+      const cacheKey = cachePath;
+      if (transpileInProgress.has(cacheKey)) {
+        // Another request is already transpiling this file, wait for it
+        moduleUrl = await transpileInProgress.get(cacheKey);
+      } else {
+        // Start transpilation and store promise for deduplication
+        const transpilePromise = (async () => {
+          try {
+            await esbuild.build({
+              entryPoints: [route.filePath],
+              outfile: cachePath,
+              format: "esm",
+              platform: "node", // Node platform for SSR supports built-ins like fs, path, etc.
+              target: "es2022",
+              bundle: true, // Bundle all local imports into a single file for simplicity.
+              external: ["preact", "preact-render-to-string", "jenjs"], // Keep framework imports external.
+              write: true,
+              plugins: [vueEsbuildPlugin(), svelteEsbuildPlugin()],
+            });
+            // Write metadata after successful transpilation
+            writeCacheMeta(route.filePath, metaPath);
+            return cachePath;
+          } finally {
+            // Remove from in-progress map when done
+            transpileInProgress.delete(cacheKey);
+          }
+        })();
+        transpileInProgress.set(cacheKey, transpilePromise);
+        moduleUrl = await transpilePromise;
+      }
+    }
   }
   // Cache busting via query parameter ensures fresh module evaluation even if file is unchanged.
   // This is critical because esbuild may use cached builds and we need the latest code for SSR.
@@ -181,8 +325,13 @@ export async function renderRouteToHtml(opts) {
   const Page = mod.default;
   // Check if hydration is disabled. Set to false for purely static pages with no client-side interactivity.
   const shouldHydrate = mod.hydrate !== false;
-  const app = h(Page, { data, params, query });
-  // Render the page component to a static HTML string.
+  // Render with layout hierarchy wrapping the page component
+  const app = renderWithLayoutStack(layoutStack, Page, {
+    data,
+    params,
+    query,
+  });
+  // Render the page component (with layouts) to a static HTML string.
   // Preact rendering at this stage is purely static; hydration happens on the client.
   let bodyHtml = renderToString(app);
   // Check for island components that need selective hydration on the client.
@@ -202,18 +351,23 @@ export async function renderRouteToHtml(opts) {
       bodyHtml = bodyHtml.replace("</div>", `${marker}</div>`);
     }
   }
-  // Collect all head elements from configuration and the route's Head component.
-  // Head components allow per-route customization of meta tags, title, links, etc.
+  // Collect all head elements from configuration, layout components, and the route's Head component.
+  // Head components are collected from root layout to page, allowing each layer to contribute meta tags.
   const headParts = [];
   headParts.push(...config.inject.head);
-  if (mod.Head) {
+  // Collect heads from layout stack
+  const layoutHeads = collectLayoutHeads(layoutStack, mod.Head, {
+    data,
+    params,
+    query,
+  });
+  for (const headNode of layoutHeads) {
     try {
-      const headNode = h(mod.Head, { data, params, query });
       const headHtml = renderToString(headNode);
       headParts.push(headHtml);
     } catch (err) {
       console.error(
-        `Failed to render Head component for ${route.filePath}:`,
+        `Failed to render Head component:`,
         err instanceof Error ? err.message : String(err),
       );
     }
@@ -232,13 +386,17 @@ ${headParts.join("\n")}
   // Only inject hydration script if enabled for this route.
   // Hydration-disabled routes are purely static and require no JavaScript.
   if (shouldHydrate) {
-    // Serialize loader and route data for the client. Must escape </script to prevent injection attacks.
-    // The client uses this data to reconstruct the component tree and populate props.
-    const frameworkDataStr = JSON.stringify(
-      { data, params, query },
-      null,
-      2,
-    ).replace(/<\/script/gi, "<\\/script");
+    // Validate data size before serialization to prevent DoS attacks.
+    const dataToSerialize = { data, params, query };
+    const frameworkData = recursivelyEscapeStrings(dataToSerialize);
+    const frameworkDataStr = JSON.stringify(frameworkData, null, 2);
+    // Check size of serialized data
+    if (frameworkDataStr.length > MAX_DATA_SIZE) {
+      throw new Error(
+        `Framework data exceeds maximum size of ${MAX_DATA_SIZE} bytes. ` +
+          `Current size: ${frameworkDataStr.length} bytes. This may indicate a DoS attempt or excessive data in loader/middleware.`,
+      );
+    }
     const hydrateFile = `/__hydrate?file=${encodeURIComponent(route.filePath)}`;
     html += `
   <script id="__FRAMEWORK_DATA__" type="application/json">

package/templates/static/lib/security/security-config.js

@@ -0,0 +1,60 @@
+/**
+ * Default security configuration (sensible defaults for production).
+ */
+export const DEFAULT_SECURITY_CONFIG = {
+  headers: {
+    csp: {
+      enabled: true,
+      directives: {
+        "default-src": ["'self'"],
+        "script-src": ["'self'", "'unsafe-inline'"],
+        "style-src": ["'self'", "'unsafe-inline'"],
+        "img-src": ["'self'", "data:", "https:"],
+        "font-src": ["'self'", "data:"],
+        "connect-src": ["'self'"],
+      },
+      reportOnly: false,
+    },
+    hsts: {
+      enabled: true,
+      maxAge: 31536000,
+      includeSubDomains: true,
+      preload: false,
+    },
+    cors: {
+      enabled: false,
+      origins: ["*"],
+      methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
+      credentials: false,
+    },
+    frameOptions: {
+      enabled: true,
+      value: "SAMEORIGIN",
+    },
+    contentTypeOptions: true,
+    referrerPolicy: "strict-origin-when-cross-origin",
+    permissionsPolicy: {
+      enabled: true,
+      directives: {
+        geolocation: ["none"],
+        microphone: ["none"],
+        camera: ["none"],
+      },
+    },
+  },
+  csrf: {
+    enabled: true,
+    cookieName: "__jen_csrf",
+    headerName: "X-CSRF-Token",
+  },
+  validation: {
+    enabled: true,
+    maxBodySize: 10 * 1024 * 1024, // 10MB
+  },
+  rateLimit: {
+    enabled: false,
+    maxRequests: 100,
+    windowSeconds: 60,
+    skipPaths: ["/health"],
+  },
+};

package/templates/static/lib/security/security-middleware.js

@@ -0,0 +1,229 @@
+import { DEFAULT_SECURITY_CONFIG } from "./security-config.js";
+/**
+ * Security headers middleware for Jen.js.
+ *
+ * Applies security HTTP headers to responses based on configuration.
+ * Includes CSP, HSTS, CORS, and other protection headers.
+ *
+ * @example
+ * ```typescript
+ * import { securityHeadersMiddleware } from "jenjs";
+ *
+ * // Use in middleware pipeline
+ * app.use(securityHeadersMiddleware(securityConfig));
+ * ```
+ */
+export function securityHeadersMiddleware(config) {
+  const mergedConfig = {
+    ...DEFAULT_SECURITY_CONFIG,
+    ...config,
+    headers: {
+      ...DEFAULT_SECURITY_CONFIG.headers,
+      ...config?.headers,
+    },
+  };
+  return async (context) => {
+    const headers = mergedConfig.headers || {};
+    // Content Security Policy
+    if (headers.csp?.enabled) {
+      const cspValue = buildCSPHeader(headers.csp);
+      const headerName = headers.csp.reportOnly
+        ? "Content-Security-Policy-Report-Only"
+        : "Content-Security-Policy";
+      context.res.setHeader(headerName, cspValue);
+    }
+    // HTTP Strict Transport Security
+    if (headers.hsts?.enabled) {
+      const hstsValue = buildHSTSHeader(headers.hsts);
+      context.res.setHeader("Strict-Transport-Security", hstsValue);
+    }
+    // X-Frame-Options
+    if (headers.frameOptions?.enabled) {
+      const frameValue =
+        headers.frameOptions.value === "ALLOW-FROM"
+          ? `${headers.frameOptions.value} ${headers.frameOptions.uri}`
+          : headers.frameOptions.value || "SAMEORIGIN";
+      context.res.setHeader("X-Frame-Options", frameValue);
+    }
+    // X-Content-Type-Options
+    if (headers.contentTypeOptions) {
+      context.res.setHeader("X-Content-Type-Options", "nosniff");
+    }
+    // Referrer-Policy
+    if (headers.referrerPolicy) {
+      context.res.setHeader("Referrer-Policy", headers.referrerPolicy);
+    }
+    // Permissions-Policy
+    if (headers.permissionsPolicy?.enabled) {
+      const policyValue = buildPermissionsPolicyHeader(
+        headers.permissionsPolicy,
+      );
+      if (policyValue) {
+        context.res.setHeader("Permissions-Policy", policyValue);
+      }
+    }
+    // CORS Headers
+    if (headers.cors?.enabled) {
+      applyCORSHeaders(context, headers.cors);
+    }
+  };
+}
+/**
+ * Build Content Security Policy header value.
+ */
+function buildCSPHeader(config) {
+  if (!config.directives) {
+    return "";
+  }
+  return Object.entries(config.directives)
+    .map(([key, values]) => `${key} ${values.join(" ")}`)
+    .join("; ");
+}
+/**
+ * Build Strict-Transport-Security header value.
+ */
+function buildHSTSHeader(config) {
+  const parts = [];
+  if (config.maxAge) {
+    parts.push(`max-age=${config.maxAge}`);
+  }
+  if (config.includeSubDomains) {
+    parts.push("includeSubDomains");
+  }
+  if (config.preload) {
+    parts.push("preload");
+  }
+  return parts.join("; ");
+}
+/**
+ * Build Permissions-Policy header value.
+ */
+function buildPermissionsPolicyHeader(config) {
+  if (!config.directives) {
+    return "";
+  }
+  return Object.entries(config.directives)
+    .map(([key, value]) => {
+      if (typeof value === "string") {
+        return `${key}=(${value})`;
+      }
+      return `${key}=(${value.join(" ")})`;
+    })
+    .join(", ");
+}
+/**
+ * Apply CORS headers to response.
+ */
+function applyCORSHeaders(context, config) {
+  const origin = context.req.headers.origin || "";
+  const allowedOrigins = Array.isArray(config.origins)
+    ? config.origins
+    : [config.origins || "*"];
+  if (allowedOrigins.includes("*") || allowedOrigins.includes(origin)) {
+    context.res.setHeader("Access-Control-Allow-Origin", origin || "*");
+  }
+  if (config.credentials) {
+    context.res.setHeader("Access-Control-Allow-Credentials", "true");
+  }
+  if (config.methods) {
+    context.res.setHeader(
+      "Access-Control-Allow-Methods",
+      config.methods.join(", "),
+    );
+  }
+  if (config.allowedHeaders) {
+    context.res.setHeader(
+      "Access-Control-Allow-Headers",
+      config.allowedHeaders.join(", "),
+    );
+  }
+  if (config.exposedHeaders) {
+    context.res.setHeader(
+      "Access-Control-Expose-Headers",
+      config.exposedHeaders.join(", "),
+    );
+  }
+  if (config.maxAge) {
+    context.res.setHeader("Access-Control-Max-Age", config.maxAge.toString());
+  }
+  // Handle preflight requests
+  if (context.req.method === "OPTIONS") {
+    context.res.writeHead(204);
+    context.res.end();
+  }
+}
+/**
+ * CSRF token generation and validation middleware.
+ *
+ * @example
+ * ```typescript
+ * const csrfMiddleware = createCSRFMiddleware();
+ * app.use(csrfMiddleware);
+ * ```
+ */
+export function createCSRFMiddleware(config) {
+  const cookieName = config?.cookieName || "__jen_csrf";
+  const headerName = config?.headerName || "X-CSRF-Token";
+  return async (context) => {
+    // Generate CSRF token if not present
+    const existingToken = context.req.headers.cookie
+      ?.split(";")
+      .find((c) => c.trim().startsWith(`${cookieName}=`));
+    if (!existingToken) {
+      const token = generateCSRFToken();
+      context.res.setHeader(
+        "Set-Cookie",
+        `${cookieName}=${token}; HttpOnly; Path=/; SameSite=Strict`,
+      );
+      context.req.csrfToken = token;
+    }
+    // Validate CSRF token on state-changing requests
+    if (["POST", "PUT", "DELETE", "PATCH"].includes(context.req.method || "")) {
+      const tokenFromHeader = context.req.headers[headerName.toLowerCase()];
+      const tokenFromCookie = getCookieValue(
+        context.req.headers.cookie,
+        cookieName,
+      );
+      if (
+        tokenFromHeader &&
+        tokenFromCookie &&
+        tokenFromHeader === tokenFromCookie
+      ) {
+        // Token is valid, continue
+        return;
+      }
+      // Token is missing or invalid
+      context.res.writeHead(403, { "Content-Type": "application/json" });
+      context.res.end(
+        JSON.stringify({ error: "CSRF token validation failed" }),
+      );
+    }
+  };
+}
+/**
+ * Generate a random CSRF token.
+ */
+function generateCSRFToken() {
+  const array = new Uint8Array(32);
+  if (typeof globalThis !== "undefined" && globalThis.crypto?.getRandomValues) {
+    globalThis.crypto.getRandomValues(array);
+  } else {
+    // Fallback for environments without crypto
+    for (let i = 0; i < array.length; i++) {
+      array[i] = Math.floor(Math.random() * 256);
+    }
+  }
+  return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
+    "",
+  );
+}
+/**
+ * Extract cookie value by name.
+ */
+function getCookieValue(cookieHeader, name) {
+  if (!cookieHeader) return undefined;
+  const cookie = cookieHeader
+    .split(";")
+    .find((c) => c.trim().startsWith(`${name}=`));
+  return cookie ? cookie.trim().substring(name.length + 1) : undefined;
+}