@bkazemi/verily 0.8.0 → 0.9.0

package/dist/server/index.js

@@ -1,7 +1,7 @@
 import { attestationLabel, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
 import { artifactAttempts, codeAttempts, VerilyService, Unavailable, } from './service.js';
 import { copyScript, waitScript } from './copy.js';
-import { escape } from './escape.js';
+import { html } from './html.js';
 import { card, externalCard, marked, moment, page, safeUrl, times, verdict } from './render.js';
 import { toneOf } from '../marks.js';
 import { stylesheet, styleVersion } from './style.js';
@@ -49,7 +49,8 @@ function wants(request, url) {
         ? 'json'
         : 'page';
 }
-const html = (body, status = 200) => new Response(body, {
+/** A page as a response. */
+const pageResponse = (body, status = 200) => new Response(body, {
     status,
     headers: { ...headers, 'Content-Type': 'text/html; charset=utf-8' },
 });
@@ -85,19 +86,27 @@ const redirect = (url, cookie) => new Response(null, {
 function attestationNote(attestation, names, additional = false) {
     const label = attestationLabel(attestation.method, names, attestation);
     if (!label)
-        return '';
+        return undefined;
     // Set by a provider implementation from holder-supplied input, so it reaches an href
     // only after being confirmed http(s).
     const artifact = attestation.artifactUrl && safeUrl(attestation.artifactUrl);
     const how = `how${additional ? ' additional' : ''}`;
-    return `<p class="${how}">${additional ? '+ ' : ''}${artifact
-        ? `<a href="${escape(artifact)}" rel="noreferrer" title="${escape(proofTitle(attestation, moment))}">${escape(label)}</a>`
-        : escape(label)}</p>`;
+    return html `
+    <p class="${how}">
+      ${additional && '+ '}${artifact
+        ? html `
+              <a href="${artifact}" rel="noreferrer" title="${proofTitle(attestation, moment)}">
+                ${label}
+              </a>
+            `
+        : label}
+    </p>
+  `;
 }
 /** The external side's methods: the one it was first shown by, then each one since. */
 function externalNotes(attestations, names) {
     const [main, ...rest] = attestations.external;
-    return attestationNote(main, names) + rest.map((a) => attestationNote(a, names, true)).join('');
+    return html `${attestationNote(main, names)}${rest.map((a) => attestationNote(a, names, true))}`;
 }
 /**
  * What a holder does to use one method, for a page offering several. A single method needs
@@ -201,6 +210,19 @@ function heldNames(providers) {
     const names = [...new Set(providers.map(held))];
     return names.length > 1 ? `${names.slice(0, -1).join(', ')} or ${names.at(-1)}` : names[0];
 }
+/** What proving control is for on each kind of /verify page. */
+function purpose(kind, held, noun, several) {
+    const ways = {
+        connect: several
+            ? `Choose an account to link to this ${noun}. You show you control it, then review the link before it's made.`
+            : `Show you control your ${held} to link it to this ${noun}. You review the link before it's made.`,
+        renew: `A connection lapses unless it's renewed. Show you still control your ${held} to extend it. It keeps its ID, so anywhere that shows it keeps working.`,
+        visibility: `Only someone who controls both accounts can change this. Show you still control your ${held}, then choose.`,
+        revoke: `Show you control the ${held} on this connection, and you can then remove it.`,
+        'share-revoke': `Show you control the ${held} on this connection, and you can then revoke its sharing link. The connection itself stays.`,
+    };
+    return ways[kind];
+}
 /** Provider setup with the flow’s return instructions, shared by HTML and the dialog. */
 function proofInstructions(provider, flow) {
     return [
@@ -217,22 +239,20 @@ function proofInstructions(provider, flow) {
  * reflowed: it is copied character for character, and one wrapped line is a broken command.
  */
 function instructions(parts) {
-    return parts
-        .map((part) => typeof part === 'string'
-        ? `<p>${escape(part)}</p>`
+    return html `${parts.map((part) => typeof part === 'string'
+        ? html `<p>${part}</p>`
         : Array.isArray(part)
-            ? `<p>${part.map(inline).join('')}</p>`
-            : `<pre><code>${escape(part.code)}</code></pre>`)
-        .join('');
+            ? html `<p>${part.map(inline)}</p>`
+            : html `<pre><code>${part.code}</code></pre>`)}`;
 }
 /** A piece of a paragraph. A link that is not http(s) is written as its text alone. */
 function inline(piece) {
     if (typeof piece === 'string')
-        return escape(piece);
+        return piece;
     const href = safeUrl(piece.href);
     return href
-        ? `<a href="${escape(href)}" rel="noreferrer" target="_blank">${escape(piece.text)}</a>`
-        : escape(piece.text);
+        ? html `<a href="${href}" rel="noreferrer" target="_blank">${piece.text}</a>`
+        : piece.text;
 }
 /**
  * The holder's choice of who may read the record, or the one visibility there is when the
@@ -253,8 +273,18 @@ function visibilityChoice(local, allowed, signed) {
         ? `Public: anyone can view both sides of this link, on ${local.siteName} or anywhere else`
         : 'Public: anyone can view both sides of this link') + (signed ? `. ${signedNote}` : '');
     if (allowed.length === 1)
-        return `<input type="hidden" name="visibility" value="${allowed[0]}"><p class="fine">${escape(allowed[0] === 'unlisted' ? `Unlisted. ${unlisted}` : `${shown}.`)}</p>`;
-    return `<fieldset><legend>Evidence visibility</legend><label><input type="radio" name="visibility" value="unlisted" checked>Unlisted</label><p>${escape(unlisted)}</p><label><input type="radio" name="visibility" value="public">${escape(shown)}</label></fieldset>`;
+        return html `
+      <input type="hidden" name="visibility" value="${allowed[0]}">
+      <p class="fine">${allowed[0] === 'unlisted' ? `Unlisted. ${unlisted}` : `${shown}.`}</p>
+    `;
+    return html `
+    <fieldset>
+      <legend>Evidence visibility</legend>
+      <label><input type="radio" name="visibility" value="unlisted" checked>Unlisted</label>
+      <p>${unlisted}</p>
+      <label><input type="radio" name="visibility" value="public">${shown}</label>
+    </fieldset>
+  `;
 }
 /**
  * A link's local side is one of the site's accounts, a page, or the site itself.
@@ -271,59 +301,91 @@ function evidencePage(e, base, report, keyId, named) {
     // The heading already names the site and the card already names the subject, so the
     // site's own reference would be a third line saying the same thing. The provider's
     // identifier stays: that one is the provider's word, not the site's own wording.
-    card(local.heading, local.value, e.local.profileUrl, undefined, attestationNote(e.attestations.local, names)) +
-        externalCard(marked(names.provider, e.provider, e.attestations.external[0].method), e.external, externalNotes(e.attestations, names)) +
-        times(e.status === 'retired'
-            ? [
-                ['Approved', e.approvedAt],
-                // Two rows, always, so a reader sees any gap between them: an account retired
-                // weeks after it was last proved went unproved for those weeks.
-                ['Last verified', lastProved(e)],
-                ['Retired', e.retiredAt],
-                ['Sharing link expires', e.linkExpiresAt],
-            ]
-            : [
-                ['Approved', e.approvedAt],
-                ['Authenticated', e.authenticatedAt],
-                [
-                    current ? 'Valid until' : 'Expired on',
-                    e.status === 'revoked' ? undefined : e.expiresAt,
-                ],
-                ['Revoked on', e.revokedAt],
-                // Only a method that publishes an artifact drifts; a sign-in does not go stale.
-                [
-                    'Last checked',
-                    e.attestations.external[0].artifactUrl
-                        ? e.attestations.external[0].confirmedAt
-                        : undefined,
-                ],
-                ['Sharing link expires', e.linkExpiresAt],
-            ]) +
-        `${e.linkExpiresAt ? '<p class="fine">Anyone with this link can view and forward it.</p>' : ''}
-    ${e.signedUrl ? `<p class="signed" id="signed"><strong>Signed by ${escape(e.verifierName)}</strong>${keyId ? `<br>${keyLine(base, keyId, named)}` : ''}<br><a href="${escape(safeUrl(e.signedUrl))}">Download signed record</a> · <a href="${escape(base)}/check">Check a record</a></p>` : ''}
-    <p class="fine">This connection does not establish legal identity, trustworthiness, content authorship, or permanent ownership.</p>
-    <p class="fine"><a href="${escape(base)}/external-revoke/${escape(e.id)}">Remove this connection using your external account</a></p>
-    ${e.visibility === 'unlisted' ? `<p class="fine"><a href="${escape(base)}/external-share-revoke/${escape(e.id)}">Revoke only this sharing link using your external account</a></p>` : ''}
-    <p class="fine"><a href="${escape(report)}" rel="noreferrer">Report an incorrect record</a></p>`, '', '', verdict(toneOf(e, Date.now())));
+    html `
+      ${card(local.heading, local.value, e.local.profileUrl, undefined, attestationNote(e.attestations.local, names))}
+      ${joiner}
+      ${externalCard(marked(names.provider, e.provider, e.attestations.external[0].method), e.external, externalNotes(e.attestations, names))}
+      ${times(e.status === 'retired'
+        ? [
+            ['Approved', e.approvedAt],
+            // Two rows, always, so a reader sees any gap between them: an account retired
+            // weeks after it was last proved went unproved for those weeks.
+            ['Last verified', lastProved(e)],
+            ['Retired', e.retiredAt],
+            ['Sharing link expires', e.linkExpiresAt],
+        ]
+        : [
+            ['Approved', e.approvedAt],
+            ['Authenticated', e.authenticatedAt],
+            [
+                current ? 'Valid until' : 'Expired on',
+                e.status === 'revoked' ? undefined : e.expiresAt,
+            ],
+            ['Revoked on', e.revokedAt],
+            // Only a method that publishes an artifact drifts; a sign-in does not go stale.
+            [
+                'Last checked',
+                e.attestations.external[0].artifactUrl
+                    ? e.attestations.external[0].confirmedAt
+                    : undefined,
+            ],
+            ['Sharing link expires', e.linkExpiresAt],
+        ])}
+      ${e.linkExpiresAt !== undefined &&
+        html `<p class="fine">Anyone with this link can view and forward it.</p>`}
+      ${e.signedUrl &&
+        html `
+          <p class="signed" id="signed">
+            <strong>Signed by ${e.verifierName}</strong>${keyId && html `<br>${keyLine(base, keyId, named)}`}<br>
+            <a href="${safeUrl(e.signedUrl)}">Download signed record</a> · <a href="${base}/check">Check a record</a>
+          </p>
+        `}
+      <p class="fine">
+        This connection does not establish legal identity, trustworthiness, content authorship,
+        or permanent ownership.
+      </p>
+      <footer>
+        <p class="fine">
+          Is this your account? <a
+            href="${base}/external-revoke/${e.id}?provider=${encodeURIComponent(e.provider)}">
+            Remove this connection
+          </a>
+        </p>
+        ${e.visibility === 'unlisted' &&
+        html `
+            <p class="fine">
+              <a
+                href="${base}/external-share-revoke/${e.id}?provider=${encodeURIComponent(e.provider)}">
+                Revoke only this sharing link using your external account
+              </a>
+            </p>
+          `}
+        <p class="fine"><a href="${report}" rel="noreferrer">Report an incorrect record</a></p>
+      </footer>
+    `, '', '', verdict(toneOf(e, Date.now()), true));
 }
 /** Joins a subject's card to its accounts: the link itself, drawn as the dialog draws it. */
-const joiner = '<svg class="joiner" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">' +
-    [
-        'M10.5 7.5 13 5a4.95 4.95 0 0 1 7 7l-2.5 2.5',
-        'M13.5 16.5 11 19a4.95 4.95 0 0 1-7-7l2.5-2.5',
-        'M9 15l6-6',
-    ]
-        .map((d) => `<path d="${d}" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>`)
-        .join('') +
-    '</svg>';
+const joiner = html `
+  <svg class="joiner" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+    ${[
+    'M10.5 7.5 13 5a4.95 4.95 0 0 1 7 7l-2.5 2.5',
+    'M13.5 16.5 11 19a4.95 4.95 0 0 1-7-7l2.5-2.5',
+    'M9 15l6-6',
+].map((d) => html `<path d="${d}" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>`)}
+  </svg>
+`;
 /**
  * One account as a badge's dialog draws it: what it is and how it stands, the verifier's
  * own page for it, how it was shown, how its holder lists it, and its times.
  */
 function accountCard(e, external, now) {
     const retired = e.status === 'retired';
-    const record = escape(safeUrl(e.evidenceUrl));
-    return externalCard(marked(e.providerName, e.provider, e.attestations.external[0].method), e.external, `<p class="how">${verdict(toneOf(e, now))}${escape(statusLabel(e, now))} · via: <a href="${record}">${escape(e.verifierName)}</a>${e.signedUrl ? `<a class="signed-mark" href="${record}#signed">signed</a>` : ''}</p>`, externalNotes({ ...e.attestations, external }, { site: e.siteName, provider: e.providerName }), times(retired
+    const record = safeUrl(e.evidenceUrl);
+    return externalCard(marked(e.providerName, e.provider, e.attestations.external[0].method), e.external, html `
+      <p class="how">
+        ${verdict(toneOf(e, now))}${statusLabel(e, now)} · via: <a href="${record}">${e.verifierName}</a>${e.signedUrl && html `<a class="signed-mark" href="${record}#signed">signed</a>`}
+      </p>
+    `, externalNotes({ ...e.attestations, external }, { site: e.siteName, provider: e.providerName }), times(retired
         ? [
             ['Approved', e.approvedAt],
             ['Last verified', lastProved(e)],
@@ -336,11 +398,11 @@ function accountCard(e, external, now) {
         ]), 
     // The holder's own word on the account, which nothing checked, so it sits apart from
     // the methods, in the card's corner as the dialog has it.
-    retired || !e.mark
-        ? ''
-        : e.mark === 'preferred'
-            ? '<div class="listing preferred">Preferred</div>'
-            : '<div class="listing">No longer used</div>');
+    !retired &&
+        e.mark &&
+        (e.mark === 'preferred'
+            ? html `<div class="listing preferred">Preferred</div>`
+            : html `<div class="listing">No longer used</div>`));
 }
 /**
  * The public records given, as a page that shows what a badge's dialog does: a card to a
@@ -354,17 +416,19 @@ function publishedPage(records, base) {
         subjects.set(key, [...(subjects.get(key) ?? []), e]);
     }
     return page(base, 'Public connections', records.length
-        ? [...subjects.values()]
-            .map((held) => {
+        ? html `
+          ${[...subjects.values()].map((held) => {
             const local = localSide(held[0].local, held[0].siteName);
-            return (card(local.heading, local.value, held[0].local.profileUrl) +
-                joiner +
-                `<div class="accounts">${accountsOf(held, now)
-                    .map(({ lead, external }) => accountCard(lead, external, now))
-                    .join('')}</div>`);
-        })
-            .join('')
-        : '<p>No public connections.</p>');
+            return html `
+              ${card(local.heading, local.value, held[0].local.profileUrl)}
+              ${joiner}
+              <div class="accounts">
+                ${accountsOf(held, now).map(({ lead, external }) => accountCard(lead, external, now))}
+              </div>
+            `;
+        })}
+        `
+        : html `<p>No public connections.</p>`);
 }
 /**
  * Names a signing key on one line: its last sixteen digits, linked to the key itself with
@@ -374,12 +438,22 @@ function publishedPage(records, base) {
  * beside it gives for its verifier.
  */
 function keyLine(base, keyId, named) {
-    const key = `Key <a href="${escape(base)}/keys.asc" title="${escape(keyId)}">${escape(short(keyId))}</a>`;
+    const key = html `Key <a href="${base}/keys.asc" title="${keyId}">${short(keyId)}</a>`;
     return named
-        ? `${key} · <a href="${escape(named.lookup)}" rel="noreferrer" title="${escape(`View the lookup for ${named.domain}`)}">confirmed in DNS${named.dnssec ? ' (DNSSEC)' : ''}</a>`
+        ? html `
+        ${key} · <a
+          href="${named.lookup}"
+          rel="noreferrer"
+          title="${`View the lookup for ${named.domain}`}">confirmed in DNS${named.dnssec && ' (DNSSEC)'}</a>
+      `
         : key;
 }
-const checkForm = '<form method="post"><label>Signed record <textarea name="record" rows="8" cols="72" required></textarea></label><button>Check</button></form>';
+const checkForm = html `
+  <form method="post">
+    <label>Signed record <textarea name="record" rows="8" cols="72" required></textarea></label>
+    <button>Check</button>
+  </form>
+`;
 /**
  * What a signed record says, once its signature has been checked against this verifier's
  * keys. It is a record of the past: the page says when, and sends the reader to the live
@@ -390,23 +464,31 @@ function checkedPage(d, keyId, base, named) {
     const local = localSide(d.local, d.siteName);
     // A retired record did not stand when it was signed, and its heading says so first.
     const retired = d.version === 2;
-    return page(base, retired ? 'Retired connection' : 'Signed record', `<p>${escape(d.verifierName)} signed this record. It shows what stood when it was signed, not what stands now.</p>` +
-        card(local.heading, local.value, d.local.profileUrl, undefined, attestationNote(d.attestations.local, names)) +
-        externalCard(marked(names.provider, d.provider, d.attestations.external[0].method), d.external, externalNotes(d.attestations, names)) +
-        times(retired
-            ? [
-                ['Signed', d.issuedAt],
-                ['Approved', d.approvedAt],
-                ['Last verified', lastProved(d)],
-                ['Retired', d.retiredAt],
-            ]
-            : [
-                ['Signed', d.issuedAt],
-                ['Approved', d.approvedAt],
-                ['Valid until', d.expiresAt],
-            ]) +
-        `<p class="fine">${keyLine(base, keyId, named)}</p>
-    <p class="fine"><a href="${escape(safeUrl(d.evidenceUrl))}">See whether this connection still stands</a></p>`);
+    return page(base, retired ? 'Retired connection' : 'Signed record', html `
+      <p>
+        ${d.verifierName} signed this record. It shows what stood when it was signed, not what
+        stands now.
+      </p>
+      ${card(local.heading, local.value, d.local.profileUrl, undefined, attestationNote(d.attestations.local, names))}
+      ${joiner}
+      ${externalCard(marked(names.provider, d.provider, d.attestations.external[0].method), d.external, externalNotes(d.attestations, names))}
+      ${times(retired
+        ? [
+            ['Signed', d.issuedAt],
+            ['Approved', d.approvedAt],
+            ['Last verified', lastProved(d)],
+            ['Retired', d.retiredAt],
+        ]
+        : [
+            ['Signed', d.issuedAt],
+            ['Approved', d.approvedAt],
+            ['Valid until', d.expiresAt],
+        ])}
+      <p class="fine">${keyLine(base, keyId, named)}</p>
+      <p class="fine">
+        <a href="${safeUrl(d.evidenceUrl)}">See whether this connection still stands</a>
+      </p>
+    `);
 }
 export function createVerily(options) {
     const service = new VerilyService(options);
@@ -521,7 +603,13 @@ export function createVerily(options) {
     }
     /** A failure names its reason when the provider gave one meant for the holder. */
     function result(outcome, id = '', reason) {
-        return html(page(prefix, 'Verification result', `<p>${escape(outcome)}</p>${reason ? `<p>${escape(reason)}.</p>` : ''}<div id="verily-result" data-outcome="${escape(outcome)}" data-id="${escape(id)}"></div><script src="${escape(prefix)}/result.js" defer></script><p>You can close this window and return to account settings.</p>`));
+        return pageResponse(page(prefix, 'Verification result', html `
+          <p>${outcome}</p>
+          ${reason && html `<p>${reason}.</p>`}
+          <div id="verily-result" data-outcome="${outcome}" data-id="${id}"></div>
+          <script src="${prefix}/result.js" defer></script>
+          <p>You can close this window and return to account settings.</p>
+        `));
     }
     /**
      * The page for a flow that has ended, or wherever `finish` sends the holder instead. Only
@@ -617,14 +705,14 @@ export function createVerily(options) {
      * page that asked is waiting on the flow and carries on from there, so this one offers
      * nowhere to go.
      */
-    const confirmed = (flow) => html(page(prefix, flow.phase === 'failed' ? 'Address not confirmed' : 'Address confirmed', flow.phase === 'failed'
-        ? `<p>${escape(flow.reason ?? 'This address could not be confirmed')}.</p>`
-        : '<p>You can close this tab now.</p>'));
+    const confirmed = (flow) => pageResponse(page(prefix, flow.phase === 'failed' ? 'Address not confirmed' : 'Address confirmed', flow.phase === 'failed'
+        ? html `<p>${flow.reason ?? 'This address could not be confirmed'}.</p>`
+        : html `<p>You can close this tab now.</p>`));
     async function handle(request) {
         const url = new URL(request.url);
         if (url.origin !== base.origin ||
             !(url.pathname === prefix || url.pathname.startsWith(prefix + '/')))
-            return html(page(prefix, 'Unavailable', ''), 404);
+            return pageResponse(page(prefix, 'Unavailable', html ``), 404);
         const path = url.pathname.slice(prefix.length);
         try {
             if (!['GET', 'POST'].includes(request.method))
@@ -687,22 +775,50 @@ export function createVerily(options) {
                     // A new link started from this page always ends on its approval, as it did when
                     // this form was a GET, so it says so: `/verify` is an address any site can send a
                     // browser to, and the approval is where the holder sees what they are linking.
-                    const forms = offered
-                        .map((p) => `<form method="post" action="${escape(prefix)}/sessions"><input type="hidden" name="kind" value="${kind}">${kind === 'connect' ? '<input type="hidden" name="unattended" value="1">' : ''}<input type="hidden" name="connectionId" value="${escape(id)}"><input type="hidden" name="provider" value="${escape(p.id)}"><input type="hidden" name="method" value="${escape(providerMethod(p))}"><button>${escape(offered.length > 1 ? methodAction(p) : `Continue with ${p.name}`)}</button></form>`)
-                        .join('');
-                    return html(page(prefix, external
-                        ? 'Remove a connection'
+                    // the provider's mark where it has one, then what the button does
+                    const label = (text, p) => {
+                        const heading = marked(text, p.id, providerMethod(p));
+                        return typeof heading === 'string'
+                            ? heading
+                            : html `${heading.mark}<span>${heading.text}</span>`;
+                    };
+                    const forms = offered.map((p) => html `
+                <form method="post" action="${prefix}/sessions">
+                  <input type="hidden" name="kind" value="${kind}">
+                  ${kind === 'connect' && html `<input type="hidden" name="unattended" value="1">`}
+                  <input type="hidden" name="connectionId" value="${id}">
+                  <input type="hidden" name="provider" value="${p.id}">
+                  <input type="hidden" name="method" value="${providerMethod(p)}">
+                  <button>
+                    ${label(offered.length > 1 ? methodAction(p) : `Continue with ${p.name}`, p)}
+                  </button>
+                </form>
+              `);
+                    // several methods stack as one list of equal buttons, as in the dialog
+                    const choices = offered.length > 1 ? html `<div class="choices">${forms}</div>` : forms;
+                    return pageResponse(page(prefix, external
+                        ? kind === 'share-revoke'
+                            ? 'Revoke a sharing link'
+                            : 'Remove a connection'
                         : kind === 'renew'
                             ? 'Renew this connection'
-                            : several
-                                ? 'Verify an account'
-                                : `Verify with ${providerNames(offered)}`, `
-            ${user
-                        ? card(subject(user).heading, subject(user).value, user.profileUrl)
-                        : '<p>Authenticate with the matching external account to review and remove this link.</p>'}
-            <p>Confirm the connection between this ${escape(subjectNoun(user?.kind) ?? 'site')} and your ${escape(heldNames(offered))}.</p>
-            ${kind === 'renew' && offered.length > 1 ? '<p class="fine">Renewing another way adds that method beneath the one this connection was first shown by.</p>' : ''}
-            ${forms}`));
+                            : kind === 'visibility'
+                                ? 'Change who can see this connection'
+                                : several
+                                    ? 'Verify an account'
+                                    : `Verify with ${providerNames(offered)}`, html `
+                ${user && card(subject(user).heading, subject(user).value, user.profileUrl)}
+                <p>${purpose(kind, heldNames(offered), subjectNoun(user?.kind) ?? 'site', several)}</p>
+                ${kind === 'renew' &&
+                        offered.length > 1 &&
+                        html `
+                    <p class="fine">
+                      Renewing another way adds that method beneath the one this connection was first
+                      shown by.
+                    </p>
+                  `}
+                ${choices}
+              `));
                 }
                 if (path === '/callback') {
                     const state = url.searchParams.get('state');
@@ -739,15 +855,30 @@ export function createVerily(options) {
                         if (!['revoke', 'share-revoke'].includes(flow.kind))
                             if ((await local(request)).id !== flow.local?.id)
                                 throw new Unavailable();
-                        return html(page(prefix, `Verify with ${provider.name}`, `${instructions(proofInstructions(provider, flow))}
-            ${flow.tries ? `<p>${escape(refusedNote(flow))}</p>` : ''}
-            <form method="post" action="${escape(prefix)}/flows/${escape(flow.id)}/submit">
-            <label>${escape(artifactField(provider))} ${provider.artifact === 'document'
-                            ? `<textarea name="artifact" rows="14" cols="72" required>${escape(flow.artifact ?? '')}</textarea>`
-                            : `<input name="artifact" type="${provider.input ?? 'url'}" value="${escape(flow.artifact ?? flow.suggested ?? '')}" autocapitalize="none" spellcheck="false" required>`}</label>
-            <button>Check my proof</button></form>
-            <p class="fine">${escape(artifactNote(provider, flow.expect))}</p>
-            <script src="${escape(prefix)}/copy.js" defer></script>`));
+                        return pageResponse(page(prefix, `Verify with ${provider.name}`, html `
+                  ${instructions(proofInstructions(provider, flow))}
+                  ${flow.tries ? html `<p>${refusedNote(flow)}</p>` : ''}
+                  <form method="post" action="${prefix}/flows/${flow.id}/submit">
+                    <label>
+                      ${artifactField(provider)} ${provider.artifact === 'document'
+                            ? html `
+                              <textarea name="artifact" rows="14" cols="72" required>${flow.artifact ?? ''}</textarea>
+                            `
+                            : html `
+                              <input
+                                name="artifact"
+                                type="${provider.input ?? 'url'}"
+                                value="${flow.artifact ?? flow.suggested ?? ''}"
+                                autocapitalize="none"
+                                spellcheck="false"
+                                required>
+                            `}
+                    </label>
+                    <button>Check my proof</button>
+                  </form>
+                  <p class="fine">${artifactNote(provider, flow.expect)}</p>
+                  <script src="${prefix}/copy.js" defer></script>
+                `));
                     }
                     // Holder-paced too, in two steps: where to send a code, then the code itself.
                     if (flow.phase === 'pending' && isCodeProvider(provider)) {
@@ -755,17 +886,53 @@ export function createVerily(options) {
                             if ((await local(request)).id !== flow.local?.id)
                                 throw new Unavailable();
                         const step = codeStep(provider, flow);
-                        return html(page(prefix, `Verify with ${provider.name}`, `${step.sentTo === undefined
-                            ? ''
-                            : `<p>A message was sent to ${escape(step.sentTo)}. Press the button in it, and this page carries on.</p><noscript><p><a href="${escape(prefix)}/flows/${escape(flow.id)}">I pressed the button</a></p></noscript><p>Or enter the code from the message here.</p>${step.wrong
-                                ? `<p>That code did not match. ${step.triesLeft === 1 ? 'One try is' : `${step.triesLeft} tries are`} left.</p>`
-                                : ''}`}
-            <form method="post" action="${escape(prefix)}/flows/${escape(flow.id)}/submit">
-            <label>${escape(step.sentTo === undefined ? step.field : 'Your code')} ${step.sentTo === undefined
-                            ? `<input name="artifact" type="${step.input}" autocomplete="${step.input}" required>`
-                            : '<input name="artifact" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false" required>'}</label>
-            <button>${step.sentTo === undefined ? `Send the ${escape(provider.name.toLowerCase())}` : 'Check my code'}</button></form>
-            ${step.sentTo === undefined ? `<p class="fine">${escape(codeNote)}</p>` : `<script src="${escape(prefix)}/wait.js" defer></script>`}`));
+                        return pageResponse(page(prefix, `Verify with ${provider.name}`, html `
+                  ${step.sentTo !== undefined &&
+                            html `
+                      <p>
+                        A message was sent to ${step.sentTo}. Press the button in it, and this page
+                        carries on.
+                      </p>
+                      <noscript>
+                        <p><a href="${prefix}/flows/${flow.id}">I pressed the button</a></p>
+                      </noscript>
+                      <p>Or enter the code from the message here.</p>
+                      ${step.wrong &&
+                                html `
+                          <p>
+                            That code did not match. ${step.triesLeft === 1 ? 'One try is' : `${step.triesLeft} tries are`} left.
+                          </p>
+                        `}
+                    `}
+                  <form method="post" action="${prefix}/flows/${flow.id}/submit">
+                    <label>
+                      ${step.sentTo === undefined ? step.field : 'Your code'} ${step.sentTo === undefined
+                            ? html `
+                              <input
+                                name="artifact"
+                                type="${step.input}"
+                                autocomplete="${step.input}"
+                                required>
+                            `
+                            : html `
+                              <input
+                                name="artifact"
+                                autocomplete="one-time-code"
+                                autocapitalize="characters"
+                                spellcheck="false"
+                                required>
+                            `}
+                    </label>
+                    <button>
+                      ${step.sentTo === undefined
+                            ? `Send the ${provider.name.toLowerCase()}`
+                            : 'Check my code'}
+                    </button>
+                  </form>
+                  ${step.sentTo === undefined
+                            ? html `<p class="fine">${codeNote}</p>`
+                            : html `<script src="${prefix}/wait.js" defer></script>`}
+                `));
                     }
                     if (flow.phase !== 'approval')
                         return await ended(flow);
@@ -777,22 +944,47 @@ export function createVerily(options) {
                     const joined = await service.joining(flow);
                     const kept = ['revoke', 'share-revoke', 'renew'].includes(flow.kind) || joined;
                     const found = standingNote(flow, service.siteOf(flow.local));
-                    return html(page(prefix, ['revoke', 'share-revoke'].includes(flow.kind)
+                    return pageResponse(page(prefix, ['revoke', 'share-revoke'].includes(flow.kind)
                         ? 'Remove connection'
                         : flow.kind === 'renew'
                             ? 'Renew connection'
                             : joined
                                 ? 'Add to connection'
-                                : 'Confirm connection', `
-            ${card(subject(flow.local).heading, subject(flow.local).value, flow.local.profileUrl)}
-            ${externalCard(marked(provider.name, provider.id, providerMethod(provider)), flow.external)}
-            ${joined ? `<p>This account is already linked here. Confirming adds this method to that connection, beneath the one it was first shown by, and it stays ${escape(joined.visibility)}.</p>` : ''}
-            ${found ? `<p>${escape(found)}</p>` : ''}
-            <p class="fine">${escape(service.siteOf(flow.local))} receives the result. Verified via ${escape(options.verifierName)}.</p>
-            <form method="post" action="${escape(prefix)}/flows/${escape(flow.id)}/approve">
-            ${kept ? '<input type="hidden" name="visibility" value="unlisted">' : visibilityChoice(flow.local, visibilities(flow.local), signs)}
-            <button name="action" value="approve">${['revoke', 'share-revoke'].includes(flow.kind) ? (flow.kind === 'share-revoke' ? 'Revoke sharing link' : 'Revoke connection') : flow.kind === 'renew' ? 'Renew connection' : joined ? 'Add to connection' : 'Confirm connection'}</button>
-            <button name="action" value="cancel">Cancel</button></form><p><a href="${escape(prefix)}/verify">Use a different external account</a></p>`));
+                                : 'Confirm connection', html `
+                ${card(subject(flow.local).heading, subject(flow.local).value, flow.local.profileUrl)}
+                ${joiner}
+                ${externalCard(marked(provider.name, provider.id, providerMethod(provider)), flow.external)}
+                ${joined &&
+                        html `
+                    <p>
+                      This account is already linked here. Confirming adds this method to that
+                      connection, beneath the one it was first shown by, and it stays
+                      ${joined.visibility}.
+                    </p>
+                  `}
+                ${found && html `<p>${found}</p>`}
+                <p class="fine">
+                  ${service.siteOf(flow.local)} receives the result. Verified via
+                  ${options.verifierName}.
+                </p>
+                <form method="post" action="${prefix}/flows/${flow.id}/approve">
+                  ${kept
+                        ? html `<input type="hidden" name="visibility" value="unlisted">`
+                        : visibilityChoice(flow.local, visibilities(flow.local), signs)}
+                  <button name="action" value="approve">
+                    ${['revoke', 'share-revoke'].includes(flow.kind)
+                        ? flow.kind === 'share-revoke'
+                            ? 'Revoke sharing link'
+                            : 'Revoke connection'
+                        : flow.kind === 'renew'
+                            ? 'Renew connection'
+                            : joined
+                                ? 'Add to connection'
+                                : 'Confirm connection'}
+                  </button> <button name="action" value="cancel">Cancel</button>
+                </form>
+                <p><a href="${prefix}/verify">Use a different external account</a></p>
+              `));
                 }
                 const confirmation = path.match(/^\/confirm\/([^/]+)$/);
                 // Where the button in a message leads, in whatever browser the holder reads mail
@@ -813,13 +1005,22 @@ export function createVerily(options) {
                         revoke: 'remove its link',
                         'share-revoke': 'revoke its sharing link',
                     };
-                    return html(page(prefix, 'Confirm your address', `${asked.local ? card(subject(asked.local).heading, subject(asked.local).value, asked.local.profileUrl) : ''}
-            ${card(asked.provider.name, externalName(asked.account), undefined)}
-            <p>Confirming shows that this address is yours, so the page that asked can go on to ${escape(next[asked.kind])}. Nothing changes until that page is approved too.</p>
-            <form method="post" action="${escape(prefix)}/confirm/${escape(confirmation[1])}">
-            <input type="hidden" name="token" value="${escape(token)}">
-            <button>Confirm this address</button></form>
-            <p class="fine">If you did not ask for this, close this page. Nothing happens unless you confirm.</p>`));
+                    return pageResponse(page(prefix, 'Confirm your address', html `
+                ${asked.local &&
+                        card(subject(asked.local).heading, subject(asked.local).value, asked.local.profileUrl)}
+                ${card(asked.provider.name, externalName(asked.account), undefined)}
+                <p>
+                  Confirming shows that this address is yours, so the page that asked can go on to
+                  ${next[asked.kind]}. Nothing changes until that page is approved too.
+                </p>
+                <form method="post" action="${prefix}/confirm/${confirmation[1]}">
+                  <input type="hidden" name="token" value="${token}">
+                  <button>Confirm this address</button>
+                </form>
+                <p class="fine">
+                  If you did not ask for this, close this page. Nothing happens unless you confirm.
+                </p>
+              `));
                 }
                 // Lets a static embed track current connections without hardcoding an id.
                 if (path === '/published') {
@@ -830,7 +1031,7 @@ export function createVerily(options) {
                     // was sent asks for nothing, and must go on getting the list.
                     if (url.searchParams.get('format') !== 'json' &&
                         /\btext\/html\b/i.test(request.headers.get('accept') ?? ''))
-                        return html(publishedPage(await service.listed(subject), prefix));
+                        return pageResponse(publishedPage(await service.listed(subject), prefix));
                     const response = json(await service.published(subject));
                     response.headers.set('Access-Control-Allow-Origin', '*');
                     return response;
@@ -847,14 +1048,14 @@ export function createVerily(options) {
                 if (path === '/keys.asc' && signs)
                     return plain(await service.armoredKeys());
                 if (path === '/check' && signs)
-                    return html(page(prefix, 'Check a signed record', `<p>Paste the contents of a signed record saved from ${escape(options.verifierName)}.</p>${checkForm}`));
+                    return pageResponse(page(prefix, 'Check a signed record', html `<p>Paste the contents of a signed record saved from ${options.verifierName}.</p>${checkForm}`));
                 if (path === '/mine')
                     return json(await service.mine(await local(request)));
                 if (path.startsWith('/s/')) {
                     const evidence = await service.shared(path.slice(3));
                     return wants(request, url) === 'json'
                         ? json(evidence)
-                        : html(evidencePage(evidence, prefix, options.reportUrl));
+                        : pageResponse(evidencePage(evidence, prefix, options.reportUrl));
                 }
                 const hosted = path.match(/^\/connections\/([^/]+)\/proof$/);
                 // As public as the evidence it belongs to, and checked the same way.
@@ -877,7 +1078,7 @@ export function createVerily(options) {
                         return response;
                     }
                     const keyId = (await service.keys())[0]?.id;
-                    return html(evidencePage(evidence, prefix, options.reportUrl, keyId, keyId && evidence.signedUrl ? await service.keyNamed(keyId) : undefined));
+                    return pageResponse(evidencePage(evidence, prefix, options.reportUrl, keyId, keyId && evidence.signedUrl ? await service.keyNamed(keyId) : undefined));
                 }
                 if (path.startsWith('/manage/'))
                     return json(await service.read(path.slice(8), await local(request)));
@@ -892,12 +1093,12 @@ export function createVerily(options) {
                         const document = await service.checked(signed);
                         const by = (await signedBy(signed));
                         if (document)
-                            return html(checkedPage(document, by, prefix, await service.keyNamed(by)));
+                            return pageResponse(checkedPage(document, by, prefix, await service.keyNamed(by)));
                     }
                     catch {
                         // A record this build cannot draw is not one it can vouch for.
                     }
-                    return html(page(prefix, 'Check a signed record', `<p>This is not a record signed by ${escape(options.verifierName)}.</p>${checkForm}`));
+                    return pageResponse(page(prefix, 'Check a signed record', html `<p>This is not a record signed by ${options.verifierName}.</p>${checkForm}`));
                 }
                 if (path === '/connect') {
                     const user = await local(request);
@@ -985,8 +1186,8 @@ export function createVerily(options) {
         catch (error) {
             // Never serialize/log exceptions: provider responses and request URLs can contain secrets.
             if (error instanceof Unavailable || error instanceof SyntaxError)
-                return html(page(prefix, 'Unavailable', '<p>This resource is unavailable.</p>'), 404);
-            return html(page(prefix, 'Request failed', '<p>Please try again.</p>'), 500);
+                return pageResponse(page(prefix, 'Unavailable', html `<p>This resource is unavailable.</p>`), 404);
+            return pageResponse(page(prefix, 'Request failed', html `<p>Please try again.</p>`), 500);
         }
     }
     // A sign-in form submits here and is redirected to the provider. Chromium applies