[frontend] use separate cookiestore for different sites

Author: velzie

frontend/src/IsolatedFrame.tsx

@@ -1,29 +1,19 @@
 import {
 	ScramjetHeaders,
-	ScramjetServiceWorker,
-	type ScramjetInitConfig,
 	type ScramjetFetchContext,
-	ScramjetController,
 	type ScramjetFetchResponse,
 	CookieStore,
 	handleFetch,
 	rewriteUrl,
-	config,
-	ScramjetClient,
 	setConfig,
 	unrewriteUrl,
 	type URLMeta,
+	BareClient,
 } from "@mercuryworkshop/scramjet/bundled";
 import * as tldts from "tldts";
 
 const ISOLATION_ORIGIN = import.meta.env.VITE_ISOLATION_ORIGIN;
 
-const tgt = new EventTarget();
-
-const cookiestore = new CookieStore();
-
-let client = new ScramjetClient(self);
-
 const cfg = {
 	wisp: "ws://localhost:1337/",
 	prefix: "/scramjet/",
@@ -77,9 +67,11 @@ const cfg = {
 };
 
 setConfig(cfg);
+const bare = new BareClient();
 
 type Controller = {
 	controllerframe: HTMLIFrameElement;
+	cookiestore: CookieStore;
 	rootdomain: string;
 	baseurl: URL;
 	prefix: URL;
@@ -123,6 +115,7 @@ function makeController(url: URL): Controller {
 	});
 
 	const prefix = new URL(baseurl.protocol + baseurl.host + cfg.prefix);
+	const cookiestore = new CookieStore();
 
 	const controller = {
 		controllerframe: frame,
@@ -132,6 +125,7 @@ function makeController(url: URL): Controller {
 		prefix,
 		ready,
 		readyResolve: readyResolve!,
+		cookiestore,
 	};
 	controllers.push(controller);
 
@@ -169,14 +163,17 @@ const methods = {
 		data: ScramjetFetchContext,
 		controller: Controller
 	): Promise<[ScramjetFetchResponse, Transferable[] | undefined]> {
-		data.cookieStore = cookiestore;
+		// repopulate fetchcontext fields with the items that weren't cloned over postMessage
+		data.cookieStore = controller.cookiestore;
 		data.rawUrl = new URL(data.rawUrl);
 		if (data.rawClientUrl) data.rawClientUrl = new URL(data.rawClientUrl);
 		let headers = new ScramjetHeaders();
 		for (let [k, v] of Object.entries(data.initialHeaders)) {
 			headers.set(k, v);
 		}
 		data.initialHeaders = headers;
+
+		// handle scramjet.all.js and scramjet.wasm.js requests
 		if (data.rawUrl.pathname === cfg.files.wasm) {
 			return [await makeWasmResponse(), undefined];
 		} else if (data.rawUrl.pathname === cfg.files.all) {
@@ -221,15 +218,17 @@ const methods = {
 			}
 		}
 
+		// TODO fix eventtarget jank
+		const tgt = new EventTarget();
 		const fetchresponse = await handleFetch.call(
 			tgt as any,
 			data,
 			cfg,
-			client.bare,
+			bare,
 			controller.prefix
 		);
 
-		let transfer = undefined;
+		let transfer: any[] | undefined = undefined;
 		if (
 			fetchresponse.body instanceof ArrayBuffer ||
 			fetchresponse.body instanceof ReadableStream

frontend/tsconfig.json

@@ -3,11 +3,7 @@
 		"target": "ES2022",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-		"lib": [
-			"ES2022",
-			"DOM",
-			"DOM.Iterable"
-		],
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
 		"types": [],
 		"skipLibCheck": true,
 		/* Bundler mode */
@@ -26,7 +22,5 @@
 		"jsx": "react-jsx",
 		"jsxImportSource": "dreamland"
 	},
-	"include": [
-		"src"
-	]
+	"include": ["src"]
 }

sandbox/sw.js

@@ -44,36 +44,9 @@ class SandboxThing {
 
 let sb = new SandboxThing();
 
-// export interface ScramjetFetchContext {
-// 	rawUrl: URL;
-// 	destination: RequestDestination;
-// 	mode: RequestMode;
-// 	referrer: string;
-// 	method: string;
-// 	body: BodyType | null;
-// 	cache: RequestCache;
-// 	forceCrossOriginIsolated: boolean;
-// 	initialHeaders: ScramjetHeaders;
-// 	cookieStore: CookieStore;
-// 	rawClientUrl?: URL;
-// }
-//
-// interface ScramjetFetchResponse {
-// 	body: BodyType;
-// 	headers: BareHeaders;
-// 	status: number;
-// 	statusText: string;
-// }
 async function handleFetch(event) {
 	const client = await self.clients.get(event.clientId);
 
-	console.log(event.request.body);
-	console.log(
-		event.request.body instanceof ReadableStream ||
-			event.request.body instanceof ArrayBuffer
-			? [event.request.body]
-			: []
-	);
 	let resp = await sb.request(
 		"fetch",
 		{
@@ -144,17 +117,3 @@ self.addEventListener("message", (e) => {
 		);
 	}
 });
-
-// addEventListener("clientschanged", async () => {
-//  const clients = await self.clients.matchAll({ includeUncontrolled: true });
-//  for (const client of clients) {
-//   if (new URL(client.url).pathname.startsWith("/controller")) {
-//    _controller.client = client;
-//    client.postMessage({
-//     $sandboxsw$type: "controller-registered",
-//     timestamp: Date.now()
-//    });
-//    console.log("Controller client registered and notified");
-//   }
-//  }
-// });