@marver-design/marver 0.10.1 → 0.11.0

package/dist/marver-id-gate-BDzW6ahN.mjs

@@ -0,0 +1,728 @@
+import { i as avatarSourceFor, n as attachAvatar, u as provisionFromMarverId } from "./auth-B5yuwnOq.mjs";
+import { TransactionStore, browserBinding, verifyAssertion } from "./marver-id-B8-3WiHk.mjs";
+import { t as poweredByUrl } from "./utm-CxC3QN5X.mjs";
+import { randomBytes } from "node:crypto";
+import { isIP } from "node:net";
+import { lookup } from "node:dns/promises";
+//#region src/server/avatar.ts
+/**
+* Fetching somebody's picture, once, and keeping our own copy.
+*
+* A Marver ID assertion carries a `picture` URL - almost always Google's CDN.
+* The canvas could just render that URL and be done, and it must not. Hotlinking
+* would put a request to Google on every page view of a private canvas, which
+* hands a third party a log of who looks at what, and leaves the avatar to
+* vanish the day the URL rotates. So the picture is fetched ONCE, at sign-in,
+* and stored as a data URI beside the account like any other avatar.
+*
+* That decision buys a problem: the canvas server now makes an outbound request
+* to an address that arrived in a token. Everything below is about making that
+* safe and, failing that, making it harmless - the whole thing is best-effort,
+* and every failure path returns null so a sign-in never breaks over a picture.
+*/
+/** Small enough to sit in a JSON store beside every account, without thinking. */
+const MAX_BYTES = 65536;
+const TIMEOUT_MS = 5e3;
+/** What a browser will actually render, and nothing that can carry script. */
+const ALLOWED = /* @__PURE__ */ new Set([
+	"image/png",
+	"image/jpeg",
+	"image/webp",
+	"image/gif"
+]);
+/**
+* Is this address one a self-hosted canvas can safely be asked to fetch?
+*
+* The canvas is somebody's own server, usually inside their own network, and it
+* is being handed a URL. Without this check "fetch my picture" is a request to
+* probe the metadata endpoint, or a database on the private subnet, or another
+* service on the same box - the classic shape of SSRF, and worth more to an
+* attacker on a self-hosted deployment than on a shared one.
+*
+* Stated honestly: this resolves the name and rejects private space, which does
+* not close DNS rebinding - the name can resolve differently between this check
+* and the connection Node actually makes. Pinning the address needs a custom
+* agent. What bounds the residual risk is everything around it: the URL is https
+* only, arrives inside a signature from a configured issuer, is never followed
+* through a redirect, times out in five seconds, and the response is discarded
+* unless it is a small image. The value of the remaining hole is one blind
+* request; it is defence in depth rather than a wall.
+*/
+/**
+* Every hextet of an IPv6 address, or null if it is not one.
+*
+* Prefix matching on the printed form is what let the first version through:
+* `fe80:` is a string test, and link-local is fe80::/10 - so fe90:: and febf::
+* sailed past. Likewise `::ffff:` was only recognised in its dotted form, and
+* `::ffff:a00:1` is the same 10.0.0.1 written in hex. Comparing numbers instead
+* of text removes the whole class.
+*/
+function v6Parts(addr) {
+	let s = addr.toLowerCase();
+	const zone = s.indexOf("%");
+	if (zone >= 0) s = s.slice(0, zone);
+	const tail4 = /^(.*:)(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(s);
+	if (tail4) {
+		const b = [
+			Number(tail4[2]),
+			Number(tail4[3]),
+			Number(tail4[4]),
+			Number(tail4[5])
+		];
+		if (b.some((n) => n > 255)) return null;
+		s = `${tail4[1]}${((b[0] << 8 | b[1]) >>> 0).toString(16)}:${((b[2] << 8 | b[3]) >>> 0).toString(16)}`;
+	}
+	const halves = s.split("::");
+	if (halves.length > 2) return null;
+	const head = halves[0] ? halves[0].split(":") : [];
+	const tail = halves.length === 2 && halves[1] ? halves[1].split(":") : [];
+	const gap = halves.length === 2 ? 8 - head.length - tail.length : 0;
+	if (gap < 0 || halves.length === 1 && head.length !== 8) return null;
+	const parts = [
+		...head,
+		...Array(gap).fill("0"),
+		...tail
+	];
+	if (parts.length !== 8) return null;
+	const nums = parts.map((h) => /^[0-9a-f]{1,4}$/.test(h) ? parseInt(h, 16) : NaN);
+	return nums.some((n) => !Number.isInteger(n)) ? null : nums;
+}
+function isPublicAddress(addr) {
+	if (isIP(addr) === 6) {
+		const p = v6Parts(addr);
+		if (!p) return false;
+		if (p.slice(0, 5).every((x) => x === 0) && p[5] === 65535) return isPublicAddress(`${p[6] >> 8}.${p[6] & 255}.${p[7] >> 8}.${p[7] & 255}`);
+		/**
+		* Everything else must be global unicast, and then survive three exceptions.
+		*
+		* This is an ALLOWLIST, and the earlier blocklist is why. Naming the ranges
+		* to refuse means the default is "allowed", and IPv6 has far too much
+		* special-purpose space for that default to be safe: reserved blocks,
+		* documentation space, and several prefixes that carry an IPv4 address
+		* inside them and route to it. Every one I had not thought of was a hole,
+		* and the list of things I have not thought of is not something I can
+		* enumerate. Requiring 2000::/3 inverts it - the default becomes "refused",
+		* and the exceptions below are the small, auditable part.
+		*
+		* The three exceptions are all inside global unicast and none are reachable
+		* the way an avatar host is:
+		*   2001::/23    IETF protocol assignments - Teredo, benchmarking, ORCHID.
+		*                Teredo in particular tunnels IPv4 inside the address.
+		*   2001:db8::/32 documentation. Never routed, and a favourite in examples.
+		*   2002::/16    6to4, which embeds an IPv4 address and routes to it.
+		*
+		* NAT64 (64:ff9b::/96) is refused simply by being outside 2000::/3, and
+		* that is the right outcome: it is a live route to whatever IPv4 address it
+		* carries, including the metadata endpoint. An IPv6-only canvas loses
+		* nothing real, because an avatar host that matters has a AAAA record.
+		*/
+		if ((p[0] & 57344) !== 8192) return false;
+		if (p[0] === 8193 && p[1] < 512) return false;
+		if (p[0] === 8193 && p[1] === 3512) return false;
+		if (p[0] === 8194) return false;
+		if (p[0] >= 16383 && p[0] <= 16383) return false;
+		return true;
+	}
+	const q = addr.split(".").map(Number);
+	if (q.length !== 4 || q.some((n) => !Number.isInteger(n) || n < 0 || n > 255)) return false;
+	const [a, b] = q;
+	if (a === 0 || a === 127) return false;
+	if (a === 10) return false;
+	if (a === 172 && b >= 16 && b <= 31) return false;
+	if (a === 192 && b === 168) return false;
+	if (a === 169 && b === 254) return false;
+	if (a === 100 && b >= 64 && b <= 127) return false;
+	if (a === 192 && b === 0) return false;
+	if (a === 198 && (b === 18 || b === 19)) return false;
+	if (a === 198 && b === 51 && q[2] === 100) return false;
+	if (a === 203 && b === 0 && q[2] === 113) return false;
+	if (a >= 224) return false;
+	return true;
+}
+/**
+* Fetch a picture and return it as a data URI, or null.
+*
+* Null for every kind of failure, deliberately and without distinction: a
+* picture is decoration, and there is no failure here worth turning into a
+* refused sign-in or an error somebody has to read.
+*/
+async function fetchAvatar(pictureUrl) {
+	let url;
+	try {
+		url = new URL(pictureUrl);
+	} catch {
+		return null;
+	}
+	if (url.protocol !== "https:") return null;
+	if (url.username || url.password) return null;
+	try {
+		const { address } = await lookup(url.hostname);
+		if (!isPublicAddress(address)) return null;
+	} catch {
+		return null;
+	}
+	try {
+		return await avatarFromResponse(await fetch(url, {
+			redirect: "error",
+			signal: AbortSignal.timeout(TIMEOUT_MS),
+			headers: { accept: ALLOWED_ACCEPT }
+		}));
+	} catch {
+		return null;
+	}
+}
+const ALLOWED_ACCEPT = [...ALLOWED].join(", ");
+/**
+* Turn a response into a stored avatar, or refuse it.
+*
+* Separate from the fetch so the rules can be tested against real Responses
+* without needing real TLS - these are the checks that decide what ends up in
+* somebody's auth store, and they are worth more than a test that restates a
+* list of MIME types back to itself.
+*
+* SVG is deliberately absent from the allowed set. Browsers render it, which
+* makes it feel like an image, and it is a document that can carry script - an
+* avatar is one of the few things a canvas shows without the author having
+* written it, so it is exactly where that matters.
+*/
+async function avatarFromResponse(res) {
+	if (!res.ok) return null;
+	const type = (res.headers.get("content-type") ?? "").split(";")[0].trim().toLowerCase();
+	if (!ALLOWED.has(type)) return null;
+	const declared = Number(res.headers.get("content-length") ?? "0");
+	if (declared && declared > MAX_BYTES) return null;
+	const buf = await readCapped(res);
+	if (!buf || buf.byteLength === 0) return null;
+	return `data:${type};base64,${buf.toString("base64")}`;
+}
+/**
+* Read a body, and stop reading the moment it is too big.
+*
+* The cap used to be applied to the result of arrayBuffer(), which is a check
+* performed after the thing it was checking has already been allocated. A
+* chunked response, or one whose Content-Length simply lies, could stream
+* hundreds of megabytes into the canvas process inside the five second window,
+* and a handful of concurrent sign-ins would be enough to end it. Counting as
+* the chunks arrive and cancelling at the limit is the difference between a
+* bound and a wish.
+*/
+async function readCapped(res) {
+	const body = res.body;
+	if (!body || typeof body.getReader !== "function") {
+		const buf = Buffer.from(await res.arrayBuffer());
+		return buf.byteLength > MAX_BYTES ? null : buf;
+	}
+	const reader = body.getReader();
+	const chunks = [];
+	let size = 0;
+	try {
+		for (;;) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			if (!value) continue;
+			size += value.byteLength;
+			if (size > MAX_BYTES) {
+				await reader.cancel().catch(() => {});
+				return null;
+			}
+			chunks.push(value);
+		}
+	} catch {
+		return null;
+	}
+	return Buffer.concat(chunks);
+}
+//#endregion
+//#region src/server/marver-id-gate.ts
+/**
+* The three endpoints that bracket a Marver ID sign-in.
+*
+*   GET  /__mv/id/start     mints a nonce bound to this browser, then sends the
+*                           tab to the identity service. A plain redirect - no
+*                           JavaScript is involved in leaving.
+*   GET  /__mv/id/finish    where the identity service sends the tab back, with
+*                           the assertion in the URL FRAGMENT. Reads it, hands
+*                           it to the callback, and shows what happened.
+*   POST /__mv/id/callback  verifies the assertion server-side and, if the owner
+*                           invited this address, issues a canvas session.
+*
+* This used to be a popup that handed the assertion back by postMessage. That
+* design is dead on arrival for social sign-in: Google serves
+* `Cross-Origin-Opener-Policy: same-origin`, which permanently severs the
+* popup's `window.opener` - and it does not come back when the popup returns to
+* our origin. Microsoft and Apple do the same. So the whole flow now happens in
+* ONE tab, and nothing depends on two windows being able to talk. It also fixes
+* popup blockers and mobile, where popups were never good.
+*
+* The assertion rides in the fragment on the way back, which is the one part of
+* a URL a browser never sends to a server: it stays out of this canvas's access
+* logs and out of any `Referer`.
+*
+* The important architectural choice is unchanged: a Marver ID sign-in ends with
+* the SAME `mv_s` session cookie a password sign-in produces. Nothing downstream
+* - the gate, the comment API, the event stream - learns that a new kind of
+* login exists. One session concept, one place to revoke it.
+*
+* The assertion never touches the browser's storage. It is read from the
+* fragment, POSTed straight here, and consumed. Authored frames run same-origin
+* in this canvas, so anything left in localStorage would be readable by them.
+*/
+/**
+* Names the browser across the two requests. Not a session - just a handle.
+*
+* Over https it carries the `__Host-` prefix, which is not decoration. The
+* handle is what binds a sign-in to the browser that started it, and without
+* the prefix a sibling host on a shared parent domain can set one - "cookie
+* tossing" - which means choosing the binding for somebody else's sign-in. The
+* prefix makes a cookie host-only and unsettable by any other host, and the
+* browser enforces it rather than us. Plain over http, where the prefix is
+* invalid; there is no https there to have, and localhost has no siblings.
+*
+* What that leaves, stated rather than assumed. The prefix protects against
+* every OTHER host, and against nothing on this one: cookies ignore ports, so a
+* second service on the same hostname can still write the handle, and so can
+* anyone who takes over the hostname itself. A browser that does not implement
+* the prefix gets no protection at all. So the assumption a self-hosted canvas
+* is making is exclusive control of its own hostname, and modern browsers -
+* which is the same assumption its TLS certificate already makes.
+*/
+const BROWSER_COOKIE = "mv_b";
+const BROWSER_COOKIE_SECURE = "__Host-mv_b";
+const browserCookieName = (secure) => secure ? BROWSER_COOKIE_SECURE : BROWSER_COOKIE;
+const SESSION_COOKIE = "mv_s";
+/** The double-submit half of the session pair. See where it is set. */
+const CSRF_COOKIE = "mv_c";
+const MONTH = 2592e3;
+/** Matches TRANSACTION_TTL_MS - one deadline, expressed in both halves. */
+const HANDLE_TTL_S = 900;
+/**
+* Where to put somebody back, after they sign in.
+*
+* A canvas link carries its board and thread in the fragment - `#/b/strategy`,
+* `#/b/strategy?c=<thread>` - which no server ever receives. The gate's script
+* reads it and hands it here on the query string, which means that by the time
+* it arrives it is an ordinary attacker-reachable parameter: anyone can request
+* /__mv/id/start?next=<anything>.
+*
+* It ends up in location.replace() on this canvas, so it is an open redirect if
+* it is wrong. Only a hash route on this same canvas survives.
+*
+* The rejections worth naming:
+*   "#//evil.test"  - a browser reads what follows a bare // as a host
+*   "javascript:.." - not a route at all
+*   anything with a control character, which is how a value gets smuggled past
+*   a check and into a header or a log
+*/
+function safeHash(raw) {
+	if (!raw) return null;
+	const value = raw.trim();
+	if (!value.startsWith("#/")) return null;
+	if (value.startsWith("#//") || value.startsWith("#/\\")) return null;
+	if (/[\u0000-\u001f\u007f]/.test(value)) return null;
+	if (value.length > 512) return null;
+	if (/(^|\/)\.\.?(\/|$)/.test(value.slice(1))) return null;
+	if (!/^#\/[\w\-./~%!$&'()*+,;=:@?[\]]*$/.test(value)) return null;
+	return value;
+}
+function marverIdHandler(dir, issuer, canvasName, branding = true) {
+	const transactions = new TransactionStore();
+	const pinned = (process.env.MARVER_PUBLIC_ORIGIN ?? "").trim().replace(/\/$/, "");
+	let publicOrigin;
+	{
+		if (!pinned) throw new Error("MARVER_PUBLIC_ORIGIN is required when MARVER_ID_ISSUER is set.\n  Set it to this canvas's exact public origin - scheme, host and port -\n  e.g. https://canvas.example.com, or http://localhost:4173 in development.");
+		let u;
+		try {
+			u = new URL(pinned);
+		} catch {
+			throw new Error(`MARVER_PUBLIC_ORIGIN is not a URL: ${pinned}`);
+		}
+		const loopback = u.hostname === "localhost" || u.hostname === "127.0.0.1" || u.hostname === "[::1]";
+		if (u.username || u.password) throw new Error(`MARVER_PUBLIC_ORIGIN must not carry credentials: ${pinned}`);
+		if (u.pathname !== "/" || u.search || u.hash) throw new Error(`MARVER_PUBLIC_ORIGIN must be a bare origin: ${pinned}`);
+		if (!(u.protocol === "https:" || u.protocol === "http:" && loopback)) throw new Error(`MARVER_PUBLIC_ORIGIN must be https, or http on loopback: ${pinned}`);
+		publicOrigin = u.origin;
+	}
+	return async function handle(req, res, url) {
+		const origin = publicOrigin;
+		const secure = origin.startsWith("https://");
+		if (req.method === "GET" && url.pathname === "/__mv/id/start") {
+			let browserId = readCookie(req, browserCookieName(secure));
+			const headers = [];
+			if (!browserId) browserId = randomBytes(24).toString("base64url");
+			headers.push(cookie(browserCookieName(secure), browserId, {
+				maxAge: HANDLE_TTL_S,
+				secure
+			}));
+			const next = safeHash(url.searchParams.get("next"));
+			const tx = transactions.mint(origin, browserBinding(browserId), next ?? void 0);
+			const authorize = `${issuer}/authorize?origin=${encodeURIComponent(origin)}&nonce=${encodeURIComponent(tx.nonce)}` + (canvasName ? `&name=${encodeURIComponent(canvasName)}` : "");
+			if (headers.length) res.setHeader("set-cookie", headers);
+			res.statusCode = 302;
+			res.setHeader("location", authorize);
+			res.setHeader("cache-control", "no-store");
+			res.end();
+			return true;
+		}
+		if (req.method === "GET" && url.pathname === "/__mv/id/finish") {
+			res.statusCode = 200;
+			res.setHeader("content-type", "text/html; charset=utf-8");
+			res.setHeader("cache-control", "no-store");
+			res.setHeader("referrer-policy", "no-referrer");
+			res.setHeader("content-security-policy", "frame-ancestors 'none'");
+			res.setHeader("x-frame-options", "DENY");
+			res.end(finishPage(canvasName, new URL(origin).host, `${issuer}/switch?origin=${encodeURIComponent(origin)}`, branding));
+			return true;
+		}
+		if (req.method === "POST" && url.pathname === "/__mv/id/callback") {
+			const { body, tooLarge } = await readBody(req, 16e3);
+			if (tooLarge) {
+				res.setHeader("connection", "close");
+				return json(res, 413, { error: "too large" });
+			}
+			let assertion = "";
+			try {
+				const parsed = JSON.parse(body);
+				if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+					const a = parsed.assertion;
+					if (typeof a === "string") assertion = a;
+				}
+			} catch {}
+			if (!assertion) return json(res, 400, { error: "bad request" });
+			const browserId = readCookie(req, browserCookieName(secure));
+			if (!browserId) {
+				console.warn("[marver-id] callback with no browser handle");
+				return json(res, 401, { error: "not signed in" });
+			}
+			let landing = null;
+			const result = await verifyAssertion({
+				token: assertion,
+				origin,
+				issuer,
+				store: transactions,
+				browser: browserBinding(browserId),
+				onConsumed: (tx) => {
+					landing = tx.next ?? null;
+				}
+			});
+			if (!result.ok) {
+				console.warn(`[marver-id] assertion rejected: ${result.reason}`);
+				return json(res, 401, { error: "not signed in" });
+			}
+			const session = provisionFromMarverId(dir, {
+				...result.identity,
+				issuer
+			}, { ownerEmail: process.env.MARVER_OWNER_EMAIL });
+			if (!session) {
+				console.warn(`[marver-id] ${result.identity.email} is not on this canvas's list`);
+				return json(res, 403, {
+					error: "not invited",
+					email: result.identity.email
+				});
+			}
+			const picture = result.identity.picture;
+			const qualified = `${issuer}#${result.identity.subject}`;
+			if (picture) {
+				const before = avatarSourceFor(dir, qualified, result.identity.email, picture);
+				if (before.wanted) {
+					const avatar = await fetchAvatar(picture);
+					if (avatar) attachAvatar(dir, qualified, avatar, picture, before.source);
+				}
+			}
+			res.setHeader("set-cookie", [
+				cookie(SESSION_COOKIE, session.session, {
+					maxAge: MONTH,
+					secure
+				}),
+				`${CSRF_COOKIE}=${randomBytes(16).toString("base64url")}; Path=/; Max-Age=${MONTH}; SameSite=Lax${secure ? "; Secure" : ""}`,
+				cookie(browserCookieName(secure), "", {
+					maxAge: 0,
+					secure
+				})
+			]);
+			return json(res, 200, {
+				ok: true,
+				next: landing
+			});
+		}
+		return json(res, 404, { error: "not found" });
+	};
+}
+/**
+* The page the identity service sends the tab back to.
+*
+* Fixed bytes for everyone: the assertion is in the fragment, which the browser
+* never sent here, so there is nothing to template and nothing to escape. The
+* script reads it, wipes it out of the address bar before doing anything else -
+* so it cannot be left behind in history or read off the screen - and hands it
+* to the callback over a SAME-ORIGIN POST, which is what keeps the browser
+* handle cookie flowing under SameSite=Lax.
+*
+* A refusal is shown HERE rather than bounced back to the gate, because this is
+* the page somebody is looking at. Being told "that account was not invited" on
+* the screen in front of you beats being returned to a form that silently
+* refuses to move.
+*/
+/**
+* The mark and the escaper, defined here rather than imported from serve.ts.
+*
+* serve.ts imports this module, so reaching back for them would be a cycle. The
+* paths are the same ones the gate draws - if one changes, both change, which
+* is exactly the coupling the shared look depends on.
+*/
+const MARK_AT = (size) => `<svg viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor" aria-hidden><path d="M239.29,59.28l-64.8,144a8,8,0,0,1-7.3,4.72H24a8,8,0,0,1-7.3-11.28l64.8-144A8,8,0,0,1,88.81,48H232A8,8,0,0,1,239.29,59.28Z" opacity=".1"/><path d="M245.43,47.31A15.94,15.94,0,0,0,232,40H88.81a16,16,0,0,0-14.59,9.43l-64.8,144A16,16,0,0,0,24,216H167.19a16,16,0,0,0,14.59-9.43l64.8-144A16,16,0,0,0,245.43,47.31ZM167.19,200H24L88.81,56H232Z"/></svg>`;
+const MARK = MARK_AT(18);
+const MARK_LG = MARK_AT(24);
+const ARROW = `<svg class="up" viewBox="0 0 256 256" width="11" height="11" fill="currentColor" aria-hidden><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg>`;
+/** The canvas name is the operator's own, but it still lands in HTML. */
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+/**
+* `share: { branding: false }` is documented as stripping every Marver mention,
+* and this page was the exception nobody noticed - the last screen of the flow,
+* still wearing the footer an operator had explicitly turned off. A setting that
+* holds almost everywhere is a setting you cannot rely on.
+*/
+function finishPage(canvasName, host, switchUrl, branding = true) {
+	const name = esc(canvasName || "this canvas");
+	const where = esc(host);
+	return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="robots" content="noindex" />
+<title>Signing in - ${name}</title>
+<link rel="icon" href="/__mv/favicon/favicon.ico" sizes="48x48" />
+<style>
+  /* The gate's own tokens. This page is the last thing somebody sees before the
+     canvas opens - or the only thing, if they are refused - so it belongs to
+     the same surface rather than looking like an error from somewhere else. */
+  * { box-sizing: border-box }
+  body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
+         align-items: center; justify-content: center; gap: 18px;
+         background-color: #e7e9ef;
+         background-image: radial-gradient(#c9cbd5 1px, transparent 1px);
+         background-size: 20px 20px;
+         font: 500 14px -apple-system, system-ui, sans-serif; color: #18181b;
+         -webkit-font-smoothing: antialiased }
+  .card { width: 340px; padding: 24px; border-radius: 24px;
+          background: rgba(255,255,255,.64);
+          backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+          box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 12px 32px rgba(24,24,27,.07);
+          display: flex; flex-direction: column; gap: 14px }
+  header { display: flex; align-items: center; gap: 9px }
+  header svg { color: #0088ff; flex: none }
+  h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em }
+  /* Pulled up against the address below it: the state line introduces that
+     chip rather than floating between it and the canvas name. */
+  .state { margin: 0 0 -8px; padding: 0 4px; font-size: 13.5px; font-weight: 600 }
+  .chip { height: 40px; padding: 0 16px; border-radius: 999px;
+          background: rgba(24,24,27,.05); display: flex; align-items: center;
+          font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace;
+          overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+  p.lead { margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.5;
+           color: rgba(24,24,27,.66) }
+  p.lead strong { color: #18181b; font-weight: 600 }
+  a.cta { height: 40px; border-radius: 999px; background: #18181b; color: #fafafa;
+          font: 600 13px -apple-system, system-ui, sans-serif; text-decoration: none;
+          display: flex; align-items: center; justify-content: center }
+  footer a { display: inline-flex; align-items: center; gap: 7px;
+             font: 600 12.5px -apple-system, system-ui, sans-serif;
+             color: rgba(24,24,27,.5); text-decoration: none }
+  footer a > svg:first-of-type { color: #0088ff }
+  footer .md, footer .up { transition: color .15s, opacity .15s }
+  footer a:hover .md { color: #0088ff; text-decoration: underline; text-underline-offset: 3px }
+  footer .up { opacity: .45; margin-left: -3px }
+  footer a:hover .up { opacity: 1; color: #0088ff }
+  [hidden] { display: none !important }
+  /* Shown only if the wait becomes long enough to be worth explaining.
+     Painting the whole card first meant every successful sign-in flashed a
+     panel naming the canvas and its address on the way past - a screen nobody
+     needs, appearing and vanishing, which reads as a stutter rather than as
+     progress. The card is for when something has to be SAID; getting in says
+     itself by the canvas appearing. */
+  .wait { width: 34px; height: 34px; border-radius: 50%;
+          border: 3px solid rgba(24,24,27,.12); border-top-color: #0088ff;
+          animation: spin .7s linear infinite }
+  @keyframes spin { to { transform: rotate(360deg) } }
+  @media (prefers-reduced-motion: reduce) {
+    .wait { animation: none; border-top-color: rgba(24,24,27,.35) }
+  }
+</style></head>
+<body>
+  <div class="wait" id="wait" role="status" aria-label="Signing you in" hidden></div>
+  <div class="card" id="card" hidden>
+    <header>${MARK_LG}<h1 id="t">${name}</h1></header>
+    <p class="state" id="s"></p>
+    <div class="chip">${where}</div>
+    <p class="lead" id="m"></p>
+    <p class="lead" id="m2" hidden></p>
+    <a class="cta" id="back" href="/" data-switch="${esc(switchUrl)}" hidden>Use a different account</a>
+  </div>
+  ${branding ? `<footer id="mark" hidden><a href="${poweredByUrl(canvasName, "published-canvas", "sign-in")}" target="_blank" rel="noopener">${MARK} <span>Powered by <span class="md">Marver.design</span></span> ${ARROW}</a></footer>` : ""}
+<script>
+(function () {
+  var s = document.getElementById('s'), m = document.getElementById('m'), back = document.getElementById('back')
+  var m2 = document.getElementById('m2')
+  var wait = document.getElementById('wait'), card = document.getElementById('card')
+
+  /**
+   * A spinner, but only if the wait is long enough to need one.
+   *
+   * This page is usually one POST - fifty to two hundred milliseconds - and a
+   * spinner that appears and vanishes inside that window is worse than no
+   * spinner at all: it is a flicker, and a flicker reads as something going
+   * wrong. Held back, the fast path shows only the dotted ground, which is the
+   * same ground the canvas itself is drawn on - so it looks like the canvas
+   * loading rather than like a screen in between.
+   *
+   * Past a second and a half the wait is real, and silence stops being calm and
+   * starts being broken. That is when the spinner earns its place.
+   */
+  var slow = setTimeout(function () { wait.hidden = false }, 1500)
+
+  /**
+   * Stop waiting and show the card - only ever for something worth reading.
+   *
+   * The badge belongs to the CARD, not to the page. Left outside the hidden
+   * card it sat by itself in the middle of an empty ground on every successful
+   * sign-in - which is the same flash the card used to be, wearing a smaller
+   * hat. Nothing is on screen until there is something to say.
+   */
+  var mark = document.getElementById('mark')
+  function speak() {
+    clearTimeout(slow)
+    wait.hidden = true
+    card.hidden = false
+    if (mark) mark.hidden = false
+  }
+  /**
+   * State, what happened, and - separately - what to do about it.
+   *
+   * The advice used to run on from the diagnosis in one paragraph, so the
+   * sentence that tells somebody how to get unstuck was buried at the end of
+   * the sentence explaining why they are stuck. They are two different thoughts
+   * and the person only needs the second one.
+   */
+  function stop(state, msg, cta, advice) {
+    speak()
+    s.textContent = state; m.textContent = msg
+    if (advice) { m2.textContent = advice; m2.hidden = false }
+    if (cta) { back.textContent = cta; back.hidden = false }
+  }
+
+  /** Refused, and told which account did it. */
+  function refused(email) {
+    speak()
+    s.textContent = "You haven't been invited"
+    m.textContent = ''
+    m.appendChild(document.createTextNode('You are signed in as '))
+    var b = document.createElement('strong')
+    b.textContent = email
+    m.appendChild(b)
+    m.appendChild(document.createTextNode(', and that address is not on the invite list for this canvas.'))
+    m2.textContent = 'Ask whoever owns it to add you, or sign in with the address they invited.'
+    m2.hidden = false
+    back.textContent = 'Use a different account'
+    // Signing out happens at the identity service - this canvas cannot reach
+    // across origins to do it, and sending them back here would just hand them
+    // the same account and the same refusal.
+    back.href = back.getAttribute('data-switch') || '/'
+    back.hidden = false
+  }
+
+  // Take it, then erase it - before any await, so a slow network cannot leave
+  // the assertion sitting in the address bar.
+  var assertion = location.hash.replace(/^#/, '')
+  try { history.replaceState(null, '', location.pathname) } catch (e) {}
+
+  if (!assertion) return stop('Nothing to sign in with', 'That link is incomplete. Start again from the canvas.', 'Back to the canvas')
+
+  fetch('/__mv/id/callback', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ assertion: assertion })
+  }).then(function (res) {
+    if (res.ok) {
+      // Back to the board or thread the link pointed at. The server decides
+      // where that is - it held the deep link the whole time - so a value in
+      // this page cannot send anybody somewhere else.
+      return res.json().then(function (body) {
+        var to = body && typeof body.next === 'string' && body.next.indexOf('#/') === 0 ? body.next : ''
+        location.replace('/' + to)
+      }, function () { location.replace('/') })
+    }
+    if (res.status === 403) {
+      return res.json().then(function (body) {
+        var who = body && typeof body.email === 'string' ? body.email : ''
+        // textContent, never innerHTML: the address is attested, but it is still
+        // a string arriving over the wire and this page will not be the place
+        // that learns the difference the hard way.
+        who ? refused(who) : stop("You haven't been invited",
+          'That account is not on the invite list for this canvas. Ask whoever owns it to add your address.',
+          'Use a different account')
+      }, function () {
+        stop("You haven't been invited",
+          'That account is not on the invite list for this canvas.',
+          'Use a different account',
+          'Ask whoever owns it to add your address.')
+      })
+    }
+    stop('That sign-in did not work', 'Start again from the canvas, or try a different account.', 'Try again')
+  }).catch(function () {
+    stop('Could not reach the canvas', 'It may have stopped. Try again in a moment.', 'Try again')
+  })
+})()
+<\/script>
+</body></html>`;
+}
+function json(res, status, body) {
+	res.statusCode = status;
+	res.setHeader("content-type", "application/json");
+	res.setHeader("cache-control", "no-store");
+	res.end(JSON.stringify(body));
+	return true;
+}
+function cookie(name, value, o) {
+	return `${name}=${value}; Path=/; Max-Age=${o.maxAge}; HttpOnly; SameSite=Lax${o.secure ? "; Secure" : ""}`;
+}
+function readCookie(req, name) {
+	return new RegExp(`(?:^|;\\s*)${name}=([\\w-]+)`).exec(String(req.headers.cookie ?? ""))?.[1] ?? "";
+}
+/**
+* Read a bounded request body.
+*
+* Counts BYTES, not decoded characters, and signals an overflow rather than
+* destroying the socket - the previous version killed the connection and then
+* tried to write a response onto it, which cannot arrive.
+*/
+function readBody(req, limit, timeoutMs = 1e4) {
+	return new Promise((resolve) => {
+		const chunks = [];
+		let size = 0;
+		let done = false;
+		const finish = (tooLarge) => {
+			if (done) return;
+			done = true;
+			clearTimeout(timer);
+			resolve({
+				body: tooLarge ? "" : Buffer.concat(chunks).toString("utf8"),
+				tooLarge
+			});
+		};
+		const timer = setTimeout(() => {
+			req.pause();
+			finish(true);
+		}, timeoutMs);
+		if (typeof timer.unref === "function") timer.unref();
+		req.on("data", (c) => {
+			size += c.length;
+			if (size > limit) {
+				req.pause();
+				return finish(true);
+			}
+			chunks.push(c);
+		});
+		req.on("end", () => finish(false));
+		req.on("error", () => finish(true));
+	});
+}
+//#endregion
+export { marverIdHandler };