roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/util/StatefulClass.ts

@@ -0,0 +1,31 @@
+import { createState, stateListen, type Stateful } from "dreamland/core";
+
+export class StatefulClass {
+	ownedby: Set<StatefulClass> = null!;
+	constructor() {
+		const state = createState(Object.create(new.target.prototype));
+		state.ownedby = new Set();
+		return state;
+	}
+
+	autodirty() {
+		let oldvalues: Map<any, any> = new Map();
+		stateListen(this as Stateful<this>, (newvalue, prop) => {
+			if (oldvalues.get(prop) === newvalue) return;
+			this.markDirty(false);
+			oldvalues.set(prop, newvalue);
+		});
+	}
+
+	own(obj: StatefulClass) {
+		obj.ownedby.add(this);
+	}
+
+	disown(obj: StatefulClass) {
+		obj.ownedby.delete(this);
+	}
+
+	markDirty(urgent: boolean = false) {
+		this.ownedby.forEach((obj) => obj.markDirty(urgent));
+	}
+}

package/source/packages/chrome/src/util/index.ts

@@ -0,0 +1,74 @@
+import { parse } from "tldts";
+
+export function formatBytes(bytes: number, decimals: number = 2): string {
+	if (bytes === 0) return "0 Bytes";
+
+	const k = 1024;
+	const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return (
+		parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + " " + sizes[i]
+	);
+}
+
+export function emToPx(
+	em: number | string,
+	element: HTMLElement = document.body
+): number {
+	const computedStyle = getComputedStyle(element);
+
+	// Handle CSS variable input like var(--some-variable)
+	if (typeof em === "string" && em.startsWith("var(") && em.endsWith(")")) {
+		// Extract the variable name from var(--name)
+		const varName = em.substring(4, em.length - 1);
+		// Get the computed value of the CSS variable
+		const varValue = computedStyle.getPropertyValue(varName).trim();
+
+		if (varValue) {
+			// If the value ends with 'em', parse it as em
+			if (varValue.endsWith("em")) {
+				em = parseFloat(varValue);
+			}
+			// If the value is in px, return it directly
+			else if (varValue.endsWith("px")) {
+				return parseFloat(varValue);
+			}
+			// For other units or invalid values, default to 0
+			else {
+				return 0;
+			}
+		} else {
+			return 0; // CSS variable not found
+		}
+	}
+
+	const fontSize = parseFloat(computedStyle.fontSize);
+	return (typeof em === "number" ? em : 0) * fontSize;
+}
+
+// subdomain, domain+tld+port, path+search+query
+export function splitUrl(url: URL): [string, string, string] {
+	let last = url.pathname + url.search + url.hash;
+	if (last == "/") last = "";
+
+	let results = parse(url.href);
+	let domain = results.domain || results.hostname;
+	if (domain && url.port) {
+		domain += ":" + url.port;
+	}
+	let subdomain = results.subdomain;
+	if (subdomain) {
+		subdomain += ".";
+	}
+
+	return [subdomain || "", domain || "", last];
+}
+
+export const isFirefox =
+	navigator.userAgent.includes("Gecko/") &&
+	!navigator.userAgent.includes("Chrome");
+
+export function uuid(prefix: string = ""): string {
+	return prefix + Math.random().toString(36).substring(2, 15);
+}

package/source/packages/chrome/src/util/memoize.ts

@@ -0,0 +1,13 @@
+export function memoize<T extends HTMLElement>(
+	fn: () => T,
+	key: any,
+	cache: Record<string, T>
+): T {
+	if (cache[key]) {
+		return cache[key];
+	}
+	const element = fn();
+	cache[key] = element;
+
+	return element;
+}

package/source/packages/chrome/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+/// <reference types="@mercuryworkshop/scramjet" />
+
+interface ImportMetaEnv {
+	readonly VITE_PUTER_BRANDING: boolean;
+	readonly VITE_SENTRY_URL: string;
+	readonly VITE_ISOLATION_ORIGIN: string;
+	readonly VITE_RUNTIME_BASE?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}
+
+declare const puter: any;
+declare const __COPYRIGHT_YEAR__: number;

package/source/packages/chrome/tsconfig.json

@@ -0,0 +1,30 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"types": [],
+		"skipLibCheck": true,
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": false,
+		"erasableSyntaxOnly": false,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true,
+		"jsx": "react-jsx",
+		"jsxImportSource": "dreamland",
+		"paths": {
+			"@components/*": ["./src/components/*"]
+		}
+	},
+	"include": ["src"],
+	"exclude": ["src/**/*.test.ts"]
+}

package/source/packages/chrome/vite.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "vite";
+import path from "path";
+
+import { viteSingleFile } from "vite-plugin-singlefile";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import { jsxPlugin } from "dreamland/vite";
+
+export default defineConfig({
+	base: process.env.VITE_BASE ?? "./",
+	plugins: [
+		process.env.VITE_SINGLEFILE ? viteSingleFile() : null,
+		// cssHmrPlugin(),
+		jsxPlugin(),
+		// ssr({ entry: "/src/main-server.ts" }),
+		// viteStaticCopy({
+		// 	structured: false,
+		// 	targets: [
+		// 		{
+		// 			src: scramjetPath + "/*",
+		// 			dest: "scram/",
+		// 		},
+		// 		{
+		// 			src: "../inject/dist/inject.js",
+		// 			dest: ".",
+		// 		},
+		// 		// {
+		// 		// 	src: "../chii/public/*",
+		// 		// 	dest: "chii",
+		// 		// },
+		// 	],
+		// }),
+	],
+	define: {
+		__COPYRIGHT_YEAR__: JSON.stringify(new Date().getFullYear()),
+	},
+	resolve: {
+		alias: {
+			"@components": path.resolve(__dirname, "./src/components"),
+		},
+	},
+	esbuild: {
+		keepNames: true,
+	},
+	build: {
+		sourcemap: process.env.VITE_SOURCEMAP !== "0",
+	},
+});

package/source/packages/inject/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "inject",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"type": "module",
+	"keywords": [],
+	"author": "",
+	"license": "AGPL-3.0-only",
+	"packageManager": "pnpm@10.12.1",
+	"dependencies": {
+		"@mercuryworkshop/scramjet": "workspace:*",
+		"@mercuryworkshop/rpc": "workspace:*",
+		"chobitsu": "workspace:*",
+		"html-to-image": "^1.11.13"
+	}
+}

package/source/packages/inject/src/context.ts

@@ -0,0 +1,194 @@
+import {
+	CookieJar,
+	iswindow,
+	SCRAMJETCLIENT,
+	ScramjetClient,
+	setWasm,
+} from "@mercuryworkshop/scramjet/bundled";
+import {
+	Chromebound,
+	Framebound,
+	FrameSequence,
+	InjectScramjetInit,
+} from "./types";
+
+import { RpcHelper } from "@mercuryworkshop/rpc";
+import { applyTheme } from "./errorpage/errorpage";
+import { chromeframe, wasm } from ".";
+import { setupContextMenu } from "./emulators/contextmenu";
+import { setupHistoryEmulation } from "./emulators/history";
+import { setupTitleWatcher } from "./emulators/titlewatcher";
+import { setupAnchorHandler } from "./emulators/anchors";
+import { setupWindowOpen } from "./emulators/windowopen";
+import { RemoteTransport } from "./transport";
+import { setupAlwaysLastBubble } from "./emulators/alwaysLastBubble";
+
+function makeContextId(): string {
+	return "context-" + Math.random().toString(36).substring(2, 10);
+}
+
+function findSequence(
+	top: Window,
+	target: Window,
+	path: FrameSequence = []
+): FrameSequence | null {
+	if (top == target) {
+		return path;
+	} else {
+		for (let i = 0; i < top.frames.length; i++) {
+			const child = top.frames[i];
+			const res = findSequence(child, target, [...path, i]);
+			if (res) return res;
+		}
+		return null;
+	}
+}
+
+// const realFetch = fetch;
+
+export class ExecutionContextWrapper {
+	public rpc!: RpcHelper<Framebound, Chromebound>;
+	public client!: ScramjetClient;
+	private cookieJar = new CookieJar();
+	constructor(
+		public self: typeof globalThis,
+		private init: InjectScramjetInit
+	) {
+		const realFetch = self.fetch.bind(self);
+		this.cookieJar.load(init.cookies);
+		this.loadScramjet();
+
+		// this entry point is still called in web workers
+		if (!iswindow) return;
+
+		const history_replaceState = self.History.prototype.replaceState;
+		this.rpc = new RpcHelper(
+			{
+				navigate: async ({ url }) => {
+					window.location.href = url;
+				},
+				popstate: async ({ url, state, title }) => {
+					history_replaceState.call(history, state, title, url);
+					const popStateEvent = new PopStateEvent("popstate", { state });
+					window.dispatchEvent(popStateEvent);
+				},
+				fetchBlob: async (
+					url
+				): Promise<
+					[{ body: ArrayBuffer; contentType: string }, Transferable[]]
+				> => {
+					const response = await realFetch(url);
+					const ab = await response.arrayBuffer();
+					return [
+						{
+							body: ab,
+							contentType:
+								response.headers.get("Content-Type") ||
+								"application/octet-stream",
+						},
+						[ab],
+					];
+				},
+				setCookies: async ({ cookies }) => {
+					for (const { url, cookie } of cookies) {
+						this.cookieJar.setCookies(cookie, new URL(url));
+					}
+				},
+				updateTheme: async (theme) => {
+					applyTheme(theme);
+				},
+			},
+			init.id,
+			(message, transfer) => {
+				this.client.natives.call(
+					"window.postMessage",
+					chromeframe,
+					message,
+					"*",
+					transfer
+				);
+			}
+		);
+		addEventListener("message", (event) => {
+			// if (event.source !== chromeframe) return;
+			this.rpc.recieve(event.data);
+		});
+
+		const addAlwaysLastEventListener = setupAlwaysLastBubble(this, [
+			"click",
+			"auxclick",
+			"contextmenu",
+		]);
+		setupTitleWatcher(this);
+		setupContextMenu(this, addAlwaysLastEventListener);
+		setupHistoryEmulation(this);
+		setupAnchorHandler(this, addAlwaysLastEventListener);
+		setupWindowOpen(this);
+		// inform	chrome of the current url
+		// will happen if you get redirected/click on a link, etc, the chrome will have no idea otherwise
+
+		this.rpc.call("load", {
+			url: this.client.url.href,
+			sequence: findSequence(top!, self as any)!,
+		});
+	}
+
+	loadScramjet() {
+		const transport = new RemoteTransport(this);
+		this.client = new ScramjetClient(this.self, {
+			context: {
+				interface: {
+					getInjectScripts: this.init.getInjectScripts,
+					codecEncode: this.init.codecEncode,
+					codecDecode: this.init.codecDecode,
+				},
+				config: this.init.config,
+				cookieJar: this.cookieJar,
+				prefix: new URL(this.init.prefix),
+			},
+			transport,
+			hookSubcontext: (frameself, frame) => {
+				if (!frame) {
+					throw new Error(
+						"hookSubcontext was called, but a frame null was passed. It shouldn't be possible for a window.open to happen here"
+					);
+				}
+
+				// recalculate chromeframe's sequence just in case
+				const newseq = findSequence(top!, chromeframe);
+				if (!newseq) {
+					throw new Error("could not find chromeframe in top?");
+				}
+				const childId = makeContextId();
+				void this.rpc.call("registerFrameContext", { id: childId });
+				const context = new ExecutionContextWrapper(frameself, {
+					sequence: newseq,
+					id: childId,
+					config: this.init.config,
+					cookies: this.cookieJar.dump(),
+					getInjectScripts: this.init.getInjectScripts,
+					prefix: this.init.prefix,
+					codecEncode: this.init.codecEncode,
+					codecDecode: this.init.codecDecode,
+					// TODO: what should be the behavior here? is inheriting correct?
+					initHeaders: this.init.initHeaders,
+					history: this.init.history,
+				});
+
+				return context.client;
+			},
+			sendSetCookie: async (cookies, _options) => {
+				if (cookies.length === 0) return;
+				await this.rpc.call("setCookies", {
+					cookies: cookies.map(({ url, cookie }) => ({
+						url: url.href,
+						cookie,
+					})),
+				});
+			},
+			initHeaders: this.init.initHeaders,
+			history: this.init.history,
+		});
+		this.client.hook();
+	}
+}

package/source/packages/inject/src/emulators/alwaysLastBubble.ts

@@ -0,0 +1,168 @@
+import { ExecutionContextWrapper } from "../context";
+
+export function setupAlwaysLastBubble(
+	{ self, rpc, client }: ExecutionContextWrapper,
+	whatToCapture: string[]
+) {
+	// goal is to override the default behavior of clicking on an <a> link
+	// if the link is target=_blank it needs to open in a new browser.js tab instead of a native tab
+	// the browser does not provide a neat way of knowing when a link is clicked through
+	//
+	// so the only solution left is to addEventListener("click") on every single <a> element
+	// however, this presents an issue
+	// if the page has its *own* event listener, and it calls e.preventDefault(), we need to not open the tab, since we're essentially acting as the new default
+	// since events bubble down and can have non trivial control flows, this gets complicated fast
+	//
+	// the only solution is to register both the first and last event listeners, so that you control the entire call stack
+	// registering the first is easy, you just need to call it immediately after creation
+	// registering the *last* is extremely difficult
+
+	type EvtDesc = {
+		originalcb: ((e: Event) => void) | EventListenerObject;
+		injectafter?: (e: Event) => void;
+		type: string;
+	};
+	let currentlyExecutingDesc: EvtDesc | null = null;
+	const eventListeners: Map<EventTarget, EvtDesc[]> = new Map();
+
+	// start by recording every event registered so that we can rebuild the bubble path later
+	client.Proxy("EventTarget.prototype.addEventListener", {
+		apply(ctx) {
+			const eventName = ctx.args[0] as string;
+			const cb = ctx.args[1] as ((e: Event) => void) | EventListenerObject;
+			const options = ctx.args[2] as AddEventListenerOptions;
+			const target = ctx.this as EventTarget;
+			if (!whatToCapture.includes(eventName)) return;
+			// capture events don't go through the bubble process so we shouldn't include them
+			if (
+				(typeof options === "boolean" && options) ||
+				(typeof options === "object" && options.capture)
+			)
+				return;
+
+			ctx.args[1] = function (...args: any) {
+				// will always exist since we set it just below
+				const descs = eventListeners.get(target)!;
+				// find the one talking about us
+				const desc = descs.find((d) => d.originalcb === cb)!;
+
+				// have a flag for the event that's currently running so that we know where we are in the stack if preventDefault() or stopPropagation() is called
+				currentlyExecutingDesc = desc;
+				if (typeof cb === "function") {
+					Reflect.apply(cb, this, args);
+				} else if (typeof cb === "object" && cb !== null && cb.handleEvent) {
+					Reflect.apply(cb.handleEvent, cb, args);
+				}
+
+				if (desc.injectafter) {
+					desc.injectafter(args[0]);
+					delete desc.injectafter;
+				}
+				currentlyExecutingDesc = null;
+			};
+
+			const desc: EvtDesc = {
+				originalcb: cb,
+				type: eventName,
+			};
+
+			if (eventListeners.has(target)) {
+				eventListeners.get(target)!.push(desc);
+			} else {
+				eventListeners.set(target, [desc]);
+			}
+		},
+	});
+
+	return function addAlwaysLastEventListener<T extends Event>(
+		target: EventTarget,
+		eventName: string,
+		listener: (e: T) => void
+	) {
+		// this event will always run before all other ones, since it was registered at injectHistoryEmulation
+		// * unless you registered the event before appending to the dom
+		// * unless there's something inside of the <a> that has a listener on it
+		// * unless there's a capture listener
+		// TODO fix those cases
+
+		const callListener = (e: T) => {
+			// this goes into our code, so restore the original methods
+			// TODO: we probably shouldnt do it like this
+			e.stopPropagation =
+				client.natives.store["Event.prototype.stopPropagation"];
+			e.stopImmediatePropagation =
+				client.natives.store["Event.prototype.stopImmediatePropagation"];
+			listener(e);
+		};
+
+		client.natives.call(
+			"EventTarget.prototype.addEventListener",
+			target,
+			eventName,
+			(e: T) => {
+				let lastlistener;
+				const path = e.composedPath();
+
+				// travel the path, from the <a> all the way to Window
+				for (const elm of path) {
+					let descriptors = eventListeners.get(elm);
+					if (descriptors) {
+						descriptors = descriptors.filter((d) => d.type === eventName);
+						// last descriptor was last added and will be called last
+						lastlistener = descriptors[descriptors.length - 1];
+					}
+				}
+
+				// TODO: if a listener is added to a lower level of the dom inside the listener of a higher level, our lastlistener will not be correct
+				if (!lastlistener) {
+					// there are no other event listeners! great
+					callListener(e);
+				} else {
+					// we know what the last listener is. run this to inject after it
+					lastlistener.injectafter = (e) => {
+						callListener(e);
+					};
+				}
+
+				// except, if stopPropagation is called, it never gets to the lastlistener
+				client.RawProxy(e, "stopImmediatePropagation", {
+					apply() {
+						if (!currentlyExecutingDesc)
+							throw new Error(
+								"stopImmediatePropagation called but no desc found?"
+							);
+						// for stopImmediatePropagation this is the last one
+						currentlyExecutingDesc.injectafter = (e) => {
+							// in case preventDefault is called after stopImmediatePropagation(), wait for the event handler to be done
+							callListener(e as T);
+						};
+					},
+				});
+				client.RawProxy(e, "stopPropagation", {
+					apply(ctx) {
+						if (!currentlyExecutingDesc)
+							throw new Error("stopPropagation called but no desc found?");
+						// stopPropagation means there might still be more listeners on the same element
+						// find whatever the last one is on the this element and then inject after it too
+
+						const ev = ctx.this as Event;
+						if (!ev.target) throw new Error("no target");
+						const descs = eventListeners.get(ev.target);
+						if (!descs) throw new Error("no descs found in stopPropagation()");
+						const idx = descs.indexOf(currentlyExecutingDesc);
+						if (idx == -1)
+							throw new Error("couldn't find currentlyExecutingDesc");
+						const remaining = descs.slice(idx + 1, descs.length);
+						if (remaining.length > 0) {
+							const last = remaining[remaining.length - 1];
+							// finally we have the last in the chain after propagation is cut off
+							last.injectafter = (e) => {
+								callListener(e as T);
+							};
+						}
+					},
+				});
+			}
+		);
+	};
+}

package/source/packages/inject/src/emulators/anchors.ts

@@ -0,0 +1,55 @@
+import { ExecutionContextWrapper } from "../context";
+import { setupAlwaysLastBubble } from "./alwaysLastBubble";
+
+export function setupAnchorHandler(
+	{ self, rpc, client }: ExecutionContextWrapper,
+	addAlwaysLastEventListener: ReturnType<typeof setupAlwaysLastBubble>
+) {
+	const anchorObserver = new MutationObserver((mutations) => {
+		mutations.forEach((mutation) => {
+			// https://issues.chromium.org/issues/440360422
+			setTimeout(() => {
+				mutation.addedNodes.forEach((_node) => {
+					if (client.box.instanceof(_node, "HTMLAnchorElement")) {
+						const node = _node as HTMLAnchorElement;
+						const openInNewTab = () => {
+							// note that this is the intercepted version
+							const href = node.href;
+
+							rpc.call("newtab", {
+								url: href,
+							});
+						};
+
+						addAlwaysLastEventListener(node, "click", (e: MouseEvent) => {
+							if (e.defaultPrevented) return;
+							if (e.button !== 0) return; // left click
+							if (node.target !== "_blank") return;
+							e.preventDefault();
+							e.stopPropagation();
+							e.stopImmediatePropagation();
+							openInNewTab();
+						});
+
+						addAlwaysLastEventListener(node, "auxclick", (e: MouseEvent) => {
+							if (e.defaultPrevented) return;
+							if (e.button !== 1) return; // middle click
+							e.preventDefault();
+							e.stopPropagation();
+							e.stopImmediatePropagation();
+							openInNewTab();
+						});
+					}
+				});
+			}, 2000);
+		});
+	});
+	anchorObserver.observe(self.document, {
+		childList: true,
+		subtree: true,
+	});
+
+	self.addEventListener("load", () => {
+		self.document.querySelectorAll("*").forEach((e) => e);
+	});
+}