@botiverse/porthole 0.1.1 → 0.1.2

package/src/host/outcome.ts

@@ -25,6 +25,7 @@ const BLOCKS: readonly FrameBlock[] = [
   "cookies",
   "session",
   "upstream",
+  "denied",
   "not-found",
   "error",
 ];
@@ -33,6 +34,7 @@ interface FrameStatus {
   readonly state: "entering" | "blocked";
   readonly reason?: FrameBlock;
   readonly status?: number;
+  readonly code?: string;
 }
 
 /** A frame-status message, or null for anything else. */
@@ -44,7 +46,12 @@ export function parseFrameStatus(data: unknown): FrameStatus | null {
   if (message.jsonrpc !== "2.0" || message.method !== FRAME_STATUS_METHOD) {
     return null;
   }
-  const params = message.params as { state?: unknown; reason?: unknown; status?: unknown } | null;
+  const params = message.params as {
+    state?: unknown;
+    reason?: unknown;
+    status?: unknown;
+    code?: unknown;
+  } | null;
   if (params === null || typeof params !== "object") {
     return null;
   }
@@ -63,6 +70,9 @@ export function parseFrameStatus(data: unknown): FrameStatus | null {
     ...(typeof params.status === "number" && Number.isInteger(params.status)
       ? { status: params.status }
       : {}),
+    ...(typeof params.code === "string" && /^[a-z0-9-]{1,40}$/u.test(params.code)
+      ? { code: params.code }
+      : {}),
   };
 }
 
@@ -82,7 +92,8 @@ export function watchOutcome(options: {
 }): OutcomeWatch {
   const { surface, source, speaks } = options;
   const reports = source.kind === "url" && source.reports === true;
-  let decided = false;
+  // The first outcome; after a load, only a later block (a status page, access revoked) is told.
+  let decided: FrameOutcome["state"] | null = null;
   let heard = false;
   let entering = false;
   let loads = 0;
@@ -94,18 +105,24 @@ export function watchOutcome(options: {
     }, ms);
     timers.add(timer);
   };
-  const stop = () => {
+  const clearTimers = () => {
     for (const timer of timers) {
       clearTimeout(timer);
     }
     timers.clear();
+  };
+  const stop = () => {
+    clearTimers();
     unlisten();
     unload();
   };
   const decide = (outcome: FrameOutcome) => {
-    if (!decided) {
-      decided = true;
-      stop();
+    if (decided === null) {
+      decided = outcome.state;
+      clearTimers();
+      options.onOutcome(outcome);
+    } else if (decided === "loaded" && outcome.state === "blocked") {
+      decided = "blocked";
       options.onOutcome(outcome);
     }
   };
@@ -119,6 +136,7 @@ export function watchOutcome(options: {
         state: "blocked",
         reason: status.reason ?? "error",
         ...(status.status === undefined ? {} : { status: status.status }),
+        ...(status.code === undefined ? {} : { code: status.code }),
       });
     }
   });
@@ -130,7 +148,7 @@ export function watchOutcome(options: {
     });
   const unload = surface.onLoad(() => {
     loads += 1;
-    if (decided) {
+    if (decided !== null) {
       return;
     }
     if (speaks) {

package/src/host/types.ts

@@ -62,18 +62,27 @@ export type FrameBlock =
   | "session"
   /** Its app didn't answer. */
   | "upstream"
+  /** The host's own check refused it (revoked, no longer a member): `code` says which. */
+  | "denied"
   | "not-found"
   | "error";
 
 /**
- * How a display's first document went, once per run: it loaded (a shell or view finished its
- * handshake; a url-mode app's document loaded), it was blocked (and why), or nothing settled in
- * `limits.loadTimeoutMs`. A host shows its own fallback ("Open in a new tab") on anything but
- * loaded.
+ * How a display's document went: it loaded (a shell or view finished its handshake; a url-mode
+ * app's document loaded), it was blocked (and why), or nothing settled in
+ * `limits.loadTimeoutMs`. Once per run, plus a later `blocked` if the frame shows a status page
+ * after it loaded (access revoked mid-session). A host shows its own fallback ("Open in a new
+ * tab") on anything but loaded.
  */
 export type FrameOutcome =
   | { readonly state: "loaded" }
-  | { readonly state: "blocked"; readonly reason: FrameBlock; readonly status?: number }
+  | {
+      readonly state: "blocked";
+      readonly reason: FrameBlock;
+      readonly status?: number;
+      /** The host's own reason code, for `denied` (`Authorizer`). */
+      readonly code?: string;
+    }
   | { readonly state: "timeout" };
 
 export interface DisplayEvents {

package/src/index.ts

@@ -38,8 +38,14 @@ export {
   originSourceProblem,
   validateConfig,
 } from "./config/validate.ts";
-export { URL_SANDBOX_EXTRAS, type UrlSandboxExtra } from "./config/schema.ts";
+export {
+  URL_PERMISSIONS,
+  URL_SANDBOX_EXTRAS,
+  type UrlPermission,
+  type UrlSandboxExtra,
+} from "./config/schema.ts";
 export { hostOriginProblem, isHostOrigin } from "./isolation/served.ts";
+export { FRAME_STATUS_METHOD } from "./isolation/types.ts";
 
 // Presets.
 export {
@@ -121,6 +127,8 @@ export { createHost } from "./host/create-host.ts";
 export type {
   DisplayControls,
   DisplayEvents,
+  FrameBlock,
+  FrameOutcome,
   DisplayHandle,
   HostOptions,
   MountOptions,

package/src/presets/presets.ts

@@ -10,6 +10,7 @@ import type {
   Limits,
   PortholeConfig,
   ThemeValue,
+  UrlPermission,
   UrlSandboxExtra,
 } from "../config/schema.ts";
 import { validateConfig } from "../config/validate.ts";
@@ -51,6 +52,8 @@ export interface UrlPresetOptions {
   readonly contentOrigins: readonly string[];
   /** Sandbox tokens to add for the app (popups for an OAuth flow, modals, downloads; P037). */
   readonly sandbox?: readonly UrlSandboxExtra[];
+  /** Features to delegate to the app (clipboard writes, full screen; P049). */
+  readonly permissions?: readonly UrlPermission[];
   readonly limits?: Partial<Limits>;
   readonly layout?: Partial<LayoutConfig>;
   readonly embedder?: EmbedderConfig;
@@ -211,6 +214,7 @@ export const presets = {
       contentOrigins: options.contentOrigins,
       embedder: options.embedder ?? {},
       ...(options.sandbox === undefined ? {} : { sandbox: options.sandbox }),
+      ...(options.permissions === undefined ? {} : { permissions: options.permissions }),
     }),
 } as const;
 

package/src/server/crypto.ts

@@ -0,0 +1,166 @@
+/**
+ * The hashing `/server` needs, in plain JavaScript over web-standard types (`Uint8Array`,
+ * `TextEncoder`, `crypto.getRandomValues`), so it runs the same on Node, Cloudflare Workers and
+ * any other runtime (P044). Synchronous on purpose: Web Crypto's HMAC is async, and an origin
+ * (`originFor`) is computed synchronously. SHA-256 per FIPS 180-4, HMAC per RFC 2104; checked
+ * against the standard vectors and `node:crypto` in `test/crypto.test.ts`.
+ */
+
+const K = new Uint32Array([
+  0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
+  0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
+  0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+  0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
+  0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
+  0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+  0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
+  0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
+]);
+
+const rotr = (x: number, n: number): number => (x >>> n) | (x << (32 - n));
+
+export function sha256(data: Uint8Array): Uint8Array {
+  const length = data.length;
+  // Padded to a multiple of 64 bytes: a 1 bit, zeros, then the length in bits (64-bit big-endian).
+  const padded = new Uint8Array(Math.ceil((length + 9) / 64) * 64);
+  padded.set(data);
+  padded[length] = 0x80;
+  const view = new DataView(padded.buffer);
+  view.setUint32(padded.length - 8, Math.floor(length / 0x20000000), false);
+  view.setUint32(padded.length - 4, (length * 8) >>> 0, false);
+
+  const h = new Uint32Array([
+    0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19,
+  ]);
+  const w = new Uint32Array(64);
+  for (let offset = 0; offset < padded.length; offset += 64) {
+    for (let i = 0; i < 16; i += 1) {
+      w[i] = view.getUint32(offset + i * 4, false);
+    }
+    for (let i = 16; i < 64; i += 1) {
+      const a = w[i - 15] as number;
+      const b = w[i - 2] as number;
+      const s0 = rotr(a, 7) ^ rotr(a, 18) ^ (a >>> 3);
+      const s1 = rotr(b, 17) ^ rotr(b, 19) ^ (b >>> 10);
+      w[i] = ((w[i - 16] as number) + s0 + (w[i - 7] as number) + s1) >>> 0;
+    }
+    let [a, b, c, d, e, f, g, hh] = h as unknown as number[] as [
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+    ];
+    for (let i = 0; i < 64; i += 1) {
+      const s1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
+      const ch = (e & f) ^ (~e & g);
+      const t1 = (hh + s1 + ch + (K[i] as number) + (w[i] as number)) >>> 0;
+      const s0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
+      const maj = (a & b) ^ (a & c) ^ (b & c);
+      const t2 = (s0 + maj) >>> 0;
+      hh = g;
+      g = f;
+      f = e;
+      e = (d + t1) >>> 0;
+      d = c;
+      c = b;
+      b = a;
+      a = (t1 + t2) >>> 0;
+    }
+    const next = [a, b, c, d, e, f, g, hh];
+    for (let i = 0; i < 8; i += 1) {
+      h[i] = ((h[i] as number) + (next[i] as number)) >>> 0;
+    }
+  }
+  const out = new Uint8Array(32);
+  const outView = new DataView(out.buffer);
+  for (let i = 0; i < 8; i += 1) {
+    outView.setUint32(i * 4, h[i] as number, false);
+  }
+  return out;
+}
+
+const BLOCK = 64;
+
+export function hmacSha256(key: Uint8Array, message: Uint8Array): Uint8Array {
+  const block = new Uint8Array(BLOCK);
+  block.set(key.length > BLOCK ? sha256(key) : key);
+  const inner = new Uint8Array(BLOCK + message.length);
+  const outer = new Uint8Array(BLOCK + 32);
+  for (let i = 0; i < BLOCK; i += 1) {
+    inner[i] = (block[i] as number) ^ 0x36;
+    outer[i] = (block[i] as number) ^ 0x5c;
+  }
+  inner.set(message, BLOCK);
+  outer.set(sha256(inner), BLOCK);
+  return sha256(outer);
+}
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+export const utf8 = (text: string): Uint8Array => encoder.encode(text);
+export const fromUtf8 = (bytes: Uint8Array): string => decoder.decode(bytes);
+
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+
+/** Base64url without padding (RFC 4648 §5). */
+export function base64url(bytes: Uint8Array): string {
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const n = ((bytes[i] as number) << 16) | ((bytes[i + 1] ?? 0) << 8) | (bytes[i + 2] ?? 0);
+    out += B64[(n >>> 18) & 63];
+    out += B64[(n >>> 12) & 63];
+    if (i + 1 < bytes.length) {
+      out += B64[(n >>> 6) & 63];
+    }
+    if (i + 2 < bytes.length) {
+      out += B64[n & 63];
+    }
+  }
+  return out;
+}
+
+/** Decodes base64url without padding; null for anything else. */
+export function fromBase64url(text: string): Uint8Array | null {
+  if (!/^[A-Za-z0-9_-]*$/u.test(text) || text.length % 4 === 1) {
+    return null;
+  }
+  const out = new Uint8Array(Math.floor((text.length * 3) / 4));
+  let bits = 0;
+  let buffer = 0;
+  let index = 0;
+  for (const char of text) {
+    buffer = (buffer << 6) | B64.indexOf(char);
+    bits += 6;
+    if (bits >= 8) {
+      bits -= 8;
+      out[index] = (buffer >>> bits) & 0xff;
+      index += 1;
+    }
+  }
+  // The leftover bits of a canonical encoding are zero.
+  return (buffer & ((1 << bits) - 1)) === 0 ? out : null;
+}
+
+/** Equal bytes, compared in time that depends only on the length. */
+export function timingSafeEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+  let difference = 0;
+  for (let i = 0; i < a.length; i += 1) {
+    difference |= (a[i] as number) ^ (b[i] as number);
+  }
+  return difference === 0;
+}
+
+/** Random bytes from the runtime's CSPRNG (`crypto.getRandomValues`: Node, Workers, browsers). */
+export function randomBytes(length: number): Uint8Array {
+  const bytes = new Uint8Array(length);
+  globalThis.crypto.getRandomValues(bytes);
+  return bytes;
+}

package/src/server/index.ts

@@ -9,12 +9,18 @@
  *
  * and calls `issue` from its own authenticated API when a viewer opens served content.
  *
+ * Runs on any runtime with web-standard `Request`/`Response` and `crypto.getRandomValues`: Node,
+ * Cloudflare Workers (no `nodejs_compat` needed), Deno, Bun (P044). On Workers, keep tickets in D1
+ * (`d1TicketStore`, P045).
+ *
  * Origins: each storage scope gets `<label>.<domain>`, the label keyed from the scope by the
- * secret (stable, DNS-safe, not guessable from the scope). The domain is a registrable domain the
+ * secret (stable, DNS-safe, not guessable from the scope), or a host's own flat name
+ * (`content.name`, `prefixedName("a-")` for `a-<id>`), with other servers' namespaces reserved (P047). The domain is a registrable domain the
  * host uses for nothing else, so no content origin is ever same-site with the host. Documents go
  * out with their CSP (from the config) plus `frame-ancestors` (the host origins) in headers.
  *
- * Tickets: `issue` mints a one-time ticket for an instance and a viewer, good for a short time;
+ * Tickets: `issue` mints a one-time ticket for an instance and a viewer (or anonymously, for a
+ * public link, P046), good for a short time;
  * the frame's first request carries it, and the content origin takes it (once). A served document
  * comes back in that same answer, with a cookie of that origin only (`__Host-`, `Secure`,
  * `HttpOnly`, `SameSite=None; Partitioned` in a frame) for what follows; a url-mode app's ticket
@@ -22,11 +28,22 @@
  * content without a valid ticket or cookie gets nothing of the content.
  */
 export { createServer } from "./server.ts";
-export { memoryTicketStore } from "./tickets.ts";
+export {
+  d1TicketSchema,
+  d1TicketStore,
+  memoryTicketStore,
+  type D1Like,
+  type D1StatementLike,
+} from "./tickets.ts";
+export { FRAME_STATUS_METHOD } from "../isolation/types.ts";
+export { isHostLabel, prefixedName } from "./naming.ts";
 export { proxyTo, type ProxyOptions } from "./proxy.ts";
 export type {
   Access,
   ArtifactStore,
+  AuthorizeAnswer,
+  AuthorizeRequest,
+  Authorizer,
   ContentDomain,
   Grant,
   PortholeServer,

package/src/server/keys.ts

@@ -1,4 +1,13 @@
-import { createHash, createHmac, randomBytes, timingSafeEqual } from "node:crypto";
+import {
+  base64url,
+  fromBase64url,
+  fromUtf8,
+  hmacSha256,
+  randomBytes,
+  sha256,
+  timingSafeEqual,
+  utf8,
+} from "./crypto.ts";
 
 /**
  * The server's secrets, derived from the one it is given: one key per use, so a value made for
@@ -27,8 +36,6 @@ export function base32(bytes: Uint8Array): string {
   return out;
 }
 
-const base64url = (bytes: Uint8Array): string => Buffer.from(bytes).toString("base64url");
-
 /** JSON with object keys in a fixed order, so equal values always serialize alike. */
 export function canonicalJson(value: unknown): string {
   if (Array.isArray(value)) {
@@ -58,19 +65,17 @@ export function createKeys(secret: Uint8Array): Keys {
   if (secret.byteLength < 32) {
     throw new TypeError("The server's secret must be at least 32 random bytes");
   }
-  const derive = (use: string): Buffer =>
-    createHmac("sha256", secret).update(`porthole/${use}`).digest();
+  const derive = (use: string): Uint8Array => hmacSha256(secret, utf8(`porthole/${use}`));
   const labelKey = derive("label");
   const instanceKey = derive("instance");
   const signKey = derive("session");
-  const mac = (key: Buffer, text: string): Buffer =>
-    createHmac("sha256", key).update(text).digest();
+  const mac = (key: Uint8Array, text: string): Uint8Array => hmacSha256(key, utf8(text));
 
   return {
     label: (scope) => base32(mac(labelKey, scope).subarray(0, 15)),
     instanceKey: (instance) => base32(mac(instanceKey, canonicalJson(instance)).subarray(0, 10)),
     sign: (value) => {
-      const payload = Buffer.from(JSON.stringify(value)).toString("base64url");
+      const payload = base64url(utf8(JSON.stringify(value)));
       return `${payload}.${base64url(mac(signKey, payload))}`;
     },
     verify: (token) => {
@@ -79,12 +84,16 @@ export function createKeys(secret: Uint8Array): Keys {
         return null;
       }
       const expected = mac(signKey, payload);
-      const given = Buffer.from(signature, "base64url");
-      if (given.length !== expected.length || !timingSafeEqual(given, expected)) {
+      const given = fromBase64url(signature);
+      if (given === null || !timingSafeEqual(given, expected)) {
+        return null;
+      }
+      const bytes = fromBase64url(payload);
+      if (bytes === null) {
         return null;
       }
       try {
-        return JSON.parse(Buffer.from(payload, "base64url").toString("utf8")) as unknown;
+        return JSON.parse(fromUtf8(bytes)) as unknown;
       } catch {
         return null;
       }
@@ -96,5 +105,4 @@ export function createKeys(secret: Uint8Array): Keys {
 export const newTicket = (): string => `pt_${base32(randomBytes(20))}`;
 
 /** What a ticket is stored under: its hash, so a leaked store holds no usable ticket. */
-export const ticketId = (ticket: string): string =>
-  createHash("sha256").update(ticket).digest("base64url");
+export const ticketId = (ticket: string): string => base64url(sha256(utf8(ticket)));

package/src/server/naming.ts

@@ -0,0 +1,42 @@
+/**
+ * Names for content origins a host chooses itself (P047): flat labels like `a-<id>` under a
+ * shared content domain, next to other servers' namespaces (`<instance>.f.<domain>`).
+ */
+
+/** One lowercase DNS label (a-z 0-9 -, at most 63, no hyphen at either end). */
+const DNS_LABEL = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/u;
+
+/**
+ * Whether a label is one a host may name a content origin with: one lowercase DNS label, and not
+ * of the form IDNA reserves (`xn--`, any `??--`), so a name never displays as something else.
+ */
+export function isHostLabel(label: unknown): label is string {
+  return typeof label === "string" && DNS_LABEL.test(label) && label.slice(2, 4) !== "--";
+}
+
+const PREFIX = /^[a-z][a-z0-9]{0,15}-$/u;
+const ID = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/u;
+
+/**
+ * A naming for `content.name` that puts each scope on `<prefix><scope>` (`prefixedName("a-")`:
+ * scope `k3x9` is served on `a-k3x9.<domain>`). One-to-one, so no two scopes share an origin, and
+ * no name it makes is a reserved one or a keyed default (those have no hyphen). Scopes must
+ * already be label-safe (lowercase letters, digits, inner hyphens); anything else throws rather
+ * than being folded into another scope's name.
+ */
+export function prefixedName(prefix: string): (scope: string) => string {
+  if (!PREFIX.test(prefix)) {
+    throw new TypeError(
+      "A name prefix is a lowercase letter, then letters or digits, then '-' (a-)",
+    );
+  }
+  return (scope) => {
+    const label = `${prefix}${scope}`;
+    if (!ID.test(scope) || !isHostLabel(label)) {
+      throw new TypeError(
+        `Scope ${JSON.stringify(scope)} can't be named under ${prefix}: lowercase letters, digits and inner hyphens, ${63 - prefix.length} at most`,
+      );
+    }
+    return label;
+  };
+}

package/src/server/pages.ts

@@ -30,13 +30,15 @@ const STATUS_SCRIPT = `(() => {
   if (main === null) return;
   const hosts = JSON.parse(main.dataset.portholeHosts || "[]");
   ${say()}
-  say({ state: "blocked", reason: main.dataset.portholeReason || "error", status: Number(main.dataset.portholeStatus) });
+  const blocked = { state: "blocked", reason: main.dataset.portholeReason || "error", status: Number(main.dataset.portholeStatus) };
+  if (main.dataset.portholeCode) blocked.code = main.dataset.portholeCode;
+  say(blocked);
 })();`;
 
 /**
  * Enters a framed app: says so, checks that the browser kept the session cookie this page's own
- * answer set (WebKit keeps none in a cross-site frame, P025), then goes on to the app, or says it
- * is blocked and why.
+ * answer set (WebKit keeps none in a cross-site frame, P025), then, once this page has loaded,
+ * goes on to the app, or says it is blocked and why.
  */
 const ENTER_SCRIPT = `(async () => {
   const main = document.querySelector("[data-porthole-enter]");
@@ -49,6 +51,12 @@ const ENTER_SCRIPT = `(async () => {
     kept = (await fetch(${JSON.stringify(SESSION_PATH)}, { credentials: "same-origin", cache: "no-store" })).ok;
   } catch (_) {}
   if (kept) {
+    // The host counts this page's load, then the app's (P040): leave only once this page has
+    // loaded, or a fast answer would leave first and its load would never be seen.
+    if (document.readyState !== "complete") {
+      await new Promise((resolve) => addEventListener("load", resolve, { once: true }));
+    }
+    await new Promise((resolve) => setTimeout(resolve, 0));
     location.replace(main.dataset.portholeTarget || "/");
     return;
   }
@@ -95,8 +103,9 @@ export function statusPage(
   method = "GET",
   reason: FrameBlock = "error",
   hostOrigins: readonly string[] = [],
+  code?: string,
 ): Response {
-  const body = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escape(title)}</title><style>${STYLE}</style></head><body><main data-porthole-status="${status}" data-porthole-reason="${escape(reason)}" data-porthole-hosts="${escape(JSON.stringify(hostOrigins))}"><h1>${escape(title)}</h1><p>${escape(detail)}</p></main><script src="${STATUS_SCRIPT_PATH}"></script></body></html>`;
+  const body = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escape(title)}</title><style>${STYLE}</style></head><body><main data-porthole-status="${status}" data-porthole-reason="${escape(reason)}"${code === undefined ? "" : ` data-porthole-code="${escape(code)}"`} data-porthole-hosts="${escape(JSON.stringify(hostOrigins))}"><h1>${escape(title)}</h1><p>${escape(detail)}</p></main><script src="${STATUS_SCRIPT_PATH}"></script></body></html>`;
   return new Response(method === "HEAD" ? null : body, {
     status,
     headers: pageHeaders(frameAncestors, false),