handmux 0.22.0 → 0.22.1

package/public/index.html

@@ -48,8 +48,8 @@
       @keyframes bootDot { 0%,100% { opacity: .22; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
       @media (prefers-reduced-motion: reduce) { .boot-glow, .boot-dots i { animation: none; opacity: .8; } }
     </style>
-    <script type="module" crossorigin src="/assets/index-CzlitgRX.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CRAlQZDz.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" crossorigin href="/assets/index-CRAlQZDz.css"></noscript>
+    <script type="module" crossorigin src="/assets/index-ClOByNCn.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-rjrtUwoJ.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" crossorigin href="/assets/index-rjrtUwoJ.css"></noscript>
   </head>
   <body>
     <div id="boot-splash" aria-hidden="true">

package/src/browser/manager.js

@@ -11,6 +11,12 @@ import {
   hammerheadRebindHeaders,
   installHammerheadRebindLocationCompat,
 } from './hammerheadRedirectCompat.js';
+import {
+  applySiteVersionHeaders,
+  normalizeSiteVersion,
+  siteVersionIdentity,
+  siteVersionNavigatorScript,
+} from './siteVersion.js';
 
 const defaultHammerhead = importedHammerhead.default || importedHammerhead;
 const POOL_IDLE_CLOSE_MS = 1_000;
@@ -32,9 +38,10 @@ function isLoopbackUrl(raw) {
   return hostname === 'localhost' || classifyIp(hostname) === 'loopback';
 }
 
-function bridgeScript(channel) {
+function bridgeScript(channel, identity) {
   const encoded = JSON.stringify(channel);
-  return `(() => {
+  return `${siteVersionNavigatorScript(identity)}
+  (() => {
     const channel = ${encoded};
     const hammerhead = window['%hammerhead%'];
     const destinationUrl = (url) => {
@@ -92,7 +99,7 @@ function bridgeScript(channel) {
 
 function browserSessionClass(hammerhead) {
   return class BrowserSession extends hammerhead.Session {
-    constructor(channel) {
+    constructor(channel, identity) {
       super([], {
         disablePageCaching: true,
         allowMultipleWindows: true,
@@ -101,10 +108,11 @@ function browserSessionClass(hammerhead) {
         nativeAutomation: false,
       });
       this.channel = channel;
+      this.identity = identity;
     }
 
-    async getPayloadScript() { return bridgeScript(this.channel); }
-    async getIframePayloadScript() { return ''; }
+    async getPayloadScript() { return bridgeScript(this.channel, this.identity); }
+    async getIframePayloadScript() { return siteVersionNavigatorScript(this.identity); }
     getAuthCredentials() { return null; }
     handleAttachment() {}
     handleFileDownload() {}
@@ -148,6 +156,7 @@ function publicLease(lease) {
     url: lease.url,
     originalUrl: lease.originalUrl,
     channel: lease.channel,
+    siteVersion: lease.siteVersion,
   };
 }
 
@@ -305,7 +314,9 @@ export async function createBrowserPreviewManager({
     if (lease.timer != null) clearTimer(lease.timer);
     lease.timer = setTimer(() => release(lease), leaseTtlMs);
   };
-  const createLease = async ({ tabId, deviceId, url, origin, channel }) => {
+  const createLease = async ({
+    tabId, deviceId, url, origin, channel, siteVersion, sourceUserAgent,
+  }) => {
     if (closing) throw new Error('browser manager closing');
     const target = normalizedTarget(url);
     const publicOrigin = normalizedOrigin(origin);
@@ -316,7 +327,8 @@ export async function createBrowserPreviewManager({
     let detachCookies = null;
     try {
       if (closing) throw new Error('browser manager closing');
-      session = new SessionClass(channel);
+      const identity = siteVersionIdentity(siteVersion, sourceUserAgent);
+      session = new SessionClass(channel, identity);
       session.id = `_browser-${randomId()}-${encodeURIComponent(tabId)}`;
       const policy = targetPolicyFactory({ topLevelUrl: target, handmuxOrigin });
       const hooks = session.requestHookEventProvider || session;
@@ -325,6 +337,7 @@ export async function createBrowserPreviewManager({
           if (await rehomeNavigation(event, session)) return;
           const result = await policy.check(event._requestInfo.url);
           if (result.allowed) {
+            applySiteVersionHeaders(event.requestOptions?.headers, identity);
             if (result.addresses?.length && event.requestOptions) {
               const approved = result.addresses.map(({ address, family }) => ({ address, family }));
               event.requestOptions.autoSelectFamily = true;
@@ -352,6 +365,8 @@ export async function createBrowserPreviewManager({
         url: publicUrl,
         publicOrigin,
         channel,
+        siteVersion,
+        sourceUserAgent,
         pool,
         session,
         policy,
@@ -367,14 +382,21 @@ export async function createBrowserPreviewManager({
     }
   };
 
-  const putImpl = async ({ tabId, deviceId, url, origin }, requireExisting = false) => {
+  const putImpl = async ({
+    tabId, deviceId, url, origin, siteVersion, sourceUserAgent,
+  }, requireExisting = false) => {
     if (!deviceId || !tabId) throw new Error('browser lease identity required');
     const key = leaseKey(deviceId, tabId);
     const existing = leases.get(key);
     if (requireExisting && !existing) return null;
     const target = normalizedTarget(url);
     const publicOrigin = normalizedOrigin(origin);
-    if (existing && existing.originalUrl === target && existing.publicOrigin === publicOrigin) {
+    const requestedVersion = normalizeSiteVersion(siteVersion);
+    if (!requestedVersion) throw new Error('invalid browser site version');
+    if (existing
+      && existing.originalUrl === target
+      && existing.publicOrigin === publicOrigin
+      && existing.siteVersion === requestedVersion) {
       touch(existing);
       return publicLease(existing);
     }
@@ -384,6 +406,8 @@ export async function createBrowserPreviewManager({
       url: target,
       origin: publicOrigin,
       channel: existing?.channel || randomChannel(),
+      siteVersion: requestedVersion,
+      sourceUserAgent,
     });
     leases.set(key, next);
     touch(next);
@@ -438,6 +462,8 @@ export async function createBrowserPreviewManager({
         url: target,
         origin,
         channel: current.channel,
+        siteVersion: current.siteVersion,
+        sourceUserAgent: current.sourceUserAgent,
       });
       try {
         const bootstrapUrl = browserBootstrap.issue({
@@ -471,8 +497,8 @@ export async function createBrowserPreviewManager({
 
   return {
     putLease: (options) => put(options),
-    navigateLease(tabId, url, deviceId, origin) {
-      return put({ tabId, url, deviceId, origin }, true);
+    navigateLease(tabId, url, deviceId, origin, siteVersion, sourceUserAgent) {
+      return put({ tabId, url, deviceId, origin, siteVersion, sourceUserAgent }, true);
     },
     getLease(tabId, deviceId) {
       return publicLease(leases.get(leaseKey(deviceId, tabId)));

package/src/browser/publicProxy.js

@@ -13,6 +13,18 @@ const SERVICE_PATHS = new Set([
 ]);
 const DEVICE_COOKIE = 'tw_browser_device';
 
+function sessionChannel(pathname) {
+  const descriptor = String(pathname || '').split('/')[1] || '';
+  return descriptor.match(/\*([A-Za-z0-9_-]{1,128})$/)?.[1] || null;
+}
+
+function sessionUnavailableHtml(pathname) {
+  const channel = JSON.stringify(sessionChannel(pathname));
+  return `<!doctype html><meta charset="utf-8">
+<script>parent.postMessage({source:'handmux-browser',channel:${channel},type:'session-unavailable'},'*')</script>
+<pre>{"error":"browser session unavailable"}</pre>`;
+}
+
 export function isBrowserServicePath(pathname) {
   return SERVICE_PATHS.has(String(pathname || '').split('?')[0]);
 }
@@ -65,6 +77,12 @@ function filteredCookie(raw) {
   return values.join('; ');
 }
 
+function expectsDocument(req) {
+  const destination = String(req.headers['sec-fetch-dest'] || '').toLowerCase();
+  const accept = String(req.headers.accept || '').toLowerCase();
+  return destination === 'document' || destination === 'iframe' || accept.includes('text/html');
+}
+
 function upstreamHeaders(headers, port, token) {
   const out = { ...headers, host: `127.0.0.1:${port}` };
   if (token && out.authorization === `Bearer ${token}`) delete out.authorization;
@@ -101,7 +119,11 @@ export function createBrowserPublicProxy({
     const deviceId = cookieValue(req.headers.cookie, DEVICE_COOKIE);
     const target = browserTarget(browser, req, deviceId);
     if (!target) {
-      if (claimedBrowserRequest(req)) return res.status(403).json({ error: 'browser session unavailable' });
+      if (claimedBrowserRequest(req)) {
+        res.setHeader('Cache-Control', 'no-store');
+        if (expectsDocument(req)) return res.status(403).type('html').send(sessionUnavailableHtml(pathname));
+        return res.status(403).json({ error: 'browser session unavailable' });
+      }
       return next();
     }
     const { port } = target;

package/src/browser/routes.js

@@ -1,6 +1,7 @@
 import express from 'express';
 import { browserLabelForOrigin } from './originLabel.js';
 import { browserRequestOrigin } from './publicProxy.js';
+import { normalizeSiteVersion } from './siteVersion.js';
 
 const RETENTION_DAYS = new Set([1, 7, 30, null]);
 const DEVICE_ID = /^[A-Za-z0-9_-]{32,128}$/;
@@ -71,6 +72,8 @@ export function browserRoutes({
     if (!TAB_ID.test(req.params.tabId)) return res.status(400).json({ error: 'bad browser tab id' });
     const url = normalizedTarget(req.body?.url);
     if (!url) return res.status(400).json({ error: 'browser URL must use http or https' });
+    const siteVersion = normalizeSiteVersion(req.body?.siteVersion);
+    if (!siteVersion) return res.status(400).json({ error: 'bad browser site version' });
     try {
       const origin = wildcardOrigin(publicBase, new URL(url).origin);
       const lease = await browser.putLease({
@@ -78,6 +81,8 @@ export function browserRoutes({
         url: req.body.url,
         origin,
         deviceId: req.browserDeviceId,
+        siteVersion,
+        sourceUserAgent: req.get('user-agent') || '',
       });
       return res.json(responseLease(lease, req.browserDeviceId));
     } catch (error) {
@@ -90,6 +95,8 @@ export function browserRoutes({
     if (!TAB_ID.test(req.params.tabId)) return res.status(400).json({ error: 'bad browser tab id' });
     const url = normalizedTarget(req.body?.url);
     if (!url) return res.status(400).json({ error: 'browser URL must use http or https' });
+    const siteVersion = normalizeSiteVersion(req.body?.siteVersion);
+    if (!siteVersion) return res.status(400).json({ error: 'bad browser site version' });
     try {
       const origin = wildcardOrigin(publicBase, new URL(url).origin);
       const lease = await browser.navigateLease(
@@ -97,6 +104,8 @@ export function browserRoutes({
         req.body.url,
         req.browserDeviceId,
         origin,
+        siteVersion,
+        req.get('user-agent') || '',
       );
       if (!lease) return res.status(404).json({ error: 'browser proxy lease not found' });
       return res.json(responseLease(lease, req.browserDeviceId));

package/src/browser/siteVersion.js

@@ -0,0 +1,124 @@
+export const DEFAULT_SITE_VERSION = 'mobile';
+export const SITE_VERSIONS = new Set(['mobile', 'desktop']);
+
+export function normalizeSiteVersion(value, fallback = DEFAULT_SITE_VERSION) {
+  if (value == null || value === '') return fallback;
+  return SITE_VERSIONS.has(value) ? value : null;
+}
+
+function versionFrom(ua, pattern, fallback = '120.0.0.0') {
+  return ua.match(pattern)?.[1] || fallback;
+}
+
+function identityPlatform(ua, mobile) {
+  if (/iPhone|iPad|iPod/i.test(ua)) return { navigator: 'iPhone', clientHint: 'iOS' };
+  if (/Android/i.test(ua)) return { navigator: 'Linux armv8l', clientHint: 'Android' };
+  if (/Windows/i.test(ua)) return { navigator: 'Win32', clientHint: 'Windows' };
+  if (/Macintosh|Mac OS X/i.test(ua)) return { navigator: 'MacIntel', clientHint: 'macOS' };
+  return mobile
+    ? { navigator: 'Linux armv8l', clientHint: 'Android' }
+    : { navigator: 'Linux x86_64', clientHint: 'Linux' };
+}
+
+function isMobileUserAgent(ua) {
+  return /Android|Mobile|iPhone|iPad|iPod/i.test(ua);
+}
+
+function transformedUserAgent(source, mobile) {
+  const ua = String(source || '');
+  if (ua && isMobileUserAgent(ua) === mobile) return ua;
+
+  const webkit = versionFrom(ua, /AppleWebKit\/([\d.]+)/i, '605.1.15');
+  const safari = versionFrom(ua, /Version\/([\d.]+)/i, '18.0');
+  if (/Safari\//i.test(ua) && !/(?:Chrome|CriOS|Chromium|Edg|OPR)\//i.test(ua)) {
+    return mobile
+      ? `Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/${webkit} (KHTML, like Gecko) Version/${safari} Mobile/15E148 Safari/${webkit}`
+      : `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/${webkit} (KHTML, like Gecko) Version/${safari} Safari/${webkit}`;
+  }
+
+  const firefox = ua.match(/Firefox\/([\d.]+)/i)?.[1];
+  if (firefox) {
+    return mobile
+      ? `Mozilla/5.0 (Android 10; Mobile; rv:${firefox}) Gecko/${firefox} Firefox/${firefox}`
+      : `Mozilla/5.0 (X11; Linux x86_64; rv:${firefox}) Gecko/20100101 Firefox/${firefox}`;
+  }
+
+  const chrome = versionFrom(ua, /(?:Chrome|CriOS|Chromium|Edg|OPR)\/([\d.]+)/i);
+  return mobile
+    ? `Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${chrome} Mobile Safari/537.36`
+    : `Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${chrome} Safari/537.36`;
+}
+
+export function siteVersionIdentity(siteVersion, sourceUserAgent = '') {
+  const version = normalizeSiteVersion(siteVersion);
+  if (!version) throw new Error('invalid browser site version');
+  const mobile = version === 'mobile';
+  const userAgent = transformedUserAgent(sourceUserAgent, mobile);
+  const platform = identityPlatform(userAgent, mobile);
+  return {
+    version,
+    mobile,
+    userAgent,
+    appVersion: userAgent.replace(/^Mozilla\//, ''),
+    platform: platform.navigator,
+    clientHintPlatform: platform.clientHint,
+    maxTouchPoints: mobile ? 5 : 0,
+  };
+}
+
+function headerKey(headers, name) {
+  const lower = name.toLowerCase();
+  return Object.keys(headers || {}).find((key) => key.toLowerCase() === lower) || lower;
+}
+
+function setHeader(headers, name, value) {
+  headers[headerKey(headers, name)] = value;
+}
+
+function deleteHeader(headers, name) {
+  const key = Object.keys(headers || {}).find((candidate) => candidate.toLowerCase() === name.toLowerCase());
+  if (key) delete headers[key];
+}
+
+export function applySiteVersionHeaders(headers, identity) {
+  if (!headers || !identity) return headers;
+  setHeader(headers, 'user-agent', identity.userAgent);
+  setHeader(headers, 'sec-ch-ua-mobile', identity.mobile ? '?1' : '?0');
+  setHeader(headers, 'sec-ch-ua-platform', `"${identity.clientHintPlatform}"`);
+  for (const name of [
+    'sec-ch-ua-platform-version', 'sec-ch-ua-arch', 'sec-ch-ua-bitness',
+    'sec-ch-ua-model', 'sec-ch-ua-wow64', 'sec-ch-ua-full-version',
+    'sec-ch-ua-full-version-list',
+  ]) deleteHeader(headers, name);
+  return headers;
+}
+
+export function siteVersionNavigatorScript(identity) {
+  const encoded = JSON.stringify(identity).replaceAll('<', '\\u003c');
+  return `(() => {
+    const profile = ${encoded};
+    const define = (name, value) => {
+      try { Object.defineProperty(navigator, name, { configurable: true, get: () => value }); }
+      catch { /* the native value remains available */ }
+    };
+    define('userAgent', profile.userAgent);
+    define('appVersion', profile.appVersion);
+    define('platform', profile.platform);
+    define('maxTouchPoints', profile.maxTouchPoints);
+    const nativeData = navigator.userAgentData;
+    if (nativeData) {
+      const data = {
+        brands: nativeData.brands || [],
+        mobile: profile.mobile,
+        platform: profile.clientHintPlatform,
+        toJSON() { return { brands: this.brands, mobile: this.mobile, platform: this.platform }; },
+        async getHighEntropyValues(hints) {
+          let values = {};
+          try { values = await nativeData.getHighEntropyValues.call(nativeData, hints); } catch { /* optional API */ }
+          return { ...values, mobile: profile.mobile, platform: profile.clientHintPlatform };
+        },
+      };
+      define('userAgentData', data);
+    }
+  })();`;
+}