@webjsdev/server 0.7.3 → 0.8.1

package/src/ssr.js

@@ -1,7 +1,8 @@
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { resolve } from 'node:path';
 import { renderToString, isNotFound, isRedirect, lookupModuleUrl, isLazy } from '@webjsdev/core';
-import { importMapTag } from './importmap.js';
+import { importMapTag, vendorIntegrityFor, importMapHash } from './importmap.js';
+import { jsonForScriptTag } from './script-tag-json.js';
 import { readToken, newToken, cookieHeader } from './csrf.js';
 import { transitiveDeps } from './module-graph.js';
 
@@ -51,7 +52,18 @@ export async function ssrPage(route, params, url, opts) {
     // import graph. Combined with the modulepreload hints below, this
     // is the Rails 7+ / Hotwire pattern: per-file ESM, no bundling,
     // HTTP/2 multiplex on the wire.
-    const moduleUrls = [route.file, ...route.layouts].map((f) => toUrlPath(f, opts.appDir));
+    //
+    // Inert route modules (a page or layout that does no client work, even
+    // transitively) are dropped from the boot script: the browser never
+    // downloads them. The SSR'd HTML is the complete output, and
+    // progressive enhancement is unaffected, so a fully-static route ships
+    // zero application JS. The analysis is conservative (anything that
+    // touches the client router, a signal, an event, an npm import, or a
+    // shipping component keeps shipping).
+    const inert = opts.inertRouteModules;
+    const moduleUrls = [route.file, ...route.layouts]
+      .filter((f) => !(inert && inert.has(f)))
+      .map((f) => toUrlPath(f, opts.appDir));
     // Emit <link rel="modulepreload"> for every custom element that
     // actually rendered PLUS their transitive dependencies (from the
     // module graph). URLs are deduplicated so the browser never sees
@@ -59,7 +71,7 @@ export async function ssrPage(route, params, url, opts) {
     // preloads and instead loaded via IntersectionObserver when they
     // enter the viewport.
     const { eager: eagerComponents, lazy: lazyComponents } =
-      componentPreloads(suspenseCtx.usedComponents, opts.appDir);
+      componentPreloads(suspenseCtx.usedComponents, opts.appDir, opts.elidableComponents);
     const preloads = deduplicatedPreloads(
       eagerComponents,
       moduleUrls,
@@ -67,6 +79,7 @@ export async function ssrPage(route, params, url, opts) {
       [route.file, ...route.layouts],
       opts.appDir,
       opts.serverFiles,
+      opts.elidableComponents,
     );
     // Extract CSP nonce from request headers (if present).
     const nonce = opts.req ? getNonce(opts.req) : undefined;
@@ -93,6 +106,7 @@ export async function ssrPage(route, params, url, opts) {
       opts.req,
       url,
       metadata,
+      nonce,
     );
   } catch (err) {
     if (isRedirect(err)) {
@@ -103,6 +117,10 @@ export async function ssrPage(route, params, url, opts) {
       const html = await ssrNotFoundHtml(null, opts);
       return htmlResponse(html, 404, opts.req, url);
     }
+    // Error paths still need to honor the request's CSP nonce so the
+    // error page's boot scripts (when moduleUrls is non-empty) and
+    // the meta csp-nonce tag both pass strict-CSP enforcement.
+    const errNonce = opts.req ? getNonce(opts.req) : undefined;
     // Try nearest error.js (innermost → outermost).
     for (let i = route.errors.length - 1; i >= 0; i--) {
       try {
@@ -111,7 +129,7 @@ export async function ssrPage(route, params, url, opts) {
         const tree = await mod.default({ ...ctx, error: err });
         const body = await renderToString(tree);
         const moduleUrls = [route.file, ...route.layouts].map((f) => toUrlPath(f, opts.appDir));
-        const html = wrapInDocument(body, { metadata, moduleUrls, dev: opts.dev });
+        const html = wrapInDocument(body, { metadata, moduleUrls, dev: opts.dev, nonce: errNonce });
         return htmlResponse(html, 500, opts.req, url);
       } catch (nested) {
         // fall through to next error boundary
@@ -125,7 +143,7 @@ export async function ssrPage(route, params, url, opts) {
         )}</pre>`
       : `<h1>Server error</h1><p>Something went wrong. Please try again.</p>`;
     return htmlResponse(
-      wrapInDocument(body, { metadata, moduleUrls: [], dev: opts.dev }),
+      wrapInDocument(body, { metadata, moduleUrls: [], dev: opts.dev, nonce: errNonce }),
       500,
       opts.req,
       url
@@ -156,6 +174,11 @@ function htmlResponse(html, status, req, url, metadata) {
   // Default: no caching. Pages are dynamic by default: the developer
   // opts in to caching explicitly via metadata.cacheControl.
   headers.set('cache-control', metadata?.cacheControl || 'no-store');
+  // X-Webjs-Build carries the current importmap hash so the client
+  // router can detect post-deploy importmap changes on EVERY
+  // response, including the X-Webjs-Have partial responses that
+  // omit the head entirely. See router-client.js applySwap.
+  headers.set('x-webjs-build', importMapHash());
   if (req && !readToken(req)) {
     const secure = url ? url.protocol === 'https:' : false;
     headers.append('set-cookie', cookieHeader(newToken(), { secure }));
@@ -175,10 +198,12 @@ async function ssrNotFoundHtml(notFoundFile, opts) {
       body = `<h1>404: Not found</h1><pre>${escapeHtml(String(e))}</pre>`;
     }
   }
+  const nonce = opts.req ? getNonce(opts.req) : undefined;
   return wrapInDocument(body, {
     metadata: { title: 'Not found' },
     moduleUrls: [],
     dev: opts.dev,
+    nonce,
   });
 }
 
@@ -632,11 +657,10 @@ export function publicEnvShim(opts) {
     }
   }
   env.NODE_ENV = opts.dev ? 'development' : 'production';
-  const json = JSON.stringify(env).replace(/<\//g, '<\\/');
   const n = opts.nonce ? ` nonce="${escapeAttr(opts.nonce)}"` : '';
   return `<script${n}>`
     + `window.process=window.process||{};`
-    + `window.process.env=Object.assign(window.process.env||{},${json});`
+    + `window.process.env=Object.assign(window.process.env||{},${jsonForScriptTag(env)});`
     + `</script>`;
 }
 
@@ -646,12 +670,12 @@ function wrapHead(opts) {
   // the request's CSP header by the caller.
   const n = opts.nonce ? ` nonce="${escapeAttr(opts.nonce)}"` : '';
 
-  const imports = opts.moduleUrls.map((u) => `import ${JSON.stringify(u)};`).join('\n');
+  const imports = opts.moduleUrls.map((u) => `import ${jsonForScriptTag(u)};`).join('\n');
   const lazyEntries = opts.lazyComponents && Object.keys(opts.lazyComponents).length
     ? opts.lazyComponents
     : null;
   const lazyBoot = lazyEntries
-    ? `\nimport { observeLazy } from '@webjsdev/core/lazy-loader';\nobserveLazy(${JSON.stringify(lazyEntries)});`
+    ? `\nimport { observeLazy } from '@webjsdev/core/lazy-loader';\nobserveLazy(${jsonForScriptTag(lazyEntries)});`
     : '';
   const boot = (imports || lazyBoot) ? `<script type="module"${n}>\n${imports}${lazyBoot}\n</script>` : '';
   const reload = opts.dev ? `<script type="module"${n} src="/__webjs/reload.js"></script>` : '';
@@ -910,11 +934,33 @@ function wrapHead(opts) {
   // module, then any custom `metadata.preload` entries (fonts, images, etc.)
   // (linkTags array was declared earlier so the metadata block above can
   // push icons / canonical / hreflang / archives / etc. into it.)
+  //
+  // Cross-origin URLs (vendor packages served from jspm.io etc.) MUST
+  // carry `crossorigin="anonymous"` on the preload link. Without it
+  // the browser either ignores the preload entirely or double-fetches
+  // (once for the preload as a non-CORS request, once for the actual
+  // module as a CORS request, defeating the optimization). Same-origin
+  // URLs get no attribute; adding `crossorigin=""` there would also
+  // double-fetch in some browsers because the preload becomes CORS
+  // but the import doesn't.
+  // CSP nonce on the preload link: under strict CSP (script-src
+  // 'nonce-...') the browser also gates modulepreload by the same
+  // policy. Without the attribute the preload is blocked and the
+  // import either falls back to a cold fetch or fails. Rails (via
+  // importmap-rails) applies nonce on every modulepreload tag for
+  // the same reason.
+  const noncePreload = opts.nonce ? ` nonce="${escapeAttr(opts.nonce)}"` : '';
   for (const url of opts.moduleUrls) {
-    linkTags.push(`<link rel="modulepreload" href="${escapeAttr(url)}">`);
+    linkTags.push(
+      `<link rel="modulepreload" href="${escapeAttr(url)}"` +
+      `${preloadCrossOriginAttr(url)}${integrityAttr(url)}${noncePreload}>`,
+    );
   }
   for (const url of opts.preloads || []) {
-    linkTags.push(`<link rel="modulepreload" href="${escapeAttr(url)}">`);
+    linkTags.push(
+      `<link rel="modulepreload" href="${escapeAttr(url)}"` +
+      `${preloadCrossOriginAttr(url)}${integrityAttr(url)}${noncePreload}>`,
+    );
   }
   if (Array.isArray(m.preload)) {
     for (const p of m.preload) {
@@ -1010,10 +1056,11 @@ function wrapHead(opts) {
 <html lang="en">
 <head>
 <meta charset="utf-8">
+${opts.nonce ? `<meta name="csp-nonce" content="${escapeAttr(opts.nonce)}">` : ''}
 ${metaTags.join('\n')}
 <title>${escapeHtml(title)}</title>
 ${publicEnvShim({ dev: opts.dev, nonce: opts.nonce })}
-${importMapTag()}
+${importMapTag({ nonce: opts.nonce })}
 ${linkTags.join('\n')}
 ${boot}
 ${reload}
@@ -1032,11 +1079,16 @@ ${suspenseBoot}
  * are NOT preloaded: they're loaded by the IntersectionObserver-based
  * lazy-loader when the element enters the viewport.
  *
+ * Elidable (display-only) components are skipped entirely: their imports
+ * are stripped from the served source, so preloading their module would
+ * fetch JS the browser never executes.
+ *
  * @param {Set<string>} usedTags
  * @param {string} appDir
+ * @param {Set<string>} [elidable]  absolute paths of elidable component files
  * @returns {{ eager: string[], lazy: Record<string, string> }}
  */
-function componentPreloads(usedTags, appDir) {
+function componentPreloads(usedTags, appDir, elidable) {
   const eager = [];
   /** @type {Record<string, string>} */
   const lazy = {};
@@ -1046,6 +1098,7 @@ function componentPreloads(usedTags, appDir) {
     try {
       const abs = fileURLToPath(fileUrl);
       if (!abs.startsWith(appDir)) continue;
+      if (elidable && elidable.has(abs)) continue;
       const url = toUrlPath(abs, appDir);
       if (isLazy(tag)) {
         lazy[tag] = url;
@@ -1066,9 +1119,10 @@ function componentPreloads(usedTags, appDir) {
  * @param {import('./module-graph.js').ModuleGraph | undefined} graph
  * @param {string[]} entryFiles     absolute paths of page + layout files
  * @param {string} appDir
+ * @param {Set<string>} [elidableComponents]  absolute paths to skip in the walk
  * @returns {string[]}
  */
-function deduplicatedPreloads(componentUrls, moduleUrls, graph, entryFiles, appDir, serverFiles) {
+function deduplicatedPreloads(componentUrls, moduleUrls, graph, entryFiles, appDir, serverFiles, elidableComponents) {
   const seen = new Set(moduleUrls);
   const result = [];
 
@@ -1101,7 +1155,10 @@ function deduplicatedPreloads(componentUrls, moduleUrls, graph, entryFiles, appD
       const abs = resolve(appDir, url.startsWith('/') ? url.slice(1) : url);
       allEntries.push(abs);
     }
-    const deps = transitiveDeps(graph, allEntries, appDir);
+    // Skip elidable components and any subtree reachable only through
+    // them: their imports are stripped from served source, so the
+    // browser never fetches these modules.
+    const deps = transitiveDeps(graph, allEntries, appDir, elidableComponents);
     for (const dep of deps) {
       if (byIndex(dep)) continue;
       const url = toUrlPath(dep, appDir);
@@ -1126,12 +1183,15 @@ function deduplicatedPreloads(componentUrls, moduleUrls, graph, entryFiles, appD
  * @param {URL | undefined} url
  * @param {Record<string, any>} [metadata]
  */
-function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url, metadata) {
+function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url, metadata, nonce) {
   const encoder = new TextEncoder();
   const headers = new Headers({ 'content-type': 'text/html; charset=utf-8' });
   // Default: no caching. Pages are dynamic by default: the developer
   // opts in to caching explicitly via metadata.cacheControl.
   headers.set('cache-control', metadata?.cacheControl || 'no-store');
+  // See htmlResponse: build hash on every response for the client
+  // router's importmap-mismatch detection on partial swaps.
+  headers.set('x-webjs-build', importMapHash());
   if (req && !readToken(req)) {
     const secure = url ? url.protocol === 'https:' : false;
     headers.append('set-cookie', cookieHeader(newToken(), { secure }));
@@ -1169,9 +1229,16 @@ function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url,
             // Emit just the <template>: the MutationObserver-based resolver
             // in the boot script detects it and swaps it into the placeholder.
             // Falls back to the __webjsResolve global for browsers without MO.
+            // The fallback <script> carries the request's CSP nonce so
+            // strict-CSP enforcement passes. Browsers that support
+            // MutationObserver (all evergreen) handle the swap via the
+            // boot script's observer and skip this fallback; the
+            // <script> is here for legacy / extremely-restrictive
+            // environments. Either way it must be nonce-signed.
+            const scriptNonce = nonce ? ` nonce="${escapeAttr(nonce)}"` : '';
             const chunk =
               `<template data-webjs-resolve="${r.id}">${r.html}</template>` +
-              `<script>window.__webjsResolve&&__webjsResolve("${r.id}")</script>`;
+              `<script${scriptNonce}>window.__webjsResolve&&__webjsResolve("${r.id}")</script>`;
             controller.enqueue(encoder.encode(chunk));
           }
         }
@@ -1208,6 +1275,17 @@ function toUrlPath(file, appDir) {
 /**
  * Extract a CSP nonce from the request's Content-Security-Policy header.
  * Matches `'nonce-<base64>'` in the script-src directive.
+ *
+ * The regex matches the first `nonce-...` token anywhere in the
+ * header, regardless of which directive it sits under. This is
+ * intentional: in practice every reasonable CSP uses the same
+ * nonce across `script-src` and `style-src` (a per-request
+ * single-nonce model), and webjs only emits `<script>` /
+ * `<link rel="modulepreload">` tags, so reading the first match
+ * is the right behaviour. A future caller that emits styled
+ * inline content under a separate style nonce would need to
+ * extend this to be directive-scoped.
+ *
  * @param {Request} req
  * @returns {string | undefined}
  */
@@ -1226,6 +1304,44 @@ function escapeAttr(s) {
   return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 }
 
+/**
+ * Decide whether a `<link rel="modulepreload">` href needs a
+ * `crossorigin="anonymous"` attribute. True for absolute URLs with
+ * an http(s) scheme (vendor packages from jspm.io etc.); false for
+ * same-origin paths like `/__webjs/core/index.js`. Browsers require
+ * crossorigin on cross-origin module preload, else the preload is
+ * wasted or double-fetched. Same-origin URLs must NOT have it for
+ * the same reason in reverse.
+ *
+ * Exported for tests; production callers use it via documentParts.
+ *
+ * @param {string} url
+ * @returns {string}  either ` crossorigin="anonymous"` or empty
+ */
+export function preloadCrossOriginAttr(url) {
+  return /^https?:\/\//i.test(url) ? ' crossorigin="anonymous"' : '';
+}
+
+/**
+ * Look up the SRI integrity hash for a vendor URL and format it as a
+ * `integrity="sha384-..."` attribute. Empty string for URLs without a
+ * known hash (framework files, user code, vendor URLs in live-API
+ * mode without a pin file).
+ *
+ * @param {string} url
+ * @returns {string}
+ */
+export function integrityAttr(url) {
+  const hash = vendorIntegrityFor(url);
+  // Belt and suspenders: readPinFile already validates the integrity
+  // value end-to-end against /^sha(256|384|512)-[A-Za-z0-9+/=]+$/, so
+  // a valid hash has no HTML-special chars and escapeAttr is a no-op.
+  // But emission goes through the same attribute-injection-safe path
+  // as everything else in the SSR pipeline so a future regression in
+  // the validator doesn't bypass it.
+  return hash ? ` integrity="${escapeAttr(hash)}"` : '';
+}
+
 /**
  * Serialize a Next.js-shaped viewport object into the comma-separated
  * `content` string the meta tag expects. Recognised fields: