tova 0.4.6 → 0.4.7

package/src/runtime/router.js

@@ -1,7 +1,7 @@
 // Client-side router for Tova — integrated with the signal system
 // Route changes are reactive: components that read route() or params() auto-update.
 
-import { createSignal, tova_el } from './reactivity.js';
+import { createSignal, tova_el, tova_fragment, createEffect, onCleanup } from './reactivity.js';
 
 // ─── Route Signal ─────────────────────────────────────────
 // The route is a signal, so any component/effect that reads it
@@ -18,36 +18,107 @@ const [route, setRoute] = createSignal({
 let routeDefinitions = [];
 let routeChangeCallbacks = [];
 let notFoundComponent = null;
+let beforeNavigateHooks = [];
+let afterNavigateHooks = [];
+
+// ─── Path Validation ─────────────────────────────────────
+// Reject absolute URLs, protocol-relative URLs, and javascript: URIs
+// to prevent open redirects and XSS.
+
+function isValidPath(path) {
+  if (typeof path !== 'string') return false;
+  // Reject protocol-relative URLs (//evil.com)
+  if (path.startsWith('//')) return false;
+  // Reject absolute URLs with schemes (http:, javascript:, data:, etc.)
+  if (/^[a-zA-Z][a-zA-Z0-9+\-.]*:/.test(path)) return false;
+  // Must start with / or be a relative path segment
+  return true;
+}
 
 // ─── Public API ───────────────────────────────────────────
 
 export function defineRoutes(routeMap) {
-  routeDefinitions = Object.entries(routeMap).map(([path, component]) => {
+  routeDefinitions = [];
+  const entries = Object.entries(routeMap);
+  for (const [path, value] of entries) {
     // Special 404 route
     if (path === '404' || path === '*') {
+      const component = (typeof value === 'object' && value !== null && value.component) ? value.component : value;
       notFoundComponent = component;
       // Catch-all '*' still gets a regex pattern for matching
       if (path === '*') {
-        return { path, pattern: /^(.*)$/, component, isCatchAll: true };
+        routeDefinitions.push({ path, pattern: /^(.*)$/, component, isCatchAll: true, children: null });
+      }
+      continue;
+    }
+
+    if (typeof value === 'object' && value !== null && value.component) {
+      // Nested route definition: { component: Layout, children: { "/": Home, "/settings": Settings } }
+      const parentDef = {
+        path,
+        pattern: pathToRegex(path, true), // prefix match for parent
+        component: value.component,
+        isCatchAll: false,
+        children: [],
+      };
+      if (value.children) {
+        for (const [childPath, childComponent] of Object.entries(value.children)) {
+          const fullPath = childPath === '/' ? path : path + childPath;
+          parentDef.children.push({
+            path: fullPath,
+            relativePath: childPath,
+            pattern: pathToRegex(fullPath),
+            component: childComponent,
+            isCatchAll: false,
+            children: null,
+          });
+        }
       }
-      return null;
+      routeDefinitions.push(parentDef);
+    } else {
+      routeDefinitions.push({
+        path,
+        pattern: pathToRegex(path),
+        component: value,
+        isCatchAll: false,
+        children: null,
+      });
     }
-    return {
-      path,
-      pattern: pathToRegex(path),
-      component,
-      isCatchAll: false,
-    };
-  }).filter(Boolean);
+  }
   // Match initial route
   handleRouteChange();
 }
 
 export function navigate(path) {
+  // Validate path first — reject unsafe URLs regardless of environment
+  if (!isValidPath(path)) {
+    if (typeof console !== 'undefined') {
+      console.warn('Tova router: Blocked navigation to unsafe path: ' + path);
+    }
+    return;
+  }
+  // Normalize: ensure path starts with /
+  const normalizedPath = path.startsWith('/') ? path : '/' + path;
+
+  // Run beforeNavigate hooks — any returning false cancels navigation
+  const from = route();
+  for (const hook of beforeNavigateHooks) {
+    const result = hook(from, normalizedPath);
+    if (result === false) return;
+    // If hook returns a string, redirect to that path instead
+    if (typeof result === 'string' && isValidPath(result)) {
+      if (typeof window !== 'undefined') {
+        window.history.pushState({}, '', result);
+      }
+      handleRouteChange();
+      return;
+    }
+  }
+
   if (typeof window !== 'undefined') {
-    window.history.pushState({}, '', path);
-    handleRouteChange();
+    window.history.pushState({}, '', normalizedPath);
   }
+  handleRouteChange();
 }
 
 export function getCurrentRoute() {
@@ -71,6 +142,29 @@ export function onRouteChange(callback) {
   routeChangeCallbacks.push(callback);
 }
 
+// ─── Navigation Guards ───────────────────────────────────
+// beforeNavigate: called before route changes. Return false to cancel,
+// return a string to redirect, return true/undefined to proceed.
+// afterNavigate: called after route has changed.
+
+export function beforeNavigate(callback) {
+  beforeNavigateHooks.push(callback);
+  // Return unsubscribe function
+  return () => {
+    const idx = beforeNavigateHooks.indexOf(callback);
+    if (idx !== -1) beforeNavigateHooks.splice(idx, 1);
+  };
+}
+
+export function afterNavigate(callback) {
+  afterNavigateHooks.push(callback);
+  // Return unsubscribe function
+  return () => {
+    const idx = afterNavigateHooks.indexOf(callback);
+    if (idx !== -1) afterNavigateHooks.splice(idx, 1);
+  };
+}
+
 // ─── Router Component ─────────────────────────────────────
 // Renders the matched route's component reactively.
 // Usage: <Router /> in JSX
@@ -83,6 +177,23 @@ export function Router() {
   return null;
 }
 
+// ─── Outlet Component ────────────────────────────────────
+// Renders the matched child route's component inside a parent layout.
+// Usage: <Outlet /> inside a layout component
+// Child route is stored as a signal for reactivity and isolation.
+
+const [currentChildRoute, setCurrentChildRoute] = createSignal(null);
+
+export function Outlet() {
+  const child = currentChildRoute();
+  if (child && child.component) {
+    const comp = child.component;
+    const params = child.params || {};
+    return typeof comp === 'function' ? comp(params) : comp;
+  }
+  return null;
+}
+
 // ─── Link Component ───────────────────────────────────────
 // Client-side navigation link.
 // Usage: <Link href="/about">"About"</Link>
@@ -101,10 +212,28 @@ export function Link({ href, children, ...rest }) {
 // ─── Redirect Component ──────────────────────────────────
 // Immediately navigates to a different path when rendered.
 // Usage: <Redirect to="/login" />
+// Loop protection: max 10 redirects in 1 second to prevent infinite loops.
+
+let _redirectCount = 0;
+let _redirectWindowStart = 0;
+const _MAX_REDIRECTS = 10;
+const _REDIRECT_WINDOW_MS = 1000;
 
 export function Redirect({ to }) {
   if (typeof window !== 'undefined') {
-    queueMicrotask(() => navigate(to));
+    queueMicrotask(() => {
+      const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
+      if (now - _redirectWindowStart > _REDIRECT_WINDOW_MS) {
+        _redirectCount = 0;
+        _redirectWindowStart = now;
+      }
+      _redirectCount++;
+      if (_redirectCount > _MAX_REDIRECTS) {
+        console.error(`Tova router: Redirect loop detected (>${_MAX_REDIRECTS} redirects in ${_REDIRECT_WINDOW_MS}ms). Aborting redirect to "${to}".`);
+        return;
+      }
+      navigate(to);
+    });
   }
   return null;
 }
@@ -146,32 +275,64 @@ function handleRouteChange() {
   for (const cb of routeChangeCallbacks) {
     cb(matched);
   }
+
+  // Run afterNavigate hooks
+  const currentRoute = route();
+  for (const hook of afterNavigateHooks) {
+    hook(currentRoute);
+  }
 }
 
 function matchRoute(path) {
   for (const def of routeDefinitions) {
-    const match = def.pattern.exec(path);
-    if (match) {
-      const params = extractParams(def.path, match);
-      return { path: def.path, component: def.component, params };
+    if (def.children && def.children.length > 0) {
+      for (const child of def.children) {
+        const childMatch = child.pattern.exec(path);
+        if (childMatch) {
+          const childParams = extractParams(child.path, childMatch);
+          setCurrentChildRoute({ component: child.component, params: childParams });
+          const parentMatch = def.pattern.exec(path);
+          const parentParams = extractParams(def.path, parentMatch || []);
+          return { path: def.path, component: def.component, params: { ...parentParams, ...childParams } };
+        }
+      }
+      const parentMatch = def.pattern.exec(path);
+      if (parentMatch) {
+        setCurrentChildRoute(null);
+        const params = extractParams(def.path, parentMatch);
+        return { path: def.path, component: def.component, params };
+      }
+    } else {
+      const match = def.pattern.exec(path);
+      if (match) {
+        setCurrentChildRoute(null);
+        const params = extractParams(def.path, match);
+        return { path: def.path, component: def.component, params };
+      }
     }
   }
+  setCurrentChildRoute(null);
   return null;
 }
 
-function pathToRegex(path) {
-  // Handle optional parameters: :id? becomes ([^/]+)?
+function pathToRegex(path, prefixMatch) {
+  // Handle optional parameters: :id? becomes ([^/]*)?
   // Handle required parameters: :id becomes ([^/]+)
   // Handle catch-all: * becomes (.*)
   const pattern = path
     .replace(/:([a-zA-Z_]+)\?/g, '([^/]*)?')   // optional params
     .replace(/:([a-zA-Z_]+)/g, '([^/]+)')        // required params
     .replace(/\*/g, '(.*)');                       // catch-all
-  return new RegExp(`^${pattern}$`);
+  // For parent routes with children, match as prefix
+  if (prefixMatch) {
+    return new RegExp('^' + pattern + '(?:/.*)?$');
+  }
+  return new RegExp('^' + pattern + '$');
 }
 
 function extractParams(routePath, match) {
   const params = {};
+  if (!match) return params;
   // Match both required (:name) and optional (:name?) params
   const paramNames = (routePath.match(/:([a-zA-Z_]+)\??/g) || [])
     .map(p => p.replace(/^:/, '').replace(/\?$/, ''));
@@ -187,14 +348,43 @@ function extractParams(routePath, match) {
 // ─── Browser Init ─────────────────────────────────────────
 
 if (typeof window !== 'undefined') {
-  window.addEventListener('popstate', handleRouteChange);
+  window.addEventListener('popstate', () => {
+    // Run beforeNavigate hooks for browser back/forward
+    const from = route();
+    const toPath = window.location.pathname;
+    for (const hook of beforeNavigateHooks) {
+      const result = hook(from, toPath);
+      if (result === false) {
+        // Cancel: push the previous path back
+        window.history.pushState({}, '', from.path);
+        return;
+      }
+    }
+    handleRouteChange();
+  });
 
   // Intercept link clicks for client-side navigation
   document.addEventListener('click', (e) => {
     const link = e.target.closest('a[href]');
-    if (link && link.href.startsWith(window.location.origin)) {
-      e.preventDefault();
-      navigate(link.getAttribute('href'));
+    if (!link) return;
+    // Use the resolved href for origin comparison (not raw attribute)
+    if (!link.href.startsWith(window.location.origin)) return;
+    // Skip links with target, download, or external rel
+    if (link.target === '_blank') return;
+    if (typeof link.hasAttribute === 'function' && link.hasAttribute('download')) return;
+    if (typeof link.getAttribute === 'function') {
+      const rel = link.getAttribute('rel');
+      if (rel && rel.includes('external')) return;
+    }
+    e.preventDefault();
+    // Use pathname from the resolved URL for safe navigation
+    try {
+      const url = new URL(link.href);
+      navigate(url.pathname + (url.search || '') + (url.hash || ''));
+    } catch (_) {
+      // Fallback for environments without URL constructor
+      const href = typeof link.getAttribute === 'function' ? link.getAttribute('href') : link.href;
+      if (href && isValidPath(href)) navigate(href);
     }
   });
 }

package/src/runtime/rpc.js

@@ -1,46 +1,181 @@
 // RPC bridge — client calls to server functions are auto-routed via HTTP
+// Includes CSRF protection, request timeouts, and interceptor middleware.
 
-const RPC_BASE = typeof window !== 'undefined'
-  ? (window.__TOVA_RPC_BASE || '')
-  : 'http://localhost:3000';
+// ─── Configuration ────────────────────────────────────────
+
+const _config = {
+  base: typeof window !== 'undefined' ? (window.__TOVA_RPC_BASE || '') : 'http://localhost:3000',
+  timeout: 30000, // 30s default timeout
+  csrfHeader: 'X-Tova-CSRF',
+  csrfToken: null, // auto-detected from meta tag or set manually
+  credentials: 'same-origin', // fetch credentials mode
+};
+
+// Interceptor chains — each is { request?: fn, response?: fn, error?: fn }
+const _interceptors = [];
+
+// ─── CSRF Token Management ────────────────────────────────
+
+function getCSRFToken() {
+  if (_config.csrfToken) return _config.csrfToken;
+  // Auto-detect from <meta name="csrf-token" content="..."> (server-rendered)
+  if (typeof document !== 'undefined') {
+    const meta = document.querySelector('meta[name="csrf-token"]');
+    if (meta) {
+      _config.csrfToken = meta.getAttribute('content');
+      return _config.csrfToken;
+    }
+  }
+  return null;
+}
+
+// ─── Core RPC Function ────────────────────────────────────
 
 export async function rpc(functionName, args = []) {
-  const url = `${RPC_BASE}/rpc/${functionName}`;
+  const url = `${_config.base}/rpc/${functionName}`;
 
   // Convert positional args to object if needed
   let body;
   if (args.length === 1 && typeof args[0] === 'object' && !Array.isArray(args[0])) {
     body = args[0];
   } else if (args.length > 0) {
-    // Send as array, server will handle positional mapping
     body = { __args: args };
   } else {
     body = {};
   }
 
+  // Build headers
+  const headers = { 'Content-Type': 'application/json' };
+  const csrf = getCSRFToken();
+  if (csrf) {
+    headers[_config.csrfHeader] = csrf;
+  }
+
+  // Build request options
+  let requestOptions = {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(body),
+    credentials: _config.credentials,
+  };
+
+  // Run request interceptors
+  for (const interceptor of _interceptors) {
+    if (interceptor.request) {
+      const result = interceptor.request({ url, functionName, args, options: requestOptions });
+      if (result && typeof result === 'object') {
+        requestOptions = { ...requestOptions, ...result };
+      }
+    }
+  }
+
+  // AbortController for timeout
+  const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+  if (controller) {
+    requestOptions.signal = controller.signal;
+  }
+  const timeoutId = controller && _config.timeout > 0
+    ? setTimeout(() => controller.abort(), _config.timeout)
+    : null;
+
   try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    });
+    const response = await fetch(url, requestOptions);
+
+    if (timeoutId) clearTimeout(timeoutId);
 
     if (!response.ok) {
       const errorText = await response.text();
-      throw new Error(`RPC call to '${functionName}' failed: ${response.status} ${errorText}`);
+      const err = new Error(`RPC call to '${functionName}' failed: ${response.status} ${errorText}`);
+      err.status = response.status;
+      err.functionName = functionName;
+
+      // Run error interceptors
+      for (const interceptor of _interceptors) {
+        if (interceptor.error) {
+          const handled = interceptor.error(err, { url, functionName, args, response });
+          if (handled === false) return undefined; // Interceptor suppressed the error
+        }
+      }
+
+      throw err;
+    }
+
+    let data = await response.json();
+
+    // Run response interceptors
+    for (const interceptor of _interceptors) {
+      if (interceptor.response) {
+        const transformed = interceptor.response(data, { url, functionName, args, response });
+        if (transformed !== undefined) data = transformed;
+      }
     }
 
-    const data = await response.json();
     return data.result;
   } catch (error) {
-    if (error.message.includes('RPC call')) throw error;
+    if (timeoutId) clearTimeout(timeoutId);
+
+    // Wrap AbortError as timeout
+    if (error.name === 'AbortError') {
+      const err = new Error(`RPC call to '${functionName}' timed out after ${_config.timeout}ms`);
+      err.code = 'TIMEOUT';
+      err.functionName = functionName;
+
+      for (const interceptor of _interceptors) {
+        if (interceptor.error) {
+          const handled = interceptor.error(err, { url, functionName, args });
+          if (handled === false) return undefined;
+        }
+      }
+
+      throw err;
+    }
+
+    if (error.message && error.message.includes('RPC call')) throw error;
     throw new Error(`RPC call to '${functionName}' failed: ${error.message}`);
   }
 }
 
-// Configure RPC base URL
-export function configureRPC(baseUrl) {
-  if (typeof window !== 'undefined') {
-    window.__TOVA_RPC_BASE = baseUrl;
+// ─── Configuration API ────────────────────────────────────
+
+export function configureRPC(options) {
+  if (typeof options === 'string') {
+    // Backward compat: configureRPC('http://...')
+    _config.base = options;
+    if (typeof window !== 'undefined') window.__TOVA_RPC_BASE = options;
+    return;
+  }
+  if (options.baseUrl !== undefined) {
+    _config.base = options.baseUrl;
+    if (typeof window !== 'undefined') window.__TOVA_RPC_BASE = options.baseUrl;
   }
+  if (options.timeout !== undefined) _config.timeout = options.timeout;
+  if (options.csrfToken !== undefined) _config.csrfToken = options.csrfToken;
+  if (options.csrfHeader !== undefined) _config.csrfHeader = options.csrfHeader;
+  if (options.credentials !== undefined) _config.credentials = options.credentials;
+}
+
+// ─── Interceptor API ──────────────────────────────────────
+// Usage:
+//   const unsub = addRPCInterceptor({
+//     request({ url, functionName, args, options }) {
+//       options.headers['Authorization'] = 'Bearer ' + token;
+//       return options;
+//     },
+//     response(data, { functionName }) { ... },
+//     error(err, { functionName }) { ... },
+//   });
+//   unsub(); // remove interceptor
+
+export function addRPCInterceptor(interceptor) {
+  _interceptors.push(interceptor);
+  return () => {
+    const idx = _interceptors.indexOf(interceptor);
+    if (idx !== -1) _interceptors.splice(idx, 1);
+  };
+}
+
+// ─── Set CSRF Token ───────────────────────────────────────
+
+export function setCSRFToken(token) {
+  _config.csrfToken = token;
 }

package/src/runtime/ssr.js

@@ -17,9 +17,9 @@ function escapeHtml(str) {
   return str.replace(_RE_HTML_G, ch => _ESC_HTML[ch]);
 }
 
-const _ESC_ATTR = { '&': '&', '"': '"' };
-const _RE_ATTR = /[&"]/;
-const _RE_ATTR_G = /[&"]/g;
+const _ESC_ATTR = { '&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;' };
+const _RE_ATTR = /[&"<>]/;
+const _RE_ATTR_G = /[&"<>]/g;
 
 function escapeAttr(str) {
   if (typeof str !== 'string') return String(str);
@@ -28,9 +28,21 @@ function escapeAttr(str) {
 }
 
 // ─── SSR ID Counter for hydration markers ─────────────────
+// Request-scoped via AsyncLocalStorage (Node.js) or fallback to global.
+// Use createSSRContext() for concurrent-safe SSR rendering.
 let ssrIdCounter = 0;
 
+// Per-request context for concurrent SSR safety
+let _currentSSRContext = null;
+
+export function createSSRContext() {
+  return { idCounter: 0 };
+}
+
 function nextSSRId() {
+  if (_currentSSRContext) {
+    return ++_currentSSRContext.idCounter;
+  }
   return ++ssrIdCounter;
 }
 
@@ -38,6 +50,20 @@ export function resetSSRIdCounter() {
   ssrIdCounter = 0;
 }
 
+// Run a render function within an isolated SSR context.
+// This ensures concurrent SSR requests don't share state.
+// Usage: const html = withSSRContext(() => renderToString(App()));
+export function withSSRContext(fn) {
+  const ctx = createSSRContext();
+  const prev = _currentSSRContext;
+  _currentSSRContext = ctx;
+  try {
+    return fn();
+  } finally {
+    _currentSSRContext = prev;
+  }
+}
+
 // ─── Render props to attribute string ─────────────────────
 function renderPropsToString(props, vnode) {
   let html = '';
@@ -190,9 +216,37 @@ function flattenSSR(children) {
   return result;
 }
 
-// Render a full HTML page with the app component for SSR
-export function renderPage(component, { title = 'Tova App', head = '', scriptSrc = '/client.js' } = {}) {
+// Build safe head HTML from structured tag descriptors.
+// Usage: renderHeadTags([{ tag: 'meta', attrs: { name: 'desc', content: userInput } }])
+// All attribute values are escaped — safe for user input.
+export function renderHeadTags(tags) {
+  if (!tags || !Array.isArray(tags)) return '';
+  const parts = [];
+  for (const { tag, attrs = {}, content } of tags) {
+    let html = `<${escapeHtml(tag)}`;
+    for (const [key, val] of Object.entries(attrs)) {
+      if (val === false || val == null) continue;
+      html += ` ${escapeHtml(key)}="${escapeAttr(String(val))}"`;
+    }
+    if (VOID_ELEMENTS.has(tag)) {
+      html += ' />';
+    } else {
+      html += `>${content ? escapeHtml(content) : ''}</${escapeHtml(tag)}>`;
+    }
+    parts.push(html);
+  }
+  return parts.join('\n  ');
+}
+
+// Render a full HTML page with the app component for SSR.
+// `head` accepts either a raw HTML string (trusted content only) or an array
+// of tag descriptors for safe rendering: [{ tag: 'meta', attrs: { name: 'desc', content: '...' } }]
+// SECURITY: Raw string `head` must contain only developer-authored content — never user input.
+// Use the array form or renderHeadTags() for safe user-controlled head content.
+export function renderPage(component, { title = 'Tova App', head = '', scriptSrc = '/client.js', cspNonce } = {}) {
   const appHtml = renderToString(typeof component === 'function' ? component() : component);
+  const headHtml = Array.isArray(head) ? renderHeadTags(head) : head;
+  const nonceAttr = cspNonce ? ` nonce="${escapeAttr(cspNonce)}"` : '';
 
   return `<!DOCTYPE html>
 <html>
@@ -200,11 +254,11 @@ export function renderPage(component, { title = 'Tova App', head = '', scriptSrc
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${escapeHtml(title)}</title>
-  ${head}
+  ${headHtml}
 </head>
 <body>
   <div id="app">${appHtml}</div>
-  <script type="module" src="${escapeAttr(scriptSrc)}"></script>
+  <script type="module" src="${escapeAttr(scriptSrc)}"${nonceAttr}></script>
 </body>
 </html>`;
 }
@@ -349,12 +403,14 @@ export function renderToReadableStream(vnode, options = {}) {
 
 // Render a full HTML page as a stream
 export function renderPageToStream(component, options = {}) {
-  const { title = 'Tova App', head = '', scriptSrc = '/client.js', onError, bufferSize } = options;
+  const { title = 'Tova App', head = '', scriptSrc = '/client.js', onError, bufferSize, cspNonce } = options;
+  const headHtml = Array.isArray(head) ? renderHeadTags(head) : head;
+  const nonceAttr = cspNonce ? ` nonce="${escapeAttr(cspNonce)}"` : '';
 
   return new ReadableStream({
     start(controller) {
       // Flush head immediately so CSS/JS start downloading (bypass buffer)
-      controller.enqueue(`<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <title>${escapeHtml(title)}</title>\n  ${head}\n</head>\n<body>\n  <div id="app">`);
+      controller.enqueue(`<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <title>${escapeHtml(title)}</title>\n  ${headHtml}\n</head>\n<body>\n  <div id="app">`);
 
       const buf = new BufferedController(controller, bufferSize);
       try {
@@ -366,7 +422,7 @@ export function renderPageToStream(component, options = {}) {
       }
 
       buf.flush();
-      controller.enqueue(`</div>\n  <script type="module" src="${escapeAttr(scriptSrc)}"></script>\n</body>\n</html>`);
+      controller.enqueue(`</div>\n  <script type="module" src="${escapeAttr(scriptSrc)}"${nonceAttr}></script>\n</body>\n</html>`);
       controller.close();
     },
   });