locadot 2.1.0-beta.1 → 2.1.0-beta.3

package/CHANGELOG.md

@@ -25,9 +25,23 @@
   to a signed-out visitor. It uses a 7-day HttpOnly SameSite=Strict session, rate-limits wrong passwords, and adds a Sign out button to the sidebar.
   Mapped hosts are not affected, and neither are scripts or the CLI that send `X-Locadot-Token`.
 
+### Changed
+- `<domain>.localhost` now opens the sender's own dashboard for an admin peer, with full control (hosts, sharing, peers,
+  settings), instead of a landing page; no port needed. The port picker moved to `<domain>.localhost/_locadot/ports`.
+  The page never carries the sender's API token, the API only accepts calls from that `<domain>.localhost` origin, the sender
+  checks the admin role on every request, `hub:localhost off` turns it off, and a dashboard password still asks for sign-in.
+  Senders must run this version too; an older sender answers `<domain>.localhost` with a 404.
+
 ### Fixed
 - The proxy can now tell a user's `LOCADOT_HTTP_PORT`/`LOCADOT_HTTPS_PORT` from the copies the CLI pins on every spawn
   (`LOCADOT_USER_PORTS`), so saved ports aren't reported as env-overridden.
+- `--cors` through remote access: a shared `--cors` mapping is now `--cors` on the receiver too (shown in `list` and the
+  dashboard, kept in step by `remote:sync` and `remote:update`). The sender used to rewrite its apps' origins in pages to its
+  *own* local URLs, which don't exist on the receiver. Now the receiver sends the names it uses (`X-Locadot-Names`), so a
+  page's API calls go to the receiver's name for that mapping (e.g. `api.alice.localhost` after a clash), on the receiver's
+  port. The upstream still sees the calling page's real origin. `<port>.<domain>.localhost` gets the CORS handling of a
+  `--cors` mapping on that port. The sender keeps names only for mappings the peer can see, and only as `*.localhost` URLs.
+  Both machines need this version for the rewriting; with an older receiver the sender behaves as before.
 
 ## 2.1.0-beta.0 (2026-09-27)
 

package/README.md

@@ -111,10 +111,10 @@ short-lived pairing string, and the sender's mappings then show up in the receiv
 | `locadot hub:setup --domain dev.example.com` | Sender: publish through your own named tunnel on your Cloudflare domain (runs `cloudflared` login, creates the tunnel and routes DNS). The address stays the same. |
 | `locadot hub:quick` | Sender: publish on a trycloudflare URL. No account is needed, but **the URL changes if the tunnel restarts**, so receivers have to run `remote:url`. |
 | `locadot hub` / `hub:off` | Show the hub status and URL, or stop it. |
-| `locadot hub:localhost <on\|off>` | Sender: allow or block admin peers from reaching any port on this machine's localhost. |
+| `locadot hub:localhost <on\|off>` | Sender: allow or block admin peers from opening this machine's dashboard and any port on its localhost. |
 | `locadot share --role viewer\|editor\|admin [--hosts a.localhost,b.localhost]` | Sender: print a pairing string. It works once and expires after 5 minutes. `--hosts` limits a viewer to those mappings. |
 | `locadot peers` / `peers:role <id> <role>` / `peers:revoke <id>` | Sender: list the connected machines, change a role, or cut one off. |
-| `locadot connect "<pairing string>" [--name alice] [--domain dev]` | Receiver: connect and import the sender's mappings. If a name clashes, `app.localhost` becomes `app.alice.localhost`. Admins get a local domain to reach the sender's own localhost (see below); `--domain` picks it, otherwise it's a random `adjective-noun`. |
+| `locadot connect "<pairing string>" [--name alice] [--domain dev]` | Receiver: connect and import the sender's mappings. If a name clashes, `app.localhost` becomes `app.alice.localhost`. Admins get a local domain that opens the sender's dashboard and localhost (see below); `--domain` picks it, otherwise it's a random `adjective-noun`. |
 | `locadot remotes` / `remote:sync <name>` / `disconnect <name>` | Receiver: list the connections (with their domain), pull new mappings, or remove the connection and its names. |
 | `locadot remote:domain <name> [domain] [--off]` | Receiver, admin only: set the local domain for a remote's localhost, randomize it (no domain given), or remove it (`--off`). |
 | `locadot remote:alias <name> <remote host> <local host>` | Receiver: give a sender mapping another local name, e.g. `he.localhost`. |
@@ -123,12 +123,20 @@ short-lived pairing string, and the sender's mappings then show up in the receiv
 
 Roles: **viewer** can only browse (optionally limited to the mappings picked on the invite). **editor** can also add and change
 mappings on the sender. **admin** can also delete them and change sharing, and (unless the sender turned it off with
-`hub:localhost off`) reach any port on the sender's own localhost through `https://<domain>.localhost` (the landing page) and
-`https://<port>.<domain>.localhost` (`sender's localhost:<port>`). Traffic goes receiver → Cloudflare → sender →
+`hub:localhost off`) open the sender's own dashboard at `https://<domain>.localhost` and manage it as if they were sitting at it,
+and reach any port on the sender's localhost at `https://<port>.<domain>.localhost` (`sender's localhost:<port>`). The port
+picker is at `https://<domain>.localhost/_locadot/ports`. The admin's browser never gets the sender's API token, so revoking or
+demoting the peer cuts off its dashboard access at once; a dashboard password on the sender still applies. Traffic goes receiver → Cloudflare → sender →
 target, so an editor can reach anything the sender's machine can reach. Only give that role to people you trust. Only hashes
-of the tokens are stored, and failed attempts are rate limited. The sender's dashboard is never reachable through the hub.
+of the tokens are stored, and failed attempts are rate limited. Only admins can open the sender's dashboard through the hub.
 The dashboard has **Remote access** and **Connected machines** cards for all of this.
 
+`--cors` carries over: a sender's `--cors` mapping is `--cors` on the receiver too, with no extra flag. Preflights and CORS
+headers work as they do locally, and origins in the sender's pages are rewritten to the receiver's own names and port (so
+`http://localhost:8000` in a page becomes `http://api.alice.localhost` if that's the receiver's name for `api.localhost`).
+An admin's `<port>.<domain>.localhost` gets the same treatment when a `--cors` mapping points at that port.
+`remote:sync` picks up a sender turning `--cors` on or off.
+
 ### Certificates
 
 | Command | What it does |

package/dist/cli/commands/remote.js

@@ -219,10 +219,10 @@ async function peersRevoke(id) {
     links_1.default.revoke(id);
     (0, shared_1.print)(`🗑️  Revoked peer ${id}.`);
 }
-/** After connect/sync/remote:domain: the sender's own localhost, reachable when this remote has a domain and we're admin. */
+/** After connect/sync/remote:domain: the sender's dashboard and localhost, reachable when this remote has a domain and we're admin. */
 const printDomain = (remote) => {
     if (remote.domain && remote.role === "admin") {
-        (0, shared_1.print)(`🖥️  ${remote.sender.hostname} localhost: ${(0, urls_1.urlFor)(`${remote.domain}.localhost`)}  (any port: ${(0, urls_1.urlFor)(`<port>.${remote.domain}.localhost`)})`);
+        (0, shared_1.print)(`🖥️  ${remote.sender.hostname} dashboard: ${(0, urls_1.urlFor)(`${remote.domain}.localhost`)}  (any port: ${(0, urls_1.urlFor)(`<port>.${remote.domain}.localhost`)})`);
     }
 };
 async function connect(value, options) {

package/dist/constants/template.js

@@ -62,9 +62,10 @@ const upstreamDown = (host, target, reason, dashboardUrl) => page("locadot: upst
     <code>${(0, escape_1.escapeHtml)(host)}</code> → <code>${(0, escape_1.escapeHtml)(target)}</code><br/><br/>
     ${(0, escape_1.escapeHtml)(reason)}. Is the app running?`, dashboardUrl);
 exports.upstreamDown = upstreamDown;
-/** Receiver side: the landing page of `<domain>.localhost`, an admin's door to a sender's whole localhost. */
+/** Receiver side: `<domain>.localhost/_locadot/ports`, the port picker and shared hosts of an admin remote. */
 const remoteLocalhost = (opts) => page(`locadot: ${opts.sender} localhost`, opts.allowed
     ? `<strong style="color: #7ee2a8;">${(0, escape_1.escapeHtml)(opts.sender)}</strong>: localhost<br/><br/>
+    Its dashboard is <a href="/">${(0, escape_1.escapeHtml)(opts.domain)}.localhost</a>.<br/>
     Any port on that machine is at <code>${(0, escape_1.escapeHtml)(opts.portUrl.replace("PORT", "<port>"))}</code>.<br/><br/>
     <form id="go" style="display:flex;gap:8px">
       <input id="port" inputmode="numeric" pattern="[0-9]{1,5}" placeholder="3000" required

package/dist/dashboard/api.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiError = void 0;
+exports.isDashboardOrigin = exports.PEER_TOKEN = exports.ApiError = void 0;
 exports.assertTrusted = assertTrusted;
 exports.readJson = readJson;
 exports.route = route;
@@ -59,6 +59,7 @@ const links_1 = __importStar(require("../lib/links"));
 const hub_config_1 = __importDefault(require("../lib/hub-config"));
 const remotes_1 = __importStar(require("../lib/remotes"));
 const ui_auth_1 = __importDefault(require("../lib/ui-auth"));
+const request_1 = require("../proxy/request");
 const MAX_BODY = 64 * 1024;
 class ApiError extends Error {
     constructor(status, message, hint) {
@@ -74,15 +75,25 @@ const safeEqual = (a, b) => {
     const y = Buffer.from(b);
     return x.length === y.length && crypto_1.default.timingSafeEqual(x, y);
 };
-const isDashboardOrigin = (origin) => {
+/**
+ * What the page carries instead of the API token when an admin peer views it through the hub: the hub already
+ * authenticated the peer, and the real token would outlive a revoked peer.
+ */
+exports.PEER_TOKEN = "hub-peer";
+/** The page's own origin: the dashboard hosts, or for an admin peer the receiver's `<domain>.localhost`. */
+const isDashboardOrigin = (req, origin) => {
     try {
-        const hostname = new URL(origin).hostname.replace(/^\[|\]$/g, "");
-        return constants_1.default.dashboardHosts.includes(hostname);
+        const url = new URL(origin);
+        const peerOrigin = (0, request_1.peerOriginOf)(req);
+        if (peerOrigin)
+            return url.host === peerOrigin;
+        return constants_1.default.dashboardHosts.includes(url.hostname.replace(/^\[|\]$/g, ""));
     }
     catch {
         return false;
     }
 };
+exports.isDashboardOrigin = isDashboardOrigin;
 /**
  * Any web page can make the browser send requests to localhost, so every mutating
  * call must prove it came from the dashboard page itself (or a local script that
@@ -91,12 +102,12 @@ const isDashboardOrigin = (origin) => {
  */
 function assertTrusted(req, ctx) {
     const origin = req.headers.origin;
-    if (origin && !isDashboardOrigin(origin))
+    if (origin && !(0, exports.isDashboardOrigin)(req, origin))
         throw new ApiError(403, "Cross-origin requests are not allowed.");
     if (req.headers["sec-fetch-site"] === "cross-site")
         throw new ApiError(403, "Cross-site requests are not allowed.");
     const token = req.headers["x-locadot-token"];
-    if (typeof token !== "string" || !safeEqual(token, ctx.token)) {
+    if (typeof token !== "string" || !safeEqual(token, (0, request_1.peerOriginOf)(req) ? exports.PEER_TOKEN : ctx.token)) {
         throw new ApiError(403, "Missing or wrong X-Locadot-Token.", `Token file: ${constants_1.default.paths.API_TOKEN}`);
     }
 }

package/dist/dashboard/index.js

@@ -40,6 +40,7 @@ exports.handleDashboardRequest = handleDashboardRequest;
 const crypto_1 = __importDefault(require("crypto"));
 const page_1 = require("./page");
 const api_1 = require("./api");
+const request_1 = require("../proxy/request");
 const login_1 = require("./login");
 const ui_auth_1 = __importStar(require("../lib/ui-auth"));
 const system_1 = require("../lib/system");
@@ -141,7 +142,7 @@ function handleDashboardRequest(req, res, ctx) {
     }
     switch (url.pathname) {
         case "/":
-            sendBody(res, method, 200, "text/html; charset=utf-8", (0, page_1.renderPage)(nonce, ctx.token, ui_auth_1.default.enabled()));
+            sendBody(res, method, 200, "text/html; charset=utf-8", (0, page_1.renderPage)(nonce, (0, request_1.peerOriginOf)(req) ? api_1.PEER_TOKEN : ctx.token, ui_auth_1.default.enabled()));
             return;
         case "/favicon.ico":
             res.statusCode = 204;

package/dist/dashboard/login.js

@@ -39,9 +39,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.sessionCookie = exports.signedIn = void 0;
 exports.gate = gate;
 const crypto_1 = __importDefault(require("crypto"));
-const constants_1 = __importDefault(require("../constants"));
 const logger_1 = __importDefault(require("../utils/logger"));
 const escape_1 = require("./escape");
+const api_1 = require("./api");
 const ui_auth_1 = __importStar(require("../lib/ui-auth"));
 const MAX_LOGIN_BODY = 4096;
 const loginPage = (nonce, error) => `<!doctype html>
@@ -100,12 +100,7 @@ const sameOrigin = (req) => {
     const origin = req.headers.origin;
     if (!origin || origin === "null")
         return !origin;
-    try {
-        return constants_1.default.dashboardHosts.includes(new URL(origin).hostname.replace(/^\[|\]$/g, ""));
-    }
-    catch {
-        return false;
-    }
+    return (0, api_1.isDashboardOrigin)(req, origin);
 };
 const cookie = (req, value, maxAge) => `${ui_auth_1.SESSION_COOKIE}=${value}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${maxAge}${isTls(req) ? "; Secure" : ""}`;
 const sendLogin = (res, method, nonce, status, error) => {

package/dist/dashboard/page.js

@@ -1782,7 +1782,7 @@ const clientJs = `
     apiFetch("/api/remotes", { method: "POST", body: JSON.stringify({ string: value, name: name || undefined, domain: domain || undefined }) })
       .then(function (data) {
         var r = data.remote;
-        showToast("Connected to " + r.name, "success", r.domain && r.role === "admin" ? "Its localhost: " + localUrl(r.domain) : (domain && r.role !== "admin" ? "Domain ignored: you're " + r.role + ", not admin." : undefined));
+        showToast("Connected to " + r.name, "success", r.domain && r.role === "admin" ? "Its dashboard: " + localUrl(r.domain) : (domain && r.role !== "admin" ? "Domain ignored: you're " + r.role + ", not admin." : undefined));
         connectForm.reset();
         return Promise.all([loadRemotes(), loadHosts()]);
       })
@@ -1854,7 +1854,7 @@ const clientJs = `
       link.target = "_blank";
       link.rel = "noopener noreferrer";
       link.textContent = remote.domain + ".localhost";
-      link.title = "Any port: " + localUrl(remote.domain, "<port>");
+      link.title = "Its dashboard. Any port: " + localUrl(remote.domain, "<port>");
       row.appendChild(link);
       row.appendChild(makeCopyButton(function () { return localUrl(remote.domain); }));
       var change = document.createElement("button");
@@ -1880,7 +1880,7 @@ const clientJs = `
     apiFetch("/api/hub/localhost", { method: "PUT", body: JSON.stringify({ enabled: next }) })
       .then(function () {
         setSwitch(hubLocalhostSwitch, next);
-        showToast(next ? "Admins can open any port on this machine" : "Localhost access is off", "success");
+        showToast(next ? "Admins can open this dashboard and any port" : "Localhost access is off", "success");
       })
       .catch(function (err) { apiError(err, "Couldn't change localhost access"); })
       .then(function () { hubLocalhostSwitch.disabled = false; });
@@ -3309,10 +3309,10 @@ function renderPage(nonce, token, uiAuth = false) {
           </div>
           <div id="hub-localhost-row" class="toggle-row" hidden>
             <div>
-              <div class="label">Admins can open any port</div>
-              <div class="tile-sub">Admin peers reach this machine's localhost at <span class="mono">&lt;port&gt;.&lt;domain&gt;.localhost</span> on their side.</div>
+              <div class="label">Admins can open this dashboard and any port</div>
+              <div class="tile-sub">Admin peers get this dashboard at <span class="mono">&lt;domain&gt;.localhost</span> and this machine's localhost at <span class="mono">&lt;port&gt;.&lt;domain&gt;.localhost</span> on their side.</div>
             </div>
-            <button type="button" id="hub-localhost" class="switch" role="switch" aria-checked="true" aria-label="Let admins open any port on this machine"><span class="switch-knob"></span></button>
+            <button type="button" id="hub-localhost" class="switch" role="switch" aria-checked="true" aria-label="Let admins open this dashboard and any port on this machine"><span class="switch-knob"></span></button>
           </div>
         </div>
 
@@ -3361,7 +3361,7 @@ function renderPage(nonce, token, uiAuth = false) {
             <div class="role-table">
               <div><strong>Viewer</strong><span>browse the hosts you pick</span></div>
               <div><strong>Editor</strong><span>also add and change hosts here</span></div>
-              <div><strong>Admin</strong><span>also delete hosts, change sharing, and open any port on this machine</span></div>
+              <div><strong>Admin</strong><span>also delete hosts, change sharing, and open this dashboard and any port on this machine</span></div>
             </div>
             <p class="dim">Editors can reach anything this machine can. Change or revoke a role any time under Peers.</p>
           </div>

package/dist/lib/remotes.js

@@ -91,6 +91,8 @@ const isDomainLabel = (value) => {
 exports.isDomainLabel = isDomainLabel;
 /** Sender allows the peer onto its localhost, treating an older sender (no `localhost` field) as "yes" when admin. */
 const localhostAllowed = (data, role) => typeof data.localhost === "boolean" ? data.localhost : role === "admin";
+/** A shared --cors mapping is --cors here too; the sender still does the CORS work (see router forwardRemote). */
+const inherited = (h) => (h.cors ? { cors: true } : {});
 /** Domains already spoken for: other remotes' `domain`, and any single-label `*.localhost` registry host. */
 const takenDomains = (excludeName) => {
     const store = readFile();
@@ -212,7 +214,7 @@ class Remotes {
                     continue;
                 }
                 taken.add(local);
-                registry.hosts[local] = { target: remote.url, remote: { name, host: h.host }, createdAt: now, updatedAt: now };
+                registry.hosts[local] = { target: remote.url, remote: { name, host: h.host }, ...inherited(h), createdAt: now, updatedAt: now };
                 mapped.push({ local, host: h.host });
             }
         });
@@ -244,9 +246,14 @@ class Remotes {
         const now = new Date().toISOString();
         await registry_1.default.mutate((registry) => {
             const already = new Set();
-            for (const entry of Object.values(registry.hosts)) {
-                if (entry.remote?.name === name)
-                    already.add(entry.remote.host);
+            const flags = new Map(hosts.map((h) => [h.host, h]));
+            for (const [local, entry] of Object.entries(registry.hosts)) {
+                if (entry.remote?.name !== name)
+                    continue;
+                already.add(entry.remote.host);
+                const h = flags.get(entry.remote.host);
+                if (h && Boolean(h.cors) !== Boolean(entry.cors))
+                    registry.hosts[local] = { ...entry, cors: h.cors || undefined };
             }
             const taken = new Set(Object.keys(registry.hosts));
             for (const h of hosts) {
@@ -256,7 +263,7 @@ class Remotes {
                 if (!local)
                     continue;
                 taken.add(local);
-                registry.hosts[local] = { target: updated.url, remote: { name, host: h.host }, createdAt: now, updatedAt: now };
+                registry.hosts[local] = { target: updated.url, remote: { name, host: h.host }, ...inherited(h), createdAt: now, updatedAt: now };
             }
         });
         const registry = registry_1.default.read();
@@ -270,13 +277,14 @@ class Remotes {
         const local = localhost_1.default.requireHost(localHost);
         const hostsRes = await call(`${apiBase(remote.url)}/hosts`, { token: remote.token });
         const hosts = hostsRes.hosts;
-        if (!hosts.some((h) => h.host === remoteHost))
+        const shared = hosts.find((h) => h.host === remoteHost);
+        if (!shared)
             throw new hosts_1.NotFoundError(`"${remoteHost}" is not available on "${name}".`);
         const now = new Date().toISOString();
         await registry_1.default.mutate((registry) => {
             if (registry.hosts[local])
                 throw new hosts_1.ConflictError(`❌ ${local} is already mapped to ${registry.hosts[local].target}.`);
-            registry.hosts[local] = { target: remote.url, remote: { name, host: remoteHost }, createdAt: now, updatedAt: now };
+            registry.hosts[local] = { target: remote.url, remote: { name, host: remoteHost }, ...inherited(shared), createdAt: now, updatedAt: now };
         });
     }
     static setUrl(name, url) {
@@ -329,7 +337,7 @@ class Remotes {
             const taken = new Set(Object.keys(registry.hosts));
             const local = Remotes.localName(name, created.host, taken);
             if (local)
-                registry.hosts[local] = { target: remote.url, remote: { name, host: created.host }, createdAt: now, updatedAt: now };
+                registry.hosts[local] = { target: remote.url, remote: { name, host: created.host }, ...inherited(created), createdAt: now, updatedAt: now };
         });
         return created;
     }
@@ -340,7 +348,14 @@ class Remotes {
             token: remote.token,
             body: input,
         });
-        return data.host;
+        const updated = data.host;
+        await registry_1.default.mutate((registry) => {
+            for (const [local, entry] of Object.entries(registry.hosts)) {
+                if (entry.remote?.name === name && entry.remote.host === host)
+                    registry.hosts[local] = { ...entry, cors: updated.cors || undefined };
+            }
+        });
+        return updated;
     }
     static async removeHost(name, host) {
         const remote = Remotes.mustGet(name);

package/dist/proxy/cors.js

@@ -24,12 +24,16 @@ exports.preflightHeaders = preflightHeaders;
 /**
  * --cors: the upstream should see a request from a site it trusts, so origin/CSRF checks pass.
  * A page on another mapped domain (signalsant.localhost calling api.signalsant.localhost) is
- * sent as that domain's real origin; anything else as the target's own origin.
+ * sent as that domain's real origin; anything else as the target's own origin. A peer's page is on the
+ * receiver's name for one of our domains, so it is matched by those names, never by our own.
  */
 const sameOriginHeaders = (req, entry, lookup) => {
+    const names = (0, request_1.peerNamesOf)(req);
+    const callerHost = (url) => names ? Object.keys(names).find((host) => new URL(names[host]).host === url.host) : url.hostname;
     const upstreamOrigin = (value) => {
         try {
-            const caller = lookup(new URL(value).hostname);
+            const host = callerHost(new URL(value));
+            const caller = host ? lookup(host) : undefined;
             if (caller)
                 return new URL(caller.target).origin;
         }

package/dist/proxy/hub.js

@@ -45,7 +45,7 @@ const logger_1 = __importDefault(require("../utils/logger"));
 const links_1 = __importStar(require("../lib/links"));
 const hosts_1 = __importStar(require("../lib/hosts"));
 const hub_config_1 = __importDefault(require("../lib/hub-config"));
-const localhost_1 = require("../lib/localhost");
+const localhost_1 = __importStar(require("../lib/localhost"));
 const registry_1 = require("../lib/registry");
 const request_1 = require("./request");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -80,6 +80,51 @@ const clientIp = (req) => {
     const value = Array.isArray(header) ? header[0] : header;
     return value || req.socket.remoteAddress || "unknown";
 };
+/** `X-Original-Host` from the receiver, only if it is a `*.localhost` name with an optional port. */
+const receiverHost = (req) => {
+    const header = req.headers["x-original-host"];
+    const raw = typeof header === "string" ? header.trim().toLowerCase() : "";
+    const match = /^([^:]+)(?::(\d{1,5}))?$/.exec(raw);
+    return match && localhost_1.default.isValidLocalhostDomain(match[1]) ? raw : undefined;
+};
+const MAX_NAMES = 16 * 1024;
+/**
+ * `X-Locadot-Names` from the receiver: `<our host>=<its URL for it>,…`. Kept only for hosts this peer can see and
+ * `http(s)://*.localhost[:port]` URLs; they only ever end up in responses to that same peer.
+ */
+const peerNames = (req, visible) => {
+    const header = req.headers["x-locadot-names"];
+    if (typeof header !== "string" || header.length > MAX_NAMES)
+        return undefined;
+    const names = {};
+    for (const pair of header.split(",")) {
+        const [host, url] = pair.trim().toLowerCase().split("=");
+        const match = url ? /^https?:\/\/([^/:]+)(?::(\d{1,5}))?$/.exec(url) : null;
+        if (host && match && visible.includes(host) && localhost_1.default.isValidLocalhostDomain(match[1]))
+            names[host] = url;
+    }
+    return names;
+};
+/** Sender side: a --cors mapping whose target is this machine's `port`, so port access gets its cors too. */
+const corsMappingFor = (hosts, port) => Object.keys(hosts).find((host) => {
+    const entry = hosts[host];
+    if (!entry.cors || entry.remote)
+        return false;
+    try {
+        const url = new URL(entry.target);
+        const own = Number(url.port || (url.protocol === "https:" ? 443 : 80));
+        return ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname) && own === port;
+    }
+    catch {
+        return false;
+    }
+});
+const ownHosts = (hosts, peer) => links_1.default.visibleHosts(peer, Object.keys(hosts)).filter((host) => !hosts[host].remote);
+const stripLocadotHeaders = (req) => {
+    for (const name of Object.keys(req.headers))
+        if (name.toLowerCase().startsWith("x-locadot-"))
+            delete req.headers[name];
+};
 const bearerToken = (req) => {
     const header = req.headers.authorization;
     const match = typeof header === "string" ? /^Bearer\s+(\S+)$/i.exec(header) : null;
@@ -103,11 +148,22 @@ function classify(req, publicHost, hosts, opts) {
         return { kind: "deny", status: 401, message: "Unauthorized" };
     }
     const portHeader = req.headers["x-locadot-port"];
-    if (portHeader !== undefined) {
+    const wantsDashboard = req.headers["x-locadot-dashboard"] !== undefined;
+    if (portHeader !== undefined || wantsDashboard) {
         if (!links_1.default.can(peer, "localhost"))
             return { kind: "deny", status: 403, message: "Forbidden" };
         if (opts?.localhost === false)
             return { kind: "deny", status: 403, message: "Localhost access is off on this machine." };
+        // The dashboard's page and API trust this origin in place of their own (see peerOriginOf).
+        if (wantsDashboard) {
+            const origin = receiverHost(req);
+            if (!origin)
+                return { kind: "deny", status: 400, message: "Bad request" };
+            // Keep X-Locadot-Token: the dashboard page sends it on every mutating call.
+            for (const name of ["x-locadot-peer", "x-locadot-dashboard", "x-locadot-host", "x-locadot-port", "x-locadot-names"])
+                delete req.headers[name];
+            return { kind: "dashboard", peer, origin };
+        }
         const raw = typeof portHeader === "string" ? portHeader.trim() : "";
         if (!/^[0-9]+$/.test(raw))
             return { kind: "deny", status: 400, message: "Bad request" };
@@ -116,10 +172,15 @@ function classify(req, publicHost, hosts, opts) {
             return { kind: "deny", status: 400, message: "Bad request" };
         if (opts?.blockedPorts?.includes(port))
             return { kind: "deny", status: 403, message: "Forbidden" };
-        for (const name of Object.keys(req.headers))
-            if (name.toLowerCase().startsWith("x-locadot-"))
-                delete req.headers[name];
-        return { kind: "local", port, peer };
+        const names = req.headers["x-locadot-names"] === undefined ? undefined : peerNames(req, ownHosts(hosts, peer));
+        const host = corsMappingFor(hosts, port);
+        // The page stays on <port>.<domain>.localhost rather than moving to the receiver's name for the mapping.
+        const self = receiverHost(req);
+        const scheme = names && Object.values(names)[0]?.split(":")[0];
+        if (host && names && self && scheme)
+            names[host] = `${scheme}://${self}`;
+        stripLocadotHeaders(req);
+        return { kind: "local", port, peer, names, host };
     }
     const hostHeader = req.headers["x-locadot-host"];
     const host = typeof hostHeader === "string" ? hostHeader.trim().toLowerCase() : "";
@@ -131,10 +192,9 @@ function classify(req, publicHost, hosts, opts) {
     if (!visible.includes(host)) {
         return { kind: "deny", status: 403, message: "Forbidden" };
     }
-    for (const name of Object.keys(req.headers))
-        if (name.toLowerCase().startsWith("x-locadot-"))
-            delete req.headers[name];
-    return { kind: "app", host, peer };
+    const names = req.headers["x-locadot-names"] === undefined ? undefined : peerNames(req, visible);
+    stripLocadotHeaders(req);
+    return { kind: "app", host, peer, names };
 }
 /* ---------- /_locadot/v1 API ---------- */
 const send = (res, status, body) => {

package/dist/proxy/remote.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.localOptions = exports.canReachLocalhost = exports.localFor = exports.remoteOptions = exports.remoteFor = void 0;
+exports.localOptions = exports.canReachLocalhost = exports.localFor = exports.LANDING_PATH = exports.remoteOptions = exports.remoteFor = void 0;
 const fs_1 = __importDefault(require("fs"));
 const constants_1 = __importDefault(require("../constants"));
 const request_1 = require("./request");
@@ -32,7 +32,7 @@ const remotes = () => {
 };
 const remoteFor = (name) => remotes()[name];
 exports.remoteFor = remoteFor;
-const remoteOptions = (req, entry, remote) => ({
+const remoteOptions = (req, entry, remote, names) => ({
     target: remote.url,
     changeOrigin: true,
     // Don't leak the receiver's LAN addresses to the sender.
@@ -47,9 +47,12 @@ const remoteOptions = (req, entry, remote) => ({
         "X-Original-Host": req.headers.host || "",
         "X-Locadot-Peer": remote.token,
         "X-Locadot-Host": entry.remote.host,
+        ...(names ? { "X-Locadot-Names": names } : {}),
     },
 });
 exports.remoteOptions = remoteOptions;
+/** Receiver side: the port picker and shared-host list, on `<domain>.localhost` itself (the rest of it is the dashboard). */
+exports.LANDING_PATH = "/_locadot/ports";
 /** Receiver side: `<domain>.localhost` / `<port>.<domain>.localhost` → the admin remote that owns `domain`. */
 const localFor = (host) => {
     if (!host.endsWith(".localhost"))
@@ -72,7 +75,8 @@ const localFor = (host) => {
 exports.localFor = localFor;
 const canReachLocalhost = (remote) => remote.role === "admin" && remote.localhost !== false;
 exports.canReachLocalhost = canReachLocalhost;
-const localOptions = (req, remote, port) => ({
+/** Without a port the sender serves its dashboard. */
+const localOptions = (req, remote, port, names) => ({
     target: remote.url,
     changeOrigin: true,
     xfwd: false,
@@ -85,7 +89,7 @@ const localOptions = (req, remote, port) => ({
     headers: {
         "X-Original-Host": req.headers.host || "",
         "X-Locadot-Peer": remote.token,
-        "X-Locadot-Port": String(port),
+        ...(port ? { "X-Locadot-Port": String(port), ...(names ? { "X-Locadot-Names": names } : {}) } : { "X-Locadot-Dashboard": "1" }),
     },
 });
 exports.localOptions = localOptions;

package/dist/proxy/request.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTls = exports.viaOf = exports.fromRemote = exports.fromTunnel = exports.mappedHost = exports.hostOf = exports.tag = void 0;
+exports.isTls = exports.viaOf = exports.peerNamesOf = exports.peerOriginOf = exports.fromRemote = exports.fromTunnel = exports.mappedHost = exports.hostOf = exports.tag = void 0;
 const tags = new WeakMap();
 const tag = (req, values) => {
     tags.set(req, { ...tags.get(req), ...values });
@@ -21,6 +21,10 @@ const fromTunnel = (req) => Boolean(tags.get(req)?.tunnel);
 exports.fromTunnel = fromTunnel;
 const fromRemote = (req) => Boolean(tags.get(req)?.remote);
 exports.fromRemote = fromRemote;
+const peerOriginOf = (req) => tags.get(req)?.peerOrigin;
+exports.peerOriginOf = peerOriginOf;
+const peerNamesOf = (req) => tags.get(req)?.peerNames;
+exports.peerNamesOf = peerNamesOf;
 const viaOf = (req) => tags.get(req)?.via;
 exports.viaOf = viaOf;
 /** Tunnel visitors are on https even though cloudflared talks plain http to us. */

package/dist/proxy/response.js

@@ -23,7 +23,8 @@ const handleProxyResponse = (proxyRes, req, res, hosts, publicUrl = () => undefi
         return;
     stripHopByHop(proxyRes.headers);
     const entry = hosts[(0, request_1.mappedHost)(req)];
-    if (!entry?.cors)
+    // A remote mapping's cors flag is inherited: the sender already applied it.
+    if (!entry?.cors || entry.remote)
         return;
     (0, cors_1.applyCors)(req, proxyRes.headers);
     const via = (0, request_1.viaOf)(req);

package/dist/proxy/rewrite.js

@@ -25,9 +25,11 @@ const originMap = (req, hosts, publicUrl = () => undefined) => {
     const tls = (0, request_1.isTls)(req);
     const self = (0, request_1.mappedHost)(req);
     const tunnel = (0, request_1.fromTunnel)(req);
+    // A peer's browser knows our hosts by its own names; older receivers don't send them.
+    const peer = (0, request_1.peerNamesOf)(req);
     const pairs = [];
     for (const [host, entry] of Object.entries(hosts)) {
-        const local = tunnel ? publicUrl(host) : (0, urls_1.urlFor)(host, tls);
+        const local = tunnel ? publicUrl(host) : peer ? peer[host] : (0, urls_1.urlFor)(host, tls);
         if (!local)
             continue;
         try {

package/dist/proxy/router.js

@@ -20,12 +20,17 @@ const stats_1 = require("./stats");
 /** Resolves a tunnel's public host to its mapping and tags the request, before any routing. */
 const resolveHost = (req, ctx, hub) => {
     if (hub?.kind === "app") {
-        (0, request_1.tag)(req, { host: hub.host, remote: true, secure: ctx.hub.secure() });
+        (0, request_1.tag)(req, { host: hub.host, remote: true, secure: ctx.hub.secure(), peerNames: hub.names });
         return hub.host;
     }
+    if (hub?.kind === "dashboard") {
+        (0, request_1.tag)(req, { host: "localhost", remote: true, secure: ctx.hub.secure(), peerOrigin: hub.origin });
+        return "localhost";
+    }
     if (hub?.kind === "local") {
-        const host = `localhost:${hub.port}`;
-        (0, request_1.tag)(req, { host, remote: true, secure: ctx.hub.secure() });
+        // A port behind a --cors mapping is served as that mapping, cors included.
+        const host = hub.host ?? `localhost:${hub.port}`;
+        (0, request_1.tag)(req, { host, remote: true, secure: ctx.hub.secure(), peerNames: hub.names });
         return host;
     }
     const host = (0, request_1.hostOf)(req);
@@ -38,6 +43,16 @@ const dashboardUrl = (req) => `${(0, urls_1.urlFor)("localhost", (0, request_1.i
 const passThrough = (req, entry) => Boolean(entry.cors);
 /** Same-origin only, and a tunnel visitor may only reach public hosts (see guard.ts). */
 const viaAllowed = (req, via) => (0, passthrough_1.isSameOrigin)(req) && (!(0, request_1.fromTunnel)(req) || (0, guard_1.isPublicHost)(via.host));
+/**
+ * Receiver side: `<sender host>=<our URL for it>` for every mapping of this remote, so a --cors sender rewrites
+ * its apps' origins to the names this machine uses rather than its own.
+ */
+const peerNames = (req, ctx, name) => (ctx.remoteHosts?.(name) || [])
+    .flatMap((local) => {
+    const host = ctx.lookup(local)?.remote?.host;
+    return host ? [`${host}=${(0, urls_1.urlFor)(local, (0, request_1.isTls)(req))}`] : [];
+})
+    .join(",");
 const reason = (err) => err?.code || err?.message;
 const remoteGone = (entry) => `the connection to ${entry.remote.name} was removed`;
 /** Sender side: an admin peer reaching one of this machine's ports. */
@@ -80,7 +95,7 @@ function handleRequest(req, res, ctx) {
             ctx.dashboard(req, res);
             return;
         }
-        const entry = hub?.kind === "local" ? localEntry(hub.port) : ctx.lookup(host);
+        const entry = hub?.kind === "local" && !hub.host ? localEntry(hub.port) : ctx.lookup(host);
         if (!entry) {
             const local = localTarget(req, ctx, host, hub);
             if (local) {
@@ -151,7 +166,7 @@ function forwardRemote(req, res, ctx, host, entry) {
     }
     const started = Date.now();
     res.once("finish", () => (0, stats_1.record)(ctx.stats, host, res.statusCode, Date.now() - started, res.statusCode >= 500));
-    ctx.proxy.web(req, res, (0, remote_1.remoteOptions)(req, entry, remote), (err) => {
+    ctx.proxy.web(req, res, (0, remote_1.remoteOptions)(req, entry, remote, peerNames(req, ctx, remote.name)), (err) => {
         logger_1.default.warn(`${host} → ${remote.name} (${remote.url}): ${reason(err)}`);
         if (res.headersSent) {
             res.destroy();
@@ -161,25 +176,30 @@ function forwardRemote(req, res, ctx, host, entry) {
         res.end((0, template_1.upstreamDown)(host, `${remote.name}: ${entry.remote.host}`, reason(err) || "error", dashboardUrl(req)));
     });
 }
-/** Receiver side: the sender checks the role again and proxies to its own localhost:<port>. */
+/**
+ * Receiver side: `<domain>.localhost` is the sender's dashboard and `<port>.<domain>.localhost` its localhost:<port>.
+ * The sender checks the role again on every request.
+ */
 function forwardLocal(req, res, ctx, host, local) {
     const { remote, domain, port } = local;
     const allowed = (0, remote_1.canReachLocalhost)(remote);
-    if (!port || !allowed) {
+    const landing = !port && (req.url || "/").split("?")[0] === remote_1.LANDING_PATH;
+    if (!allowed || landing) {
         const hosts = (ctx.remoteHosts?.(remote.name) || []).map((h) => ({ local: h, url: `${(0, urls_1.urlFor)(h, (0, request_1.isTls)(req))}/` }));
         const body = (0, template_1.remoteLocalhost)({ domain, name: remote.name, sender: remote.sender.hostname, allowed, hosts, portUrl: portUrl(req, domain), dashboardUrl: dashboardUrl(req) });
-        html(res, port ? 403 : 200, body);
+        html(res, port && !allowed ? 403 : 200, body);
         return;
     }
+    const label = `${remote.name}: ${port ? `localhost:${port}` : "dashboard"}`;
     const started = Date.now();
     res.once("finish", () => (0, stats_1.record)(ctx.stats, host, res.statusCode, Date.now() - started, res.statusCode >= 500));
-    ctx.proxy.web(req, res, (0, remote_1.localOptions)(req, remote, port), (err) => {
-        logger_1.default.warn(`${host} → ${remote.name} localhost:${port}: ${reason(err)}`);
+    ctx.proxy.web(req, res, (0, remote_1.localOptions)(req, remote, port, port ? peerNames(req, ctx, remote.name) : undefined), (err) => {
+        logger_1.default.warn(`${host} → ${label}: ${reason(err)}`);
         if (res.headersSent) {
             res.destroy();
             return;
         }
-        html(res, 502, (0, template_1.upstreamDown)(host, `${remote.name}: localhost:${port}`, reason(err) || "error", dashboardUrl(req)));
+        html(res, 502, (0, template_1.upstreamDown)(host, label, reason(err) || "error", dashboardUrl(req)));
     });
 }
 function handleUpgrade(req, socket, head, ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locadot",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.3",
   "description": "Secure your local development environment with HTTPS and custom domains like dev.localhost.",
   "homepage": "https://www.npmjs.com/package/locadot",
   "main": "dist/index.js",