buninu-browser 0.2.1 → 0.2.3

package/lib/renderer/canvas-2d.js

@@ -0,0 +1,92 @@
+/**
+ * Page `<canvas>` 2d contexts, drawn by this process's CanvasKit.
+ *
+ * `loadGraphics` calls `setCanvasKit` with the instance the page is rasterized
+ * with. A second CanvasKit cannot share images with that one, so a page canvas
+ * is `CanvasKit.MakeCanvas`, not a separate software bitmap.
+ *
+ * MakeCanvas has no width or height. Setting either on the element disposes
+ * that surface and opens another (HTML resets the bitmap and the drawing
+ * state). The object the page holds stays the same and forwards to whichever
+ * context is current.
+ *
+ * `getImageData` builds its array on `readPixels().buffer`, which can be the
+ * whole WASM heap. The copy handed back is only the requested rectangle.
+ */
+
+let CanvasKit = null;
+
+/** The CanvasKit `loadGraphics` instantiated. Page canvases share it. */
+export function setCanvasKit(kit) {
+  CanvasKit = kit;
+}
+
+const surfaces = new WeakMap();
+
+/** The element's 2d context, or null for any other context id or before CanvasKit loads. */
+export function canvasContext(node, type) {
+  if (type !== "2d" || !CanvasKit) return null;
+  let entry = surfaces.get(node);
+  if (!entry) {
+    entry = open(node);
+    if (!entry) return null;
+    surfaces.set(node, entry);
+  }
+  return entry.proxy;
+}
+
+/** Setting width or height clears the bitmap and the drawing state. */
+export function resetCanvas(node) {
+  surfaces.get(node)?.reopen();
+}
+
+// A zero bitmap makes MakeSurface fail and getImageData reject the rectangle.
+// The element can still report 0; drawing uses one pixel until it grows.
+function bitmapSize(node) {
+  return [Math.max(1, node.width >>> 0), Math.max(1, node.height >>> 0)];
+}
+
+function open(node) {
+  let surface = makeSurface(node);
+  if (!surface) return null;
+  let context = surface.getContext("2d");
+  const proxy = new Proxy(Object.create(null), {
+    get(_target, property) {
+      if (property === "getImageData") return (sx, sy, sw, sh) => copyImageData(context.getImageData(sx, sy, sw, sh));
+      const value = context[property];
+      return typeof value === "function" ? value.bind(context) : value;
+    },
+    set(_target, property, value) {
+      context[property] = value;
+      return true;
+    },
+    has(_target, property) {
+      return property in context;
+    },
+  });
+  return {
+    proxy,
+    reopen() {
+      const next = makeSurface(node);
+      if (!next) return;
+      const previous = surface;
+      surface = next;
+      context = surface.getContext("2d");
+      previous.dispose?.();
+    },
+  };
+}
+
+function makeSurface(node) {
+  const [width, height] = bitmapSize(node);
+  return CanvasKit.MakeCanvas(width, height);
+}
+
+function copyImageData(image) {
+  if (!image?.data) throw new DOMException("The source rectangle is empty.", "IndexSizeError");
+  const count = image.width * image.height * 4;
+  const data = new Uint8ClampedArray(count);
+  const source = new Uint8ClampedArray(image.data.buffer, image.data.byteOffset, Math.min(count, image.data.length));
+  data.set(source);
+  return { width: image.width, height: image.height, data, colorSpace: "srgb" };
+}

package/lib/renderer/compositor.js

@@ -23,6 +23,8 @@
  */
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { cropViewport, encodeImage } from "../paint/frame.js";
+import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
+import { VideoPresentation, compositeVideo } from "./video-presentation.js";
 
 const CHANNEL_FD = 3;
 const MAX_LINE_BYTES = 1024 * 1024;
@@ -32,6 +34,10 @@ let tile = null;
 let scrollEpoch = -1;
 let frameSerial = 0;
 let cached = { key: "", data: "" };
+const video = new VideoPresentation(wasmpeg, () => {
+  frameSerial++;
+  send({ type: "frame" });
+}, report => postMessage({ type: "video-report", ...report }));
 
 const channel = Bun.file(CHANNEL_FD).writer();
 
@@ -41,6 +47,9 @@ function send(message) {
 }
 
 self.onmessage = ({ data }) => {
+  if (data?.type === "video-open") { void video.open(data); return; }
+  if (data?.type === "video-stop") { video.stop(data.id); frameSerial++; return; }
+  if (data?.type === "video-bind") { video.bind(data.id, data.audioId, data.audioStart, data.time); return; }
   if (data?.type !== "frame") return;
   tile = data.tile;
   frameSerial++;
@@ -68,7 +77,8 @@ const methods = {
     if (!tile) return "";
     const key = `${frameSerial}:${viewport.x}:${viewport.y}:${format}:${quality}`;
     if (cached.key !== key) {
-      const { pixels, width, height } = cropViewport(tile, viewport.x, viewport.y, viewport.width, viewport.height);
+      const composited = tile.videoLayer?.id === video.config?.id ? compositeVideo(tile, video.frame) : tile;
+      const { pixels, width, height } = cropViewport(composited, viewport.x, viewport.y, viewport.width, viewport.height);
       const bytes = await encodeImage(pixels, width, height, { format, quality });
       cached = { key, data: Buffer.from(bytes).toString("base64") };
     }
@@ -93,6 +103,10 @@ async function handleLine(line) {
   } catch {
     return;
   }
+  if (request?.type === "audio-timing" && Number.isInteger(request.audioId)) {
+    video.timing(request.audioId, request.seconds);
+    return;
+  }
   if (!Number.isInteger(request?.id) || !Object.hasOwn(methods, request.method)) return;
   try {
     const params = Array.isArray(request.params) ? request.params : [];
@@ -120,4 +134,5 @@ async function handleLine(line) {
 // renderer installs seccomp, which forbids opening files.
 await encodeImage(new Uint8Array(4), 1, 1);
 await encodeImage(new Uint8Array(4), 1, 1, { format: "jpeg" });
+await wasmpeg.load();
 postMessage({ type: "ready" });

package/lib/renderer/custom-element-reactions.js

@@ -0,0 +1,18 @@
+/** Bridge attribute reactions from the host DOM into the page's realm.
+ * Capture the callback and observed names at registration, as browsers do.
+ */
+export function installAttributeReactions(Adapter, constructor, realm, callPage) {
+  const callback = constructor.prototype.attributeChangedCallback;
+  if (typeof callback !== "function") return;
+  const observed = constructor.observedAttributes;
+  Object.defineProperty(Adapter, "observedAttributes", {
+    value: observed === undefined ? [] : Array.from(observed, String),
+  });
+  Object.defineProperty(Adapter.prototype, "attributeChangedCallback", {
+    value(name, oldValue, newValue, namespace = null) {
+      callPage(callback, realm.wrap(this), [name, oldValue, newValue, namespace]);
+    },
+    configurable: true,
+    writable: true,
+  });
+}

package/lib/renderer/history.js

@@ -0,0 +1,42 @@
+// Methods borrowed from another window's History.prototype must operate on
+// their receiver, not the window in which the function was created.
+const histories = new WeakMap();
+
+export function historyBinding(location, setHref) {
+  const state = { location, setHref, value: null, length: 1 };
+  const receiver = (object) => {
+    const record = histories.get(object);
+    if (!record) throw new TypeError("Illegal invocation");
+    return record;
+  };
+  const change = (object, data, url, push) => {
+    const record = receiver(object);
+    if (url !== undefined && url !== null) {
+      const target = new URL(String(url), record.location.href);
+      if (target.origin !== new URL(record.location.href).origin) {
+        throw new DOMException("History state URL must have the document's origin.", "SecurityError");
+      }
+      record.setHref(target.href);
+    }
+    record.value = data ?? null;
+    if (push) record.length++;
+  };
+  function History() { throw new TypeError("Illegal constructor"); }
+  History.prototype = {
+    constructor: History,
+    get length() { return receiver(this).length; },
+    get state() { return receiver(this).value; },
+    scrollRestoration: "auto",
+    back() {},
+    forward() {},
+    go() {},
+    pushState(data, _title, url = undefined) { change(this, data, url, true); },
+    replaceState(data, _title, url = undefined) { change(this, data, url, false); },
+  };
+  const history = Object.create(History.prototype);
+  histories.set(history, state);
+  return { History, history, pushEntry(replace) {
+    state.value = null;
+    if (!replace) state.length++;
+  } };
+}

package/lib/renderer/host.js

@@ -14,7 +14,7 @@
  */
 import { closeSync } from "node:fs";
 import { PulseClient } from "../audio/pulse-client.js";
-import { logEnabled, pipeToLog, RENDERER_LOG_FLAG } from "../log.js";
+import { logEnabled, pipeToLog, RENDERER_LOG_FLAG, writeLog } from "../log.js";
 import { NetworkService } from "../network/network-service.js";
 import { COMPOSITOR_FLAG, FULL_STYLE_FLAG, VERIFY_STYLE_FLAG } from "./flags.js";
 
@@ -23,8 +23,10 @@ const FETCH_MODES = new Set(["cors", "no-cors", "same-origin"]);
 const CREDENTIALS_MODES = new Set(["omit", "same-origin", "include"]);
 const REDIRECT_MODES = new Set(["follow", "error", "manual"]);
 const MAX_REQUEST_HEADERS = 100;
-const RESOURCE_KINDS = new Set(["stylesheet", "image", "script", "metadata", "video", "audio"]);
+const RESOURCE_KINDS = new Set(["stylesheet", "image", "script", "metadata", "video", "audio", "iframe"]);
 const NAVIGATION_SCHEMES = new Set(["http:", "https:", "about:", "data:"]);
+// The largest form body a page may POST in a navigation.
+const MAX_POST_BYTES = 16 * 1024 * 1024;
 const MAX_RESOURCE_BYTES = 32 * 1024 * 1024;
 // Audio output: one PulseAudio native-protocol connection (jspulse or a
 // PulseAudio daemon on 127.0.0.1:4713) shared by every renderer, opened on
@@ -69,6 +71,8 @@ export class RendererHost {
   #sockets = new Map();
   // Audio streams: id -> { child, stream } (PulseAudio playback streams)
   #audio = new Map();
+  // In-flight page fetches, so AbortController reaches the actual HTTP request.
+  #pageFetches = new Map();
   #nextId = 1;
   #queue = Promise.resolve();
   #restarting = false;
@@ -86,7 +90,8 @@ export class RendererHost {
    *   args?: string[],
    *   timeout?: number,
    *   onRestart?: (call: (method: string, ...params: unknown[]) => Promise<unknown>) => Promise<void>,
-   *   onNavigate?: (url: string, downloadName: string | null, fragmentFrom: { x: number, y: number } | null) => void,
+   *   onNavigate?: (url: string, downloadName: string | null, fragmentFrom: { x: number, y: number } | null,
+   *     post: { method: "POST", body: Uint8Array, contentType: string, referrer: string } | null) => void,
    *   onDownload?: (payload: { url: string, name: string, data: Uint8Array }) => void,
    *   onFrame?: () => void,
    *   onLifecycle?: (name: "DOMContentLoaded" | "load", generation: number) => void,
@@ -149,6 +154,7 @@ export class RendererHost {
         this.#closeChannel(channel);
         this.#closeSockets(child);
         this.#closeAudio(child);
+        this.#closePageFetches(child);
         if (this.#child !== child) return;
         console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
         this.#child = null;
@@ -301,6 +307,7 @@ export class RendererHost {
     const child = this.#child;
     this.#closeSockets(child);
     this.#closeAudio(child);
+    this.#closePageFetches(child);
     this.#child = null;
     this.#ready = null;
     child?.kill();
@@ -360,6 +367,9 @@ export class RendererHost {
       this.#fetchForRenderer(child, message);
     } else if (message.type === "page-fetch" && Number.isInteger(message.id)) {
       this.#pageFetch(child, message);
+    } else if (message.type === "page-fetch-abort" && Number.isInteger(message.id)) {
+      const entry = this.#pageFetches.get(message.id);
+      if (entry?.child === child) entry.controller.abort();
     } else if (message.type === "ws-open" && Number.isInteger(message.id)) {
       this.#openSocket(child, message);
     } else if (message.type === "ws-send" && Number.isInteger(message.id)) {
@@ -391,11 +401,22 @@ export class RendererHost {
         this.#audio.delete(message.id);
         send({ event: "ended" });
       }, () => this.#audio.delete(message.id));
+    } else if (message.type === "audio-resync" && Number.isInteger(message.id)) {
+      const entry = this.#audio.get(message.id);
+      if (entry?.child === child) (entry.opened ?? Promise.resolve()).then(() => entry.stream?.resync()).catch(() => {});
     } else if (message.type === "audio-close" && Number.isInteger(message.id)) {
       const entry = this.#audio.get(message.id);
       if (entry?.child !== child) return;
       this.#audio.delete(message.id);
-      (entry.opened ?? Promise.resolve()).then(() => entry.stream?.close()).catch(() => {});
+      // Tell the renderer how much PCM reached the server: a server may
+      // still play what it holds, so the renderer resumes after it.
+      (entry.opened ?? Promise.resolve()).then(() => {
+        const sentBytes = entry.stream?.sentBytes ?? 0;
+        if (this.#child === child) child.send({ type: "audio-event", id: message.id, event: "closed", sentBytes });
+        return entry.stream?.close();
+      }).catch(() => {
+        if (this.#child === child) child.send({ type: "audio-event", id: message.id, event: "closed", sentBytes: 0 });
+      });
     } else if (message.type === "lifecycle" && LIFECYCLE_NAMES.has(message.name) && Number.isInteger(message.generation)) {
       this.#onLifecycle?.(message.name, message.generation);
     } else if (message.type === "cookie" && typeof message.value === "string" && message.value.length <= 4096) {
@@ -412,7 +433,16 @@ export class RendererHost {
         const download = typeof message.download === "string" ? message.download.slice(0, 200) : null;
         const from = message.fragmentFrom;
         const fragmentFrom = from && Number.isFinite(from.x) && Number.isFinite(from.y) ? { x: from.x, y: from.y } : null;
-        this.#onNavigate?.(target.href, download, fragmentFrom);
+        // A form POST: its body and type from the page; Origin and Referer
+        // from the document the renderer shows, which the page cannot choose.
+        const post = message.post;
+        const request = post && post.method === "POST" && post.body instanceof Uint8Array
+          && post.body.byteLength <= MAX_POST_BYTES && typeof post.contentType === "string" && post.contentType.length <= 200
+          && !/[\r\n]/.test(post.contentType) && ["http:", "https:"].includes(target.protocol)
+          ? { method: "POST", body: post.body, contentType: post.contentType, referrer: this.#documentUrl }
+          : null;
+        if (post && !request) return;
+        this.#onNavigate?.(target.href, download, fragmentFrom, request);
       }
     } else if (message.type === "download-data" && typeof message.url === "string"
       && message.data instanceof Uint8Array && message.data.byteLength <= 64 * 1024 * 1024) {
@@ -459,7 +489,14 @@ export class RendererHost {
   /** A renderer's audio element starts playing: a PulseAudio stream relays its PCM. */
   #openAudio(child, { id, rate, channels, name }) {
     const send = (payload) => {
-      if (this.#child === child) child.send({ type: "audio-event", id, ...payload });
+      if (this.#child === child) {
+        child.send({ type: "audio-event", id, ...payload });
+        // The compositor's A/V clock must not wait behind page JavaScript.
+        if (payload.event === "timing" && this.#channel && !this.#channel.closed) {
+          this.#channel.writer.write(`${JSON.stringify({ type: "audio-timing", audioId: id, seconds: payload.seconds })}\n`);
+          this.#channel.writer.flush();
+        }
+      }
     };
     const owned = [...this.#audio.values()].filter((entry) => entry.child === child).length;
     if (this.#audio.has(id) || owned >= MAX_AUDIO_STREAMS
@@ -473,11 +510,14 @@ export class RendererHost {
         rate, channels, name: String(name ?? "audio").slice(0, 200),
         leadSeconds: name === "piano" ? 0.12 : undefined,
         onRequest: (bytes) => send({ event: "request", bytes }),
+        onTiming: name === "piano" ? null : (timing) => send({ event: "timing", ...timing }),
+        onTimingError: (error) => send({ event: "timing-error", message: String(error?.message ?? error) }),
       }))
       .then((stream) => {
         if (this.#audio.get(id) !== entry) return stream.close();
         entry.stream = stream;
         for (const data of entry.early.splice(0)) stream.write(data);
+        send({ event: "ready" });
       }, (error) => {
         this.#audio.delete(id);
         send({ event: "error", message: String(error?.message ?? error) });
@@ -493,6 +533,14 @@ export class RendererHost {
     }
   }
 
+  #closePageFetches(child) {
+    for (const [id, entry] of this.#pageFetches) {
+      if (entry.child !== child) continue;
+      this.#pageFetches.delete(id);
+      entry.controller.abort();
+    }
+  }
+
   #closeSockets(child) {
     for (const [id, entry] of this.#sockets) {
       if (entry.child !== child) continue;
@@ -516,15 +564,59 @@ export class RendererHost {
     if (!ALLOWED_SCHEMES.has(target.protocol) || !RESOURCE_KINDS.has(kind)) {
       return reply({ error: `blocked ${kind} request for ${target.protocol}` });
     }
+    // A renderer only ever holds documents of its own origin (site isolation
+    // is by origin): an iframe's document is given to it only when it is
+    // same-origin with the page, before and after redirects, and allows
+    // being framed.
+    const frame = kind === "iframe";
+    if (frame && !sameOrigin(target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
+    // Video and audio over http(s) stream. data: stays one response: it is
+    // already in hand, and the renderer wraps it in a finished pipe.
+    if ((kind === "video" || kind === "audio") && target.protocol !== "data:") {
+      const send = (payload) => {
+        if (this.#child === child) child.send(payload);
+      };
+      try {
+        await this.#network.streamSubresource(target.href, this.#documentUrl, kind, (event) => {
+          if (event.type === "head") {
+            send({
+              type: "fetch-result", id,
+              result: {
+                streaming: true,
+                ok: event.ok,
+                status: event.status,
+                statusText: event.statusText ?? "",
+                url: event.url || target.href,
+                contentType: event.contentType ?? "",
+                contentLength: event.contentLength ?? null,
+                documentCookie: this.#network.documentCookie(this.#documentUrl),
+              },
+            });
+          } else if (event.type === "chunk" && event.data instanceof Uint8Array) {
+            send({ type: "fetch-chunk", id, data: event.data });
+          } else if (event.type === "end") {
+            send({ type: "fetch-end", id });
+          } else if (event.type === "error") {
+            send({ type: "fetch-error", id, error: String(event.error ?? "media fetch failed") });
+          }
+        });
+      } catch (error) {
+        send({ type: "fetch-error", id, error: String(error?.message ?? error) });
+      }
+      return;
+    }
     try {
       const response = target.protocol === "data:"
         ? await dataResponse(target)
         : await this.#network.subresource(target.href, this.#documentUrl, kind);
       if (response.body.byteLength > MAX_RESOURCE_BYTES) return reply({ error: "resource too large" });
+      if (frame && !sameOrigin(response.url || target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
+      if (frame && framingDenied(response.rawHeaders ?? [])) return reply({ error: "framing denied" });
       reply({
         result: {
           ok: response.ok,
           status: response.status,
+          statusText: response.statusText ?? "",
           url: response.url || target.href,
           contentType: response.contentType,
           body: response.body,
@@ -541,17 +633,54 @@ export class RendererHost {
     const reply = (payload) => {
       if (this.#child === child) child.send({ type: "fetch-result", id, ...payload });
     };
+    const started = performance.now();
+    const controller = new AbortController();
+    const entry = { child, controller };
+    this.#pageFetches.set(id, entry);
+    let streamHead = false;
+    let sanitized = null;
     try {
-      const sanitized = sanitizePageRequest(request);
-      const response = await this.#network.pageFetch(sanitized, this.#documentUrl);
+      sanitized = sanitizePageRequest(request);
+      const response = await this.#network.pageFetch(sanitized, this.#documentUrl, {
+        signal: controller.signal,
+        onChunk: (event) => {
+          if (this.#child !== child) return;
+          if (event.type === "head") {
+            streamHead = true;
+            child.send({ type: "page-fetch-head", id, result: {
+              ...event.result, documentCookie: this.#network.documentCookie(this.#documentUrl),
+            } });
+          }
+          else if (event.type === "chunk") child.send({ type: "page-fetch-chunk", id, data: event.data });
+          else if (event.type === "end") child.send({ type: "page-fetch-end", id });
+        },
+      });
+      if (response.streaming) {
+        logFetch(sanitized, `${response.status} streaming`, started);
+        return;
+      }
       const { rawHeaders, ...result } = response;
+      logFetch(sanitized, `${response.status} ${response.body?.byteLength ?? 0}B`, started);
       reply({ result: { ...result, documentCookie: this.#network.documentCookie(this.#documentUrl) } });
     } catch (error) {
-      reply({ error: String(error?.message ?? error) });
+      logFetch(sanitized ?? request, `failed: ${error?.message ?? error}`, started);
+      if (streamHead && this.#child === child) {
+        child.send({ type: "page-fetch-error", id, error: String(error?.message ?? error) });
+      } else reply({ error: String(error?.message ?? error) });
+    } finally {
+      if (this.#pageFetches.get(id) === entry) this.#pageFetches.delete(id);
     }
   }
 }
 
+/** With BUNINU_LOG, one line per page fetch()/XMLHttpRequest: method, URL (shortened), outcome, time. */
+function logFetch(request, outcome, started) {
+  if (!logEnabled()) return;
+  const url = String(request?.url ?? "");
+  const shown = url.length > 160 ? `${url.slice(0, 160)}…` : url;
+  writeLog("fetch", `${request?.method ?? "GET"} ${shown} -> ${outcome} in ${Math.round(performance.now() - started)}ms`);
+}
+
 /** Keeps only the expected shape of a renderer's (untrusted) sandbox report. */
 function sanitizeSandboxReport(report) {
   const layer = (value) => ({
@@ -602,3 +731,31 @@ function sanitizeCompositorResult(method, result) {
   const y = Number(result?.y);
   return { x: Number.isFinite(x) ? x : 0, y: Number.isFinite(y) ? y : 0 };
 }
+
+function sameOrigin(left, right) {
+  try {
+    const a = new URL(left);
+    const b = new URL(right);
+    return ["http:", "https:"].includes(a.protocol) && a.origin === b.origin;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Whether a response refuses to be framed (by its own origin, the only case
+ * here): X-Frame-Options: DENY, or Content-Security-Policy frame-ancestors 'none'.
+ */
+function framingDenied(rawHeaders) {
+  for (const [name, value] of rawHeaders) {
+    const header = String(name).toLowerCase();
+    if (header === "x-frame-options" && String(value).trim().toLowerCase() === "deny") return true;
+    if (header === "content-security-policy") {
+      for (const directive of String(value).split(";")) {
+        const [directiveName, ...sources] = directive.trim().toLowerCase().split(/\s+/);
+        if (directiveName === "frame-ancestors" && sources.length === 1 && sources[0] === "'none'") return true;
+      }
+    }
+  }
+  return false;
+}

package/lib/renderer/image-loading.js

@@ -0,0 +1,27 @@
+// Image bytes are decoded by our renderer, not Happy DOM's disabled loader.
+// Share their state with HTMLImageElement's page-facing IDL attributes.
+const states = new WeakMap();
+
+export function beginImageLoad(element, src) {
+  states.set(element, { src, complete: false, width: 0, height: 0 });
+}
+
+export function finishImageLoad(element, src, resource, dispatch = () => {}) {
+  if (element.getAttribute('src') !== src) return;
+  states.set(element, { src, complete: true, width: resource?.width ?? 0, height: resource?.height ?? 0 });
+  dispatch(resource ? 'load' : 'error');
+}
+
+export function installImageLoadingAttributes(prototype, nodeOf) {
+  for (const [property, field] of [['naturalWidth', 'width'], ['naturalHeight', 'height'], ['complete', 'complete']]) {
+    Object.defineProperty(prototype, property, {
+      configurable: true, enumerable: true,
+      get() {
+        const node = nodeOf(this), src = node.getAttribute('src');
+        const state = states.get(node);
+        if (state && state.src === src) return state[field];
+        return field === 'complete' ? !src : 0;
+      },
+    });
+  }
+}