tina4-nodejs 3.13.142 → 3.13.143

package/packages/core/src/middleware.ts

@@ -13,6 +13,7 @@ import { Log } from "./logger.js";
 import { isTruthy } from "./dotenv.js";
 import { defaultRouter, type Router } from "./router.js";
 import { resolveClientIp } from "./trustedProxy.js";
+import { currentCspNonce, resolveCspHeader } from "./csp.js";
 import { getFrond, getFrameworkFrond, wantsJson, negotiatedErrorBody } from "./response.js";
 
 /**
@@ -951,12 +952,18 @@ export class SecurityHeadersMiddleware {
    * overrides, WITHOUT Strict-Transport-Security, which depends on the
    * request's scheme. Also what a transport rejection carries (ADR-0068
    * section 4), written before the scheme is known.
+   *
+   * Content-Security-Policy always carries a per-response nonce in style-src
+   * AND script-src (ADR-0088), read from the request async-context (minted on
+   * first access), so the framework's own inline content runs under the strict
+   * default without 'unsafe-inline'. The nonce is random per response, so a
+   * caller comparing this header must assert its STRUCTURE, never a byte string.
    */
   static canonicalHeaders(): Record<string, string> {
     return {
       "X-Frame-Options": process.env.TINA4_FRAME_OPTIONS ?? "SAMEORIGIN",
       "X-Content-Type-Options": "nosniff",
-      "Content-Security-Policy": process.env.TINA4_CSP ?? "default-src 'self'",
+      "Content-Security-Policy": resolveCspHeader(currentCspNonce()),
       "Referrer-Policy": process.env.TINA4_REFERRER_POLICY ?? "strict-origin-when-cross-origin",
       "X-XSS-Protection": "0",
       "Permissions-Policy": process.env.TINA4_PERMISSIONS_POLICY ?? "camera=(), microphone=(), geolocation=()",
@@ -985,6 +992,10 @@ export class SecurityHeadersMiddleware {
     if (process.env.TINA4_CSP === undefined) {
       SecurityHeadersMiddleware.warnCspDefaultOnce();
     }
+    // Content-Security-Policy carries a per-response nonce in style-src AND
+    // script-src (ADR-0088), already resolved in canonical, so the framework's
+    // own inline <style>/<script> (and user templates using the Frond
+    // csp_nonce() global) run under the strict policy without 'unsafe-inline'.
     for (const name of ["Content-Security-Policy", "Referrer-Policy", "X-XSS-Protection", "Permissions-Policy"]) {
       res.header(name, canonical[name]);
     }
@@ -1012,11 +1023,14 @@ export class SecurityHeadersMiddleware {
     SecurityHeadersMiddleware.cspDefaultWarned = true;
     const message =
       "TINA4_CSP is not set, so Tina4 is serving the default Content-Security-Policy " +
-      "\"default-src 'self'\" on every response. That default blocks runtime-injected " +
-      "inline styles, cross-origin fonts/scripts/CDNs, data: URIs, and cross-origin " +
-      "WebSocket/XHR (e.g. a separate API or LiveKit host). If your app uses any of " +
-      "these, set TINA4_CSP to a policy that allows them (see https://tina4.com); to " +
-      "silence this notice without changing behaviour, set TINA4_CSP=\"default-src 'self'\".";
+      "\"default-src 'self'\" on every response. The framework injects a per-response " +
+      "nonce into style-src and script-src, so its own inline <style>/<script> (and " +
+      "your templates using the csp_nonce() Frond global) work under this policy. The " +
+      "default still blocks cross-origin fonts/scripts/CDNs, data: URIs, and " +
+      "cross-origin WebSocket/XHR (e.g. a separate API or LiveKit host). If your app " +
+      "uses any of these, set TINA4_CSP to a policy that allows them (see " +
+      "https://tina4.com); to silence this notice without changing behaviour, set " +
+      "TINA4_CSP=\"default-src 'self'\".";
     try {
       Log.warning(message);
     } catch {

package/packages/core/src/response.ts

@@ -11,6 +11,7 @@ import fs from "node:fs";
 import nodePath from "node:path";
 import { once } from "node:events";
 import type { Tina4Response, CookieOptions } from "./types.js";
+import { currentCspNonce } from "./csp.js";
 
 /**
  * Best-effort close of a streaming source on client disconnect or a mid-stream
@@ -93,7 +94,8 @@ export async function getFrond(): Promise<InstanceType<any>> {
   const dir = _defaultTemplatesDir ?? nodePath.resolve(process.cwd(), "src/templates");
   let engine = _frondCache.get(dir);
   if (!engine) {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     engine = new Frond(dir);
     _frondCache.set(dir, engine);
   }
@@ -109,7 +111,8 @@ export async function getFrameworkFrond(): Promise<InstanceType<any> | null> {
   const frameworkDir = nodePath.resolve(nodePath.dirname(import.meta.url.replace("file://", "")), "..", "templates");
   if (!_frameworkFrond && fs.existsSync(frameworkDir)) {
     try {
-      const { Frond } = await import("../../frond/src/engine.js");
+      const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+      setCspNonceProvider(currentCspNonce);
       _frameworkFrond = new Frond(frameworkDir);
     } catch { return null; }
   }
@@ -262,6 +265,13 @@ export function createResponse(res: ServerResponse): Tina4Response {
   // ── Attach the underlying ServerResponse ──
   response.raw = res;
 
+  // ── Per-response CSP nonce (ADR-0088) ──
+  // Read the request-scoped nonce (csp.ts), minting one on first access. Inside
+  // a request this is the SAME value runDispatch() established and the security
+  // middleware names in the Content-Security-Policy header, so a route emitting
+  // an inline block as `<script nonce="${res.cspNonce}">` stays CSP-clean.
+  response.cspNonce = currentCspNonce();
+
   // ── Explicit methods ──
 
   response.json = function (data: unknown, status?: number): Tina4Response {
@@ -450,7 +460,8 @@ export function createResponse(res: ServerResponse): Tina4Response {
     templateDir?: string,
   ): Promise<Tina4Response> {
     try {
-      const { Frond } = await import("../../frond/src/engine.js");
+      const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+      setCspNonceProvider(currentCspNonce);
       const dir = templateDir ?? _defaultTemplatesDir ?? nodePath.resolve(process.cwd(), "src/templates");
       let engine = _frondCache.get(dir);
       if (!engine) {

package/packages/core/src/server.ts

@@ -42,6 +42,7 @@ import { MiddlewareChain, MiddlewareRunner, cors, requestLogger, isMiddlewareCla
 import { tryServeStatic } from "./static.js";
 import { loadEnv, isTruthy } from "./dotenv.js";
 import { isDebugMode } from "./errorOverlay.js";
+import { generateNonce, runWithCspNonce, currentCspNonce } from "./csp.js";
 import { createHealthRoutes } from "./health.js";
 import { rateLimiter } from "./rateLimiter.js";
 import { Log } from "./logger.js";
@@ -493,7 +494,8 @@ async function renderErrorPage(
   templatesDir: string,
 ): Promise<string | null> {
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     const templateFile = `errors/${code}.twig`;
 
     // Helper: get-or-create a cached Frond instance for a directory
@@ -706,6 +708,10 @@ export function resolveTemplate(pathname: string, templatesDir: string): string
 
 function renderLandingPage(port: number = 7148): string {
   const version = TINA4_VERSION;
+  // The framework's welcome page runs under the strict default CSP. Every inline
+  // <style>/<script> below carries this response's nonce (ADR-0088); there are no
+  // style= or onclick= attributes (a nonce covers an element, never an attribute).
+  const nonce = currentCspNonce();
 
   const galleryItems = [
     { id: "rest-api", icon: "&#128640;", name: "REST API", desc: "A simple JSON API with GET and POST endpoints", accent: "accent-blue", tryUrl: "/api/gallery/hello" },
@@ -729,7 +735,7 @@ function renderLandingPage(port: number = 7148): string {
       : "";
     const deployBtn = isDeployed
       ? `<span class="gbtn gbtn-deployed">Deployed</span>`
-      : `<button class="gbtn gbtn-deploy" onclick="deployGallery('${item.id}')">Deploy</button>`;
+      : `<button class="gbtn gbtn-deploy" data-deploy="${item.id}">Deploy</button>`;
     return `<div class="gallery-card">
             <div class="accent ${item.accent}"></div>
             <div class="icon">${item.icon}</div>
@@ -745,7 +751,7 @@ function renderLandingPage(port: number = 7148): string {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Tina4NodeJs</title>
-<style>
+<style nonce="${nonce}">
 *{margin:0;padding:0;box-sizing:border-box}
 body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative}
 .bg-watermark{position:fixed;bottom:-5%;right:-5%;width:45%;opacity:0.04;pointer-events:none;z-index:0}
@@ -784,6 +790,11 @@ h1{font-size:3rem;font-weight:700;margin-bottom:0.25rem;letter-spacing:-1px}
 .gbtn-deployed{background:transparent;border:1px solid #22c55e;color:#22c55e;cursor:default;font-size:0.7rem}
 @keyframes wiggle{0%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0deg)}}
 .star-wiggle{display:inline-block;transform-origin:center}
+.gallery-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
+.tok-comment{color:#64748b}
+.tok-kw{color:#c084fc}
+.tok-str{color:#4ade80}
+.tok-fn{color:#38bdf8}
 </style>
 </head>
 <body>
@@ -809,23 +820,23 @@ h1{font-size:3rem;font-weight:700;margin-bottom:0.25rem;letter-spacing:-1px}
 <div class="section">
     <div class="card">
         <h2>Getting Started</h2>
-        <pre class="code-block"><code><span style="color:#64748b">// app.ts</span>
-<span style="color:#c084fc">import</span> { startServer, Router } <span style="color:#c084fc">from</span> <span style="color:#4ade80">"tina4-nodejs"</span>;
+        <pre class="code-block"><code><span class="tok-comment">// app.ts</span>
+<span class="tok-kw">import</span> { startServer, Router } <span class="tok-kw">from</span> <span class="tok-str">"tina4-nodejs"</span>;
 
-Router.get(<span style="color:#4ade80">"/hello"</span>, <span style="color:#c084fc">async</span> (<span style="color:#38bdf8">req</span>, <span style="color:#38bdf8">res</span>) =&gt; {
-    <span style="color:#c084fc">return</span> res.json({ message: <span style="color:#4ade80">"Hello World!"</span> });
+Router.get(<span class="tok-str">"/hello"</span>, <span class="tok-kw">async</span> (<span class="tok-fn">req</span>, <span class="tok-fn">res</span>) =&gt; {
+    <span class="tok-kw">return</span> res.json({ message: <span class="tok-str">"Hello World!"</span> });
 });
 
-startServer({ port: 7148 });  <span style="color:#64748b">// starts on port 7148</span></code></pre>
+startServer({ port: 7148 });  <span class="tok-comment">// starts on port 7148</span></code></pre>
     </div>
 </div>
 <div class="gallery">
     <h2 id="gallery">What You Can Build</h2>
-    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;">
+    <div class="gallery-cards">
         ${galleryCards}
     </div>
 </div>
-<script>
+<script nonce="${nonce}">
 function deployGallery(name) {
     if (!confirm('Deploy the "' + name + '" gallery example into your project? This will copy files into src/.')) return;
     fetch('/__dev/api/gallery/deploy', {
@@ -860,6 +871,12 @@ function deployGallery(name) {
     }
     setTimeout(doWiggle,3000);
 })();
+// CSP-clean wiring: no inline onclick handlers — bind every Deploy button from
+// its data-deploy attribute (a nonce covers script elements, not event-handler
+// attributes).
+document.querySelectorAll('.gbtn-deploy[data-deploy]').forEach(function(btn){
+    btn.addEventListener('click', function(){ deployGallery(btn.dataset.deploy); });
+});
 </script>
 </body>
 </html>`;
@@ -1685,7 +1702,8 @@ export async function buildDispatchContext(router: Router, base?: string): Promi
 
   let frondEngine: DispatchContext["frondEngine"] = null;
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     frondEngine = new Frond(templatesDir);
   } catch {
     // Frond not available — template-route fallback stays inert, same guard startServer() uses.
@@ -1891,7 +1909,14 @@ export async function runDispatch(
   // requests interleaving on the one event loop never read each other's id.
   const requestId = Log.sanitizeRequestId(rawReq.headers["x-request-id"]) ?? randomBytes(4).toString("hex");
   if (!rawRes.headersSent) rawRes.setHeader("x-request-id", requestId);
-  return Log.runWithRequestId(requestId, () => dispatchInner(ctx, rawReq, rawRes, requestId));
+  // One CSP nonce per request (ADR-0088), established in the SAME async scope as
+  // the request id so the inline HTML body, the Frond csp_nonce() global, and the
+  // security middleware's Content-Security-Policy header all name one value - and
+  // two requests interleaving on the one event loop never share it.
+  const requestNonce = generateNonce();
+  return Log.runWithRequestId(requestId, () =>
+    runWithCspNonce(requestNonce, () => dispatchInner(ctx, rawReq, rawRes, requestId)),
+  );
 }
 
 /**
@@ -2128,7 +2153,8 @@ export async function startServer(config?: Tina4Config): Promise<{
   let frondEngine: any = null;
   setDefaultTemplatesDir(templatesDir);
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     frondEngine = new Frond(templatesDir);
 
     // Always-on Frond {% live %} refresh endpoint. Re-renders a server-rendered
@@ -2367,10 +2393,21 @@ export async function startServer(config?: Tina4Config): Promise<{
         });
 
         aiServer.on("error", (err: any) => {
-          if (err.code === "EADDRINUSE") {
+          // The auxiliary AI/test port is a debug convenience, never
+          // load-bearing: ANY bind failure must degrade to no-aux-port, logged
+          // LOUD, never silent. The old handler logged only EADDRINUSE and
+          // silently swallowed every other code (EADDRNOTAVAIL, EACCES, ...),
+          // leaving `aiServer` a dangling non-listening object. The 'error'
+          // listener's presence already stops Node throwing, so the main server
+          // never crashes; this just makes the degrade visible and resets the
+          // handle on every failure. (The synchronous ERR_SOCKET_BAD_PORT for
+          // an out-of-range derived port is handled separately by aiPortInRange.)
+          if (err?.code === "EADDRINUSE") {
             Log.warning(`Test port ${testPort} in use — skipping`);
-            aiServer = null;
+          } else {
+            Log.error(`Test port ${testPort} bind failed (${err?.code ?? err}) — skipping`);
           }
+          aiServer = null;
         });
 
         aiServer.listen(testPort, host);

package/packages/core/src/session.ts

@@ -335,6 +335,28 @@ export class RedisSessionHandler extends RespSessionHandler {
 
 const FLASH_PREFIX = "_flash_";
 
+/**
+ * The stored form of a value, for telling whether a request changed it.
+ * undefined when it cannot be serialised (a BigInt, a cycle): that always
+ * counts as changed, because writing a value again is harmless and missing a
+ * change is not.
+ */
+function fingerprint(value: unknown): string | undefined {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return undefined;
+  }
+}
+
+function fingerprints(data: SessionData): Map<string, string | undefined> {
+  const prints = new Map<string, string | undefined>();
+  for (const [key, value] of Object.entries(data)) {
+    prints.set(key, fingerprint(value));
+  }
+  return prints;
+}
+
 // ── Session Class ─────────────────────────────────────────────────
 
 export class Session {
@@ -361,6 +383,29 @@ export class Session {
    * Lets `start()` tell "no such session" from "the store is unreachable".
    */
   private lastReadFailed = false;
+  /**
+   * What this request last saw of the stored record, one fingerprint per key:
+   * taken by start() and again by every save. save() compares the live data
+   * against it to find the keys THIS request changed.
+   */
+  private loaded = new Map<string, string | undefined>();
+  /**
+   * True when this request is working on a record the store holds: start()
+   * adopted one, or a save has written one since. A save never re-creates such
+   * a record once another request has removed it.
+   */
+  private stored = false;
+  /**
+   * True when clear() ran since the last save: the save then replaces the
+   * stored record instead of merging into it.
+   */
+  private cleared = false;
+  /**
+   * True once this request found its session ended by another request (the
+   * record it loaded is gone). It stays ended for the rest of the request:
+   * regenerate() mints nothing either.
+   */
+  private ended = false;
 
   constructor(backend?: string, config?: SessionConfig) {
     const backendType = resolveBackend(
@@ -529,6 +574,11 @@ export class Session {
         const now = Math.floor(Date.now() / 1000);
         this.data = { _created: now, _accessed: now };
         this.dirty = false;
+        // Not a record this request has seen, so its first save writes whole.
+        this.stored = false;
+        this.loaded = new Map();
+        this.cleared = false;
+        this.ended = false;
         return sessionId;
       }
       if (loaded) {
@@ -552,6 +602,10 @@ export class Session {
         // Refresh the accessed timestamp; a write failure here is logged but
         // must not abort the resume — the request still serves.
         this.safeWrite(this.sessionId, this.data, this.ttl);
+        this.stored = true;
+        this.loaded = fingerprints(this.data);
+        this.cleared = false;
+        this.ended = false;
         return sessionId;
       }
     }
@@ -562,6 +616,10 @@ export class Session {
     this.data = { _created: now, _accessed: now };
     this.dirty = false;
     this.safeWrite(this.sessionId, this.data, this.ttl);
+    this.stored = false;
+    this.loaded = new Map();
+    this.cleared = false;
+    this.ended = false;
     return this.sessionId;
   }
 
@@ -606,9 +664,7 @@ export class Session {
     if (this.sessionId) {
       this.safeDestroy(this.sessionId);
     }
-    this.sessionId = null;
-    this.data = null;
-    this.dirty = false;
+    this.forget();
   }
 
   /**
@@ -633,6 +689,7 @@ export class Session {
     const now = Math.floor(Date.now() / 1000);
     this.data = { _created: this.data._created, _accessed: now };
     this.dirty = true;
+    this.cleared = true;
     this.save();
   }
 
@@ -651,8 +708,27 @@ export class Session {
    * session fixation — the pre-auth ID is destroyed and the data is carried
    * onto a fresh, unguessable ID. A backend destroy/write failure is logged
    * (never silent) but does not throw under the default policy.
+   *
+   * What is carried is the session as it is stored now with this request's
+   * own changes applied, the same merge save() does. If another request ended
+   * the session after this one loaded it (a logout, or a regenerate of its
+   * own), it stays ended: nothing is carried, no id is minted and null is
+   * returned, so no cookie goes out to replace the one that request sent.
    */
-  regenerate(): string {
+  regenerate(): string | null {
+    if (this.ended) return null;
+    if (this.sessionId && this.stored && this.data) {
+      const current = this.safeRead(this.sessionId);
+      if (!this.lastReadFailed) {
+        if (!current) {
+          this.forget();
+          this.ended = true;
+          return null;
+        }
+        if (!this.cleared) this.data = this.merged(current);
+      }
+    }
+
     const oldId = this.sessionId;
     const oldData = this.data;
 
@@ -666,6 +742,8 @@ export class Session {
     this.data = oldData ?? { _created: Math.floor(Date.now() / 1000), _accessed: Math.floor(Date.now() / 1000) };
     this.data._accessed = Math.floor(Date.now() / 1000);
     this.dirty = true;
+    // The new id has no record yet: write everything to it.
+    this.stored = false;
     this.save();
     return this.sessionId;
   }
@@ -749,17 +827,86 @@ export class Session {
    *
    * Returns true on a successful persist, false if the backend was unreachable
    * (logged). The dirty flag is cleared only on success so a later save()
-   * retries once the backend recovers. A nothing-to-persist call returns true.
+   * retries once the backend recovers. A call with no session returns true.
+   *
+   * Other requests on the same session run while this one does, so the save
+   * writes only THIS request's changes, onto the record as it is stored now.
+   * Writing back the whole snapshot start() loaded undid whatever another
+   * request did in between: a logout (destroy, clear, regenerate) or a
+   * privilege change made with set(). A record removed since this request
+   * loaded it is never re-created: the session has ended, for this request
+   * too. A request that has not loaded a stored record (a new session, the new
+   * id regenerate() mints) writes its data whole, as before.
+   *
+   * A session the store already holds is re-written even when this request
+   * changed nothing: that write re-stamps the backend deadline to
+   * now + TINA4_SESSION_TTL, so a session expires after that span of INACTIVITY
+   * rather than that long after its last CHANGE (ADR-0087 — a session's expiry
+   * slides on activity). The re-write is the re-read, merged record, so sliding
+   * the deadline is concurrent-safe: it never clobbers another request's change,
+   * never re-creates an ended record, and TINA4_SESSION_TTL=0 still re-stamps a
+   * never-expires deadline (ADR-0027). A request with no stored session and no
+   * change writes nothing — there is no deadline to move.
    */
   save(): boolean {
     if (!this.sessionId || !this.data) return true;
-    if (!this.dirty) return true;
-    if (this.safeWrite(this.sessionId, this.data, this.ttl)) {
+    if (!this.dirty && !this.stored) return true;
+    let record: SessionData = this.data;
+    if (this.stored) {
+      const current = this.safeRead(this.sessionId);
+      if (this.lastReadFailed) return false;  // nothing written; dirty RETAINED for retry
+      if (!current) {
+        this.forget();
+        this.ended = true;
+        return true;
+      }
+      if (!this.cleared) record = this.merged(current);
+    }
+    if (this.safeWrite(this.sessionId, record, this.ttl)) {
       this.dirty = false;
+      this.stored = true;
+      this.cleared = false;
+      this.loaded = fingerprints(this.data);
       return true;
     }
     return false;  // write failed (logged); dirty RETAINED for retry
   }
+
+  /**
+   * The stored record with this request's changes applied: every key whose
+   * value differs from what this request loaded or last saved, and the
+   * removal of every key it deleted. Keys it did not touch keep whatever is
+   * stored now.
+   */
+  private merged(current: SessionData): SessionData {
+    const data = this.data as SessionData;
+    const record: SessionData = { ...current };
+    for (const [key, value] of Object.entries(data)) {
+      const print = fingerprint(value);
+      if (print === undefined || !this.loaded.has(key) || this.loaded.get(key) !== print) {
+        record[key] = value;
+      }
+    }
+    for (const key of this.loaded.keys()) {
+      if (!Object.prototype.hasOwnProperty.call(data, key)) {
+        delete record[key];
+      }
+    }
+    return record;
+  }
+
+  /**
+   * End the session for this request without touching the store: no id and
+   * no data, so nothing more is written and no cookie goes out for it.
+   */
+  private forget(): void {
+    this.sessionId = null;
+    this.data = null;
+    this.dirty = false;
+    this.stored = false;
+    this.cleared = false;
+    this.loaded = new Map();
+  }
 }
 
 /**

package/packages/core/src/sso.ts

@@ -26,7 +26,7 @@ type SessionLike = {
   get(key: string): unknown;
   set(key: string, value: unknown): void;
   delete(key: string): void;
-  regenerate(): string;
+  regenerate(): string | null;
   destroy(): void;
 };
 

package/packages/core/src/types.ts

@@ -126,6 +126,14 @@ export interface Tina4ResponseMethods {
   stream(source: AsyncIterable<string | Buffer>, contentType?: string): Promise<Tina4Response>;
   /** The underlying ServerResponse for advanced use */
   raw: ServerResponse;
+  /**
+   * This response's Content-Security-Policy nonce (ADR-0088). `runDispatch()`
+   * mints one per request and publishes it on the async-context (csp.ts) so the
+   * framework's inline `<style>`/`<script>`, the Frond `csp_nonce()` global, and
+   * the value the security middleware names in the header all agree. Stamp it on
+   * any inline block a route emits: `<script nonce="${res.cspNonce}">`.
+   */
+  cspNonce: string;
 }
 
 /**

package/packages/core/templates/errors/302.twig

@@ -17,6 +17,6 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
     <div class="spinner"></div>
     <div class="error-title">Redirecting…</div>
     <div class="error-msg">You are being redirected to a new location.</div>
-    <div class="error-path" style="color:var(--primary)">{{ redirect_url }}</div>
+    <div class="error-path c-primary">{{ redirect_url }}</div>
     <a href="{{ redirect_url }}" class="error-home">Click here if not redirected</a>
 {% endblock %}

package/packages/core/templates/errors/401.twig

@@ -9,9 +9,9 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 {% extends "errors/base.twig" %}
 {% block title %}401 — Unauthorized{% endblock %}
 {% block content %}
-    <div class="error-code" style="color:var(--danger)">401</div>
+    <div class="error-code c-danger">401</div>
     <div class="error-title">Unauthorized</div>
     <div class="error-msg">You need to sign in to access this resource.</div>
-    <div class="error-path" style="color:var(--danger)">{{ path }}</div>
+    <div class="error-path c-danger">{{ path }}</div>
     <a href="/" class="error-home">Go Home</a>
 {% endblock %}

package/packages/core/templates/errors/403.twig

@@ -12,7 +12,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>403 — Forbidden</title>
-<style>
+<style nonce="{{ csp_nonce() }}">
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
 .error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: center; max-width: 520px; width: 90%; }

package/packages/core/templates/errors/404.twig

@@ -12,7 +12,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>404 — Not Found</title>
-<style>
+<style nonce="{{ csp_nonce() }}">
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
 .error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: center; max-width: 520px; width: 90%; }

package/packages/core/templates/errors/500.twig

@@ -12,7 +12,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>500 — Server Error</title>
-<style>
+<style nonce="{{ csp_nonce() }}">
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
 .error-card { background: #1e293b; border: 1px solid #334155; border-radius: 1rem; padding: 3rem; text-align: left; max-width: 700px; width: 90%; }

package/packages/core/templates/errors/502.twig

@@ -9,9 +9,9 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 {% extends "errors/base.twig" %}
 {% block title %}502 — Bad Gateway{% endblock %}
 {% block content %}
-    <div class="error-code" style="color:var(--danger)">502</div>
+    <div class="error-code c-danger">502</div>
     <div class="error-title">Bad Gateway</div>
     <div class="error-msg">The upstream server returned an invalid response.</div>
-    <div class="error-path" style="color:var(--danger)">{{ path }}</div>
+    <div class="error-path c-danger">{{ path }}</div>
     <a href="/" class="error-home">Go Home</a>
 {% endblock %}

package/packages/core/templates/errors/503.twig

@@ -12,9 +12,9 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 .error-code { color: var(--warn); }
 {% endblock %}
 {% block content %}
-    <div class="error-code" style="color:var(--warn)">503</div>
+    <div class="error-code c-warn">503</div>
     <div class="error-title">Service Unavailable</div>
     <div class="error-msg">The server is temporarily unavailable. Please try again shortly.</div>
-    <div class="error-path" style="color:var(--warn)">{{ path }}</div>
+    <div class="error-path c-warn">{{ path }}</div>
     <a href="/" class="error-home">Go Home</a>
 {% endblock %}

package/packages/core/templates/errors/base.twig

@@ -13,7 +13,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {% block meta %}{% endblock %}
 <title>{% block title %}Error{% endblock %}</title>
-<style>
+<style nonce="{{ csp_nonce() }}">
 :root {
     --bg: #0f172a; --surface: #1e293b; --border: #334155;
     --text: #e2e8f0; --muted: #94a3b8; --primary: #3b82f6;
@@ -31,6 +31,9 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); min-
 .error-home { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1.5rem; background: var(--primary); color: #fff; text-decoration: none; border-radius: 0.5rem; font-size: 0.85rem; }
 .error-home:hover { opacity: 0.9; }
 .logo { width: 3rem; height: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+.c-danger { color: var(--danger); }
+.c-warn { color: var(--warn); }
+.c-primary { color: var(--primary); }
 {% block extra_styles %}{% endblock %}
 </style>
 </head>

package/packages/frond/dist/index.js

@@ -1413,6 +1413,7 @@ function _b64url(data) {
   return data.toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
 var _formTokenSessionId = "";
+var _cspNonceProvider = () => "";
 function _buildFormTokenJwt(descriptor = "") {
   const secret = process.env.TINA4_SECRET ?? "";
   const secretBytes = Buffer.byteLength(secret, "utf8");
@@ -1604,6 +1605,7 @@ var Frond = class _Frond {
     this.globals.formTokenValue = (descriptor) => _generateFormTokenValue(descriptor || "");
     this.globals.form_token_value = (descriptor) => _generateFormTokenValue(descriptor || "");
     this.globals.dump = (value) => renderDump(value);
+    this.globals.csp_nonce = () => _cspNonceProvider();
     for (const [k, v] of _Frond.classFilters) this.filters[k] = v;
     for (const [k, v] of _Frond.classGlobals) this.globals[k] = v;
     for (const [k, v] of _Frond.classTests) this.tests[k] = v;