@botiverse/porthole 0.1.3 → 0.1.5

package/src/host/types.ts

@@ -34,6 +34,13 @@ export interface HostOptions<C extends AdapterConnection = ShellConnection> {
   readonly platform?: PlatformHost;
   /** Required for domain and external isolation: where an instance's frame loads from. */
   readonly locator?: InstanceLocator;
+  /**
+   * The embedding page's CSP nonce, where its `script-src` is nonce-based (P054): an opaque frame
+   * (`srcdoc`) inherits the page's policy, so the shell and the content's scripts carry it. A
+   * function is read each time a frame starts (a page whose nonce changes). Served frames inherit
+   * nothing and need none.
+   */
+  readonly nonce?: string | (() => string | undefined);
 }
 
 export interface MountOptions {
@@ -50,8 +57,23 @@ export interface MountOptions {
   readonly document?: string;
   /** The height to start at, before the content reports its own. */
   readonly initialHeightPx?: number;
+  /**
+   * Fill the container (give it a height) instead of taking the content's height: the content
+   * scrolls inside its frame (an artifact viewer's page). The content's sizes are still reported
+   * (`resize`). A url-mode app always fills.
+   */
+  readonly fill?: boolean;
 }
 
+/** What failed on the host's side (`hostError`). */
+export type HostErrorKind =
+  /** The locator rejected: the host's backend didn't give a location. */
+  | "locate"
+  /** A display couldn't be made (the React binding: a bad config, a missing handler). */
+  | "mount"
+  /** An annotation call was refused (an invalid mark, an unknown id). */
+  | "annotations";
+
 /** What a display reports, by event name. */
 /** Why a display's frame showed nothing of its content (`FrameOutcome`). */
 export type FrameBlock =
@@ -65,6 +87,8 @@ export type FrameBlock =
   | "upstream"
   /** The host's own check refused it (revoked, no longer a member): `code` says which. */
   | "denied"
+  /** The host's locator failed (its backend down, access gone): see the `hostError` event. */
+  | "locate"
   | "not-found"
   | "error";
 
@@ -93,8 +117,21 @@ export interface DisplayEvents {
   readonly outcome: FrameOutcome;
   /** The content's size, after the config's limits. */
   readonly resize: { readonly height: number; readonly width?: number };
-  /** What the content threw, or what the sandbox blocked (its own words: untrusted). */
-  readonly error: { readonly message: string };
+  /**
+   * What the content did wrong: what it threw, what the sandbox blocked (its own words:
+   * untrusted), or that it kept navigating its frame away. The agent's to hear and fix.
+   */
+  readonly contentError: { readonly message: string };
+  /**
+   * What failed on the host's side (`kind`): its locator, for now. The host's to handle; never
+   * the agent's. The display's `outcome` says `blocked: locate` too.
+   */
+  readonly hostError: { readonly message: string; readonly kind: HostErrorKind };
+  /**
+   * Both of the above, with their `source`: for a host that listened here before they were
+   * split (0.1.3). Prefer `contentError` and `hostError`.
+   */
+  readonly error: { readonly message: string; readonly source: "content" | "host" };
   /** The content navigated its frame away; the frame was started again from its content. */
   readonly navigated: undefined;
   /** A call didn't run. */

package/src/index.ts

@@ -29,9 +29,11 @@ export type {
   LayoutConfig,
   Limits,
   PortholeConfig,
+  StorageConfig,
   ThemeConfig,
   ThemeValue,
 } from "./config/schema.ts";
+export { PASSIVE_KINDS, type PassiveKind } from "./config/schema.ts";
 export {
   BUILT_IN_TOPICS,
   ConfigError,
@@ -61,10 +63,12 @@ export {
 export { compile, type CompiledConfig } from "./compile/compile.ts";
 export {
   allEgressOrigins,
+  anyHttps,
   declaredCapabilities,
   effectiveGates,
   egressOrigins,
   embedderCsp,
+  embedderFrameSourcesOf,
   type CspDirective,
   type EgressKind,
 } from "./compile/policy.ts";

package/src/presets/presets.ts

@@ -9,6 +9,7 @@ import type {
   LayoutConfig,
   Limits,
   PortholeConfig,
+  StorageConfig,
   ThemeValue,
   UrlPermission,
   UrlSandboxExtra,
@@ -45,6 +46,8 @@ export interface PresetOptions {
   readonly isolation?: Exclude<IsolationKind, "external">;
   readonly contentOrigins?: readonly string[];
   readonly embedder?: EmbedderConfig;
+  /** Domain isolation: what displays sharing an origin share (`StorageConfig`), for the manual. */
+  readonly storage?: StorageConfig;
 }
 
 /** The url preset's options: where the app is served, and the embedding page's extra frames. */
@@ -123,6 +126,10 @@ const mergeEgress = (base: EgressConfig, extra: EgressConfig | undefined): Egres
       merged[kind] = origins;
     }
   }
+  const passive = [...new Set([...(base.anyHttps ?? []), ...(extra?.anyHttps ?? [])])];
+  if (passive.length > 0) {
+    merged.anyHttps = passive;
+  }
   return merged;
 };
 
@@ -174,6 +181,7 @@ function build(
     guide: options.guide ?? {},
     contentOrigins: options.contentOrigins ?? [],
     embedder: options.embedder ?? {},
+    ...(options.storage === undefined ? {} : { storage: options.storage }),
   });
 }
 

package/src/react/frame.tsx

@@ -29,7 +29,7 @@ import type { CapabilityName } from "../config/capabilities.ts";
 import type { ColorScheme, PortholeConfig } from "../config/schema.ts";
 import { writeClipboard } from "../host/clipboard.ts";
 import { createHost } from "../host/create-host.ts";
-import type { DisplayEvents, DisplayHandle, FrameOutcome } from "../host/types.ts";
+import type { DisplayEvents, DisplayHandle, FrameOutcome, HostErrorKind } from "../host/types.ts";
 import type { InstanceLocator, InstanceRef } from "../isolation/types.ts";
 import { ConfirmDialog } from "./dialog.tsx";
 import { createLiveFrames, type FrameState, type LiveFrames } from "./live.ts";
@@ -53,7 +53,9 @@ interface PageState {
   readonly heights: Map<string, number>;
   readonly confirm?: Confirm;
   readonly hostInfo?: { readonly name: string; readonly version: string };
-  readonly locator?: InstanceLocator;
+  readonly nonce?: string;
+  /** The provider's locator, read when a frame locates (so an inline one restarts nothing). */
+  readonly locate?: InstanceLocator["locate"];
   /** The default `copyText`: copies on the host's page and shows the toast (P052). */
   readonly copyText?: CapabilityHandler<"copyText">;
 }
@@ -77,6 +79,11 @@ export interface PortholeProviderProps {
   readonly dialogClassName?: string;
   /** A class for the default copy toast, to restyle it. */
   readonly toastClassName?: string;
+  /**
+   * The page's CSP nonce, where its `script-src` is nonce-based: opaque frames inherit the page's
+   * policy, so their shell carries it (P054).
+   */
+  readonly nonce?: string;
   readonly children?: ReactNode;
 }
 
@@ -113,7 +120,22 @@ export function PortholeProvider(props: PortholeProviderProps): ReactElement {
     return copied;
   }, []);
   const closeNotice = useCallback(() => setNotice(null), []);
-  const { hostInfo, locator } = props;
+  // Compared by value, and read when used: an inline hostInfo or locator doesn't start every
+  // frame again on each render.
+  const hostInfo = useByValue(props.hostInfo);
+  const ownLocator = useRef(props.locator);
+  useLayoutEffect(() => {
+    ownLocator.current = props.locator;
+  });
+  const locate = useCallback<InstanceLocator["locate"]>(
+    (instance, signal) =>
+      ownLocator.current === undefined
+        ? Promise.reject(new Error("No locator (PortholeProvider.locator)"))
+        : ownLocator.current.locate(instance, signal),
+    [],
+  );
+  const locates = props.locator !== undefined;
+  const { nonce } = props;
   const value = useMemo<PageState>(
     () => ({
       live,
@@ -121,9 +143,10 @@ export function PortholeProvider(props: PortholeProviderProps): ReactElement {
       confirm,
       copyText,
       ...(hostInfo === undefined ? {} : { hostInfo }),
-      ...(locator === undefined ? {} : { locator }),
+      ...(locates ? { locate } : {}),
+      ...(nonce === undefined ? {} : { nonce }),
     }),
-    [live, heights, confirm, copyText, hostInfo, locator],
+    [live, heights, confirm, copyText, hostInfo, locates, locate, nonce],
   );
   const current = queue[0] ?? null;
   return (
@@ -192,9 +215,28 @@ export interface PortholeFrameProps {
   readonly generation?: number;
   /** Run at once, without waiting to near the screen (it still counts toward the page's most). */
   readonly eager?: boolean;
+  /**
+   * Fill the box (give it, or its parent, a height) and let the content scroll inside, instead of
+   * growing with the content: an artifact viewer's page. A url-mode app always fills.
+   */
+  readonly fill?: boolean;
   readonly onInitialized?: () => void;
   readonly onResize?: (size: { readonly height: number; readonly width?: number }) => void;
-  readonly onError?: (message: string) => void;
+  /**
+   * What the content did wrong (what it threw, what the sandbox blocked, that it kept navigating
+   * away): the agent's to hear and fix.
+   */
+  readonly onContentError?: (message: string) => void;
+  /**
+   * What failed on the host's side: its locator (`locate`), a display that couldn't be made
+   * (`mount`), an annotation call refused (`annotations`). Never the agent's.
+   */
+  readonly onHostError?: (error: {
+    readonly message: string;
+    readonly kind: HostErrorKind;
+  }) => void;
+  /** Both, with their source (as before 0.1.4). Prefer `onContentError` and `onHostError`. */
+  readonly onError?: (message: string, source: "content" | "host") => void;
   /** The content navigated its frame away; it was started again (or stopped, after a few). */
   readonly onNavigated?: () => void;
   readonly onRefused?: (capability: CapabilityName, refusal: Refusal) => void;
@@ -223,8 +265,14 @@ export interface PortholeFrameProps {
   readonly annotating?: AnnotateMode | null;
   /** The anchors to mark in the frame (the host's comments). Keep it stable (memoized). */
   readonly annotations?: readonly AnnotationMark[];
-  /** The mark to bring into view and make the active one; each new id focuses it. */
-  readonly focusedAnnotation?: string | null;
+  /**
+   * The mark to bring into view and make the active one; each new id focuses it. To focus the
+   * same mark again (a second click on its comment), give `{ id, key }` with a new key.
+   */
+  readonly focusedAnnotation?:
+    | string
+    | { readonly id: string; readonly key: string | number }
+    | null;
   /**
    * What the frame reported: a selection (an anchor and where it is), its clearing, a cancelled
    * pick, where marks are. The content's word: UI hints, never permissions.
@@ -343,6 +391,8 @@ export function PortholeFrame(props: PortholeFrameProps): ReactElement {
       style={{
         position: "relative",
         width: "100%",
+        // A display that fills takes its parent's height (the host sizes the parent, or this box).
+        ...(props.fill === true || props.config.mode === "url" ? { height: "100%" } : {}),
         ...(state === "running" ? {} : { minHeight: Math.max(height, PLACEHOLDER_HEIGHT_PX) }),
         ...props.style,
       }}
@@ -380,8 +430,11 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   const [ready, setReady] = useState(false);
   // The height this display started at: later reports don't make it start again.
   const [startHeight] = useState(initialHeightPx);
-  const { config, document: view, instance, content, partial, scheme } = frame;
-  const fills = config.mode === "url";
+  const { document: view, content, partial, scheme } = frame;
+  // By value: a config or instance made inline (each render) is the same display.
+  const config = useByValue(frame.config);
+  const instance = useByValue(frame.instance);
+  const fills = config.mode === "url" || frame.fill === true;
 
   // The latest props, read when the display calls back (never during render).
   const latest = useEffectEvent(() => frame);
@@ -398,9 +451,17 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
           frame.onResize?.(size);
           return;
         }
-        case "error":
-          frame.onError?.((detail as DisplayEvents["error"]).message);
+        case "contentError":
+          frame.onContentError?.((detail as DisplayEvents["contentError"]).message);
+          return;
+        case "hostError":
+          frame.onHostError?.(detail as DisplayEvents["hostError"]);
           return;
+        case "error": {
+          const { message, source } = detail as DisplayEvents["error"];
+          frame.onError?.(message, source);
+          return;
+        }
         case "navigated":
           frame.onNavigated?.();
           return;
@@ -468,7 +529,8 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
           : {}),
         theme: (each) => latest().theme?.(each) ?? {},
         ...(page.hostInfo === undefined ? {} : { hostInfo: page.hostInfo }),
-        ...(page.locator === undefined ? {} : { locator: page.locator }),
+        ...(page.locate === undefined ? {} : { locator: { locate: page.locate } }),
+        ...(page.nonce === undefined ? {} : { nonce: page.nonce }),
       }).mount(container, {
         displayId: first.displayId,
         title: first.title,
@@ -476,9 +538,10 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
         initialHeightPx: startHeight,
         ...(view === undefined ? {} : { document: view }),
         ...(instance === undefined ? {} : { instance }),
+        ...(fills ? { fill: true } : {}),
       });
     } catch (error) {
-      first.onError?.(error instanceof Error ? error.message : String(error));
+      hostFailed(first, error, "mount");
       return;
     }
     handle.current = display;
@@ -491,6 +554,8 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
       "muted",
       "outcome",
       "annotation",
+      "contentError",
+      "hostError",
     ];
     for (const event of events) {
       display.on(event, (detail) => notify(event, detail));
@@ -507,7 +572,7 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
     };
     // A new display only for a new config, document, instance or page (or generation, by key);
     // content, theme, handlers, id and title are fed to the running one.
-  }, [config, view, instance, page, startHeight]);
+  }, [config, view, instance, page, startHeight, fills]);
 
   useEffect(() => {
     if (content !== undefined) {
@@ -516,7 +581,16 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   }, [content, partial]);
   // Annotations follow their props (a new display gets them all when it is made, above).
   const annotates = config.capabilities.annotate !== undefined;
-  const { annotating, annotations, focusedAnnotation } = frame;
+  const { annotating } = frame;
+  const focusedAnnotation = focusOf(frame.focusedAnnotation);
+  const focusToken =
+    focusedAnnotation === null
+      ? ""
+      : typeof frame.focusedAnnotation === "object" && frame.focusedAnnotation !== null
+        ? JSON.stringify([frame.focusedAnnotation.id, frame.focusedAnnotation.key])
+        : JSON.stringify([focusedAnnotation]);
+  // By value: the same marks given again don't mark them again.
+  const annotations = useByValue(frame.annotations);
   const mode =
     annotating === undefined || annotating === null
       ? ""
@@ -543,19 +617,27 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   }, [annotates, annotations]);
   useEffect(() => {
     const display = handle.current;
-    if (annotates && display !== null && typeof focusedAnnotation === "string") {
-      attempt(() => display.annotations.focus(focusedAnnotation), latest());
+    const id = focusOf(latest().focusedAnnotation);
+    if (annotates && display !== null && focusToken !== "" && id !== null) {
+      attempt(() => display.annotations.focus(id), latest());
     }
-  }, [annotates, focusedAnnotation]);
+  }, [annotates, focusToken]);
+  // A flip or a restyle after the display was made: its first scheme and values went with it.
+  const [mountScheme] = useState(scheme);
+  const flipped = useRef(false);
   useEffect(() => {
-    handle.current?.setTheme(scheme);
-  }, [scheme]);
+    if (flipped.current || scheme !== mountScheme) {
+      flipped.current = true;
+      handle.current?.setTheme(scheme);
+    }
+  }, [scheme, mountScheme]);
   const { themeKey } = frame;
+  const [mountThemeKey] = useState(themeKey);
   useEffect(() => {
-    if (themeKey !== undefined) {
+    if (themeKey !== undefined && themeKey !== mountThemeKey) {
       handle.current?.refreshTheme();
     }
-  }, [themeKey]);
+  }, [themeKey, mountThemeKey]);
 
   return (
     <div
@@ -577,12 +659,19 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   );
 }
 
-/** Runs an annotation call, telling the frame's `onError` what it threw (a bad anchor, say). */
+/** Tells the frame's props what failed on the host's side. */
+function hostFailed(frame: PortholeFrameProps, error: unknown, kind: HostErrorKind): void {
+  const message = error instanceof Error ? error.message : String(error);
+  frame.onHostError?.({ message, kind });
+  frame.onError?.(message, "host");
+}
+
+/** Runs an annotation call, telling the frame's props what it threw (a bad anchor, say). */
 function attempt(run: () => void, frame: PortholeFrameProps): void {
   try {
     run();
   } catch (error) {
-    frame.onError?.(error instanceof Error ? error.message : String(error));
+    hostFailed(frame, error, "annotations");
   }
 }
 
@@ -592,11 +681,31 @@ function applyAnnotations(display: DisplayHandle, frame: PortholeFrameProps): vo
     if (frame.annotations !== undefined && frame.annotations.length > 0) {
       display.annotations.show(frame.annotations);
     }
-    if (typeof frame.focusedAnnotation === "string") {
-      display.annotations.focus(frame.focusedAnnotation);
+    const focused = focusOf(frame.focusedAnnotation);
+    if (focused !== null) {
+      display.annotations.focus(focused);
     }
     if (frame.annotating !== undefined && frame.annotating !== null) {
       display.annotations.start(frame.annotating);
     }
   }, frame);
 }
+
+/**
+ * `value` as long as it is equal by value (as JSON): plain data a host builds inline on each
+ * render (a config, an instance, marks, hostInfo) keeps one identity, so effects keyed on it run
+ * only when it really changes.
+ */
+function useByValue<T>(value: T): T {
+  const key = value === undefined ? "" : JSON.stringify(value);
+  return useMemo(() => (key === "" ? undefined : JSON.parse(key)) as T, [key]);
+}
+
+/** The id `focusedAnnotation` names, if any. */
+function focusOf(value: PortholeFrameProps["focusedAnnotation"]): string | null {
+  return typeof value === "string"
+    ? value
+    : value === null || value === undefined
+      ? null
+      : value.id;
+}

package/src/server/naming.ts

@@ -40,3 +40,44 @@ export function prefixedName(prefix: string): (scope: string) => string {
     return label;
   };
 }
+
+const PREFIX_ENTRY = /^[a-z0-9]([a-z0-9-]{0,61})?\*$/u;
+
+/**
+ * Whether a label is reserved (`ContentDomain.reserved`): a whole label, a prefix ending in `*`
+ * (`p-*`), or the host's own function. Entries are checked once, here; a function that throws
+ * reserves the label (fail closed: the request goes to the host's routes, never served as ours).
+ */
+export function reservedLabels(
+  reserved: readonly string[] | ((label: string) => boolean) | undefined,
+): (label: string) => boolean {
+  if (reserved === undefined) {
+    return () => false;
+  }
+  if (typeof reserved === "function") {
+    return (label) => {
+      try {
+        return reserved(label);
+      } catch {
+        return true;
+      }
+    };
+  }
+  if (!Array.isArray(reserved)) {
+    throw new TypeError("content.reserved: a list of labels and prefixes, or a function");
+  }
+  const whole = new Set<string>();
+  const prefixes: string[] = [];
+  for (const entry of reserved) {
+    if (typeof entry === "string" && PREFIX_ENTRY.test(entry)) {
+      prefixes.push(entry.slice(0, -1));
+    } else if (isHostLabel(entry)) {
+      whole.add(entry);
+    } else {
+      throw new TypeError(
+        `content.reserved: ${JSON.stringify(entry)} is not a lowercase DNS label or a prefix ending in *`,
+      );
+    }
+  }
+  return (label) => whole.has(label) || prefixes.some((prefix) => label.startsWith(prefix));
+}

package/src/server/pages.ts

@@ -93,6 +93,8 @@ const pageHeaders = (frameAncestors: string, connect: boolean) => ({
   "content-security-policy": policy(frameAncestors, connect),
   "referrer-policy": "no-referrer",
   "x-content-type-options": "nosniff",
+  // Content origins are behind tickets: nothing on them is for search engines.
+  "x-robots-tag": "noindex, nofollow",
 });
 
 export function statusPage(

package/src/server/server.ts

@@ -9,7 +9,7 @@ import {
 import type { FrameLocation, InstanceRef, ServedDocument } from "../isolation/types.ts";
 import { sandboxProxyDocument } from "../mcp/proxy.ts";
 import { createKeys, newTicket, ticketId } from "./keys.ts";
-import { isHostLabel } from "./naming.ts";
+import { isHostLabel, reservedLabels } from "./naming.ts";
 import { enterPage, pageScript, SESSION_PATH, statusPage } from "./pages.ts";
 import type { FrameBlock } from "../host/types.ts";
 import { memoryTicketStore } from "./tickets.ts";
@@ -46,6 +46,18 @@ const MAX_SESSION_SECONDS = 30 * 24 * 3_600;
 /** Browsers keep a cookie of up to 4 KB, name and attributes included. */
 const MAX_COOKIE_BYTES = 3_800;
 
+/** A host (and port) as it compares: lowercase, no trailing dot, no default port. */
+function normalHost(value: string, protocol: string): string {
+  const host = value
+    .trim()
+    .toLowerCase()
+    .replace(/\.(?=:\d+$|$)/u, "");
+  const defaultPort = protocol === "https:" ? ":443" : protocol === "http:" ? ":80" : "";
+  return defaultPort !== "" && host.endsWith(defaultPort)
+    ? host.slice(0, -defaultPort.length)
+    : host;
+}
+
 /**
  * What a session cookie carries, signed: the instance, its viewer (or anonymous), the host's
  * opaque subject, and when it stops.
@@ -80,6 +92,10 @@ function mergeEgress(base: EgressConfig, extra: EgressConfig | undefined): Egres
       merged[kind] = origins;
     }
   }
+  // What the host's config opens to any https site stays; a view can't ask for it (P059).
+  if (base.anyHttps !== undefined) {
+    merged.anyHttps = base.anyHttps;
+  }
   return merged;
 }
 
@@ -190,21 +206,14 @@ export function createServer(options: ServerOptions): PortholeServer {
     throw new TypeError("content.port must be a port number");
   }
   const keys = createKeys(options.secret);
-  const reserved = new Set(content.reserved ?? []);
-  for (const label of reserved) {
-    if (!isHostLabel(label)) {
-      throw new TypeError(
-        `content.reserved: ${JSON.stringify(label)} is not a lowercase DNS label`,
-      );
-    }
-  }
+  const isReserved = reservedLabels(content.reserved);
   /** The label a scope is served on: the host's naming, checked, or the keyed default. */
   const nameOf = (scope: string): string => {
     if (content.name === undefined) {
       return keys.label(scope);
     }
     const label = content.name(scope);
-    if (!isHostLabel(label) || reserved.has(label)) {
+    if (!isHostLabel(label) || isReserved(label)) {
       throw new TypeError(
         `content.name gave ${JSON.stringify(label)} for a scope: it must be one lowercase DNS label (a-z 0-9 -, at most 63, not xn--), not reserved`,
       );
@@ -213,7 +222,7 @@ export function createServer(options: ServerOptions): PortholeServer {
   };
   /** Whether a request's label may be one this server named. */
   const ours = (label: string): boolean =>
-    !reserved.has(label) && (content.name === undefined ? LABEL.test(label) : isHostLabel(label));
+    !isReserved(label) && (content.name === undefined ? LABEL.test(label) : isHostLabel(label));
   const secure = content.scheme === "https";
   const defaultPort = secure ? 443 : 80;
   const portPart =
@@ -520,6 +529,7 @@ export function createServer(options: ServerOptions): PortholeServer {
       "cache-control": "no-store",
       "referrer-policy": "no-referrer",
       "x-content-type-options": "nosniff",
+      "x-robots-tag": "noindex, nofollow",
     });
   }
 
@@ -686,8 +696,20 @@ export function createServer(options: ServerOptions): PortholeServer {
     }
   }
 
-  /** The label a request is for: null when it isn't under the content domain at all. */
-  function labelOf(request: Request): { readonly url: URL; readonly label: string } | null {
+  const underDomain = (host: string): boolean => host === domain || host.endsWith(`.${domain}`);
+
+  /**
+   * The label a request is for: null when it isn't under the content domain at all (or is in a
+   * reserved namespace), "mismatch" when its Host header names another host than its URL does
+   * and either is under the content domain. A Node adapter may build the URL from an
+   * absolute-form request target (`GET http://other/…`) while a host routes by the Host header
+   * (and a cache keys on it): the two must agree before anything is served. A Host that is a
+   * local server address (an IP literal, `localhost`), as a test runner or a dev proxy sends, is
+   * not a name and isn't compared.
+   */
+  function labelOf(
+    request: Request,
+  ): { readonly url: URL; readonly label: string } | "mismatch" | null {
     let url: URL;
     try {
       url = new URL(request.url);
@@ -695,13 +717,27 @@ export function createServer(options: ServerOptions): PortholeServer {
       return null;
     }
     const host = url.hostname.toLowerCase().replace(/\.$/u, "");
-    if (host !== domain && !host.endsWith(`.${domain}`)) {
+    const header = request.headers.get("host");
+    if (header !== null) {
+      const named = normalHost(header, url.protocol);
+      const name = named.replace(/:\d+$/u, "");
+      const local = name === "localhost" || /^[\d.]+$/u.test(name) || name.startsWith("[");
+      if (
+        !local &&
+        named !== normalHost(url.host, url.protocol) &&
+        (underDomain(host) || underDomain(name))
+      ) {
+        return "mismatch";
+      }
+    }
+    if (!underDomain(host)) {
       return null;
     }
     const label = host.slice(0, Math.max(0, host.length - domain.length - 1));
-    // A reserved label is another server's namespace (`f` for `<x>.f.<domain>`): it and the names
-    // under it go to the host's own routes. Any other deeper name is ours to refuse.
-    if (reserved.has(label.split(".").at(-1) ?? "")) {
+    // A reserved label is another server's namespace (`f` for `<x>.f.<domain>`), or the host's
+    // own: it and the names under it go to the host's own routes. Any other deeper name is ours
+    // to refuse.
+    if (isReserved(label.split(".").at(-1) ?? "")) {
       return null;
     }
     return { url, label };
@@ -779,7 +815,7 @@ export function createServer(options: ServerOptions): PortholeServer {
 
     async access(request) {
       const at = labelOf(request);
-      if (at === null || !ours(at.label)) {
+      if (at === null || at === "mismatch" || !ours(at.label)) {
         return null;
       }
       const access = accessOf(request, at.label, null);
@@ -791,8 +827,16 @@ export function createServer(options: ServerOptions): PortholeServer {
       if (at === null) {
         return null;
       }
-      const { url, label } = at;
       const method = request.method.toUpperCase();
+      if (at === "mismatch") {
+        return page(
+          400,
+          "Bad request",
+          "The request's Host header and its URL name different hosts.",
+          method,
+        );
+      }
+      const { url, label } = at;
       try {
         if (!ours(label)) {
           return page(404, "Nothing here", "This address names no content.", method);
@@ -815,7 +859,8 @@ export function createServer(options: ServerOptions): PortholeServer {
         if (document?.[1] !== undefined) {
           return await serveDocument(request, url, label, document[1]);
         }
-        if (url.pathname.startsWith(PREFIX)) {
+        // Without an upstream, only Porthole's own paths are served here: any other is nothing.
+        if (url.pathname.startsWith(PREFIX) || options.upstream === undefined) {
           return page(404, "Nothing here", "This address names no content.", method);
         }
         return await serveApp(request, label);