formalize behavior of _self and put iframe names in urlmeta

Author: velzie

src/client/client.ts

@@ -232,6 +232,93 @@ export class ScramjetClient {
 
 				return client.url;
 			},
+			get topFrameName() {
+				if (!iswindow)
+					throw new Error("topFrameName was called from a worker?");
+
+				let currentWin = client.global;
+				if (currentWin.parent.window == currentWin.window) {
+					// we're top level & we don't have a frame name
+					return null;
+				}
+
+				// find the topmost frame that's controlled by scramjet, stopping before the real top frame
+				while (currentWin.parent.window !== currentWin.window) {
+					if (!currentWin.parent.window[SCRAMJETCLIENT]) break;
+					currentWin = currentWin.parent.window;
+				}
+
+				const curclient = currentWin[SCRAMJETCLIENT];
+				const frame = curclient.descriptors.get(
+					"window.frameElement",
+					currentWin
+				);
+				if (!frame) {
+					// we're inside an iframe, but the top frame is scramjet-controlled and top level, so we can't get a top frame name
+					return null;
+				}
+				if (!frame.name) {
+					// the top frame is scramjet-controlled, but it has no name. this is user error
+					console.error(
+						"YOU NEED TO USE `new ScramjetFrame()`! DIRECT IFRAMES WILL NOT WORK"
+					);
+
+					return null;
+				}
+
+				return frame.name;
+			},
+			get parentFrameName() {
+				if (!iswindow)
+					throw new Error("parentFrameName was called from a worker?");
+				if (client.global.parent.window == client.global.window) {
+					// we're top level & we don't have a frame name
+					return null;
+				}
+
+				let parentWin = client.global.parent.window;
+				if (parentWin[SCRAMJETCLIENT]) {
+					// we're inside an iframe, and the parent is scramjet-controlled
+					const parentClient = parentWin[SCRAMJETCLIENT];
+					const frame = parentClient.descriptors.get(
+						"window.frameElement",
+						parentWin
+					);
+
+					if (!frame) {
+						// parent is scramjet controlled and top-level. there is no parent frame name
+						return null;
+					}
+
+					if (!frame.name) {
+						// the parent frame is scramjet-controlled, but it has no name. this is user error
+						console.error(
+							"YOU NEED TO USE `new ScramjetFrame()`! DIRECT IFRAMES WILL NOT WORK"
+						);
+
+						return null;
+					}
+
+					return frame.name;
+				} else {
+					// we're inside an iframe, and the parent is not scramjet-controlled
+					// return our own frame name
+					const frame = client.descriptors.get(
+						"window.frameElement",
+						client.global
+					);
+					if (!frame.name) {
+						// the parent frame is not scramjet-controlled, so we can't get a parent frame name
+						console.error(
+							"YOU NEED TO USE `new ScramjetFrame()`! DIRECT IFRAMES WILL NOT WORK"
+						);
+
+						return null;
+					}
+
+					return frame.name;
+				}
+			},
 		};
 
 		global[SCRAMJETCLIENT] = this;

src/client/dom/open.ts

@@ -1,18 +1,15 @@
 import { rewriteUrl } from "../../shared";
 import { ScramjetClient } from "../client";
-import {
-	SCRAMJETCLIENT,
-	SCRAMJETCLIENTNAME,
-	SCRAMJETFRAMENAME,
-} from "../../symbols";
+import { SCRAMJETCLIENT } from "../../symbols";
 
 export default function (client: ScramjetClient) {
 	client.Proxy("window.open", {
 		apply(ctx) {
 			if (ctx.args[0]) ctx.args[0] = rewriteUrl(ctx.args[0], client.meta);
 
-			if (["_parent", "_top", "_unfencedTop"].includes(ctx.args[1]))
-				ctx.args[1] = SCRAMJETFRAMENAME; // TODO: this is still technically the wrong behavior
+			if (ctx.args[1] === "_top" || ctx.args[1] === "_unfencedTop")
+				ctx.args[1] = client.meta.topFrameName;
+			if (ctx.args[1] === "_parent") ctx.args[1] = client.meta.parentFrameName;
 
 			const realwin = ctx.call();
 

src/client/index.ts

@@ -14,12 +14,24 @@ export const isshared = "SharedWorkerGlobalScope" in self;
 export const isemulatedsw =
 	new URL(self.location.href).searchParams.get("dest") === "serviceworker";
 
+function createFrameId() {
+	return `${Array(8)
+		.fill(0)
+		.map(() => Math.floor(Math.random() * 36).toString(36))
+		.join("")}`;
+}
+
 dbg.log("initializing scramjet client");
 // if it already exists, that means the handlers have probably already been setup by the parent document
 if (!(SCRAMJETCLIENT in <Partial<typeof self>>self)) {
 	loadCodecs();
 
 	const client = new ScramjetClient(self);
+	const frame: HTMLIFrameElement = self.frameElement as HTMLIFrameElement;
+	if (frame && !frame.name) {
+		// all frames need to be named for our logic to work
+		frame.name = createFrameId();
+	}
 
 	if (self.COOKIE) client.loadcookies(self.COOKIE);
 

src/controller/frame.ts

@@ -1,15 +1,20 @@
 import { ScramjetController } from ".";
 import type { ScramjetClient } from "../client/client";
 import { ScramjetEvent, ScramjetEvents } from "../client/events";
-import { SCRAMJETCLIENT, SCRAMJETFRAME, SCRAMJETFRAMENAME } from "../symbols";
-
+import { SCRAMJETCLIENT, SCRAMJETFRAME } from "../symbols";
+function createFrameId() {
+	return `${Array(8)
+		.fill(0)
+		.map(() => Math.floor(Math.random() * 36).toString(36))
+		.join("")}`;
+}
 export class ScramjetFrame extends EventTarget {
 	constructor(
 		private controller: ScramjetController,
 		public frame: HTMLIFrameElement
 	) {
 		super();
-		frame.name = SCRAMJETFRAMENAME;
+		frame.name = createFrameId();
 		frame[SCRAMJETFRAME] = this;
 	}
 

src/shared/rewriters/html.ts

@@ -8,7 +8,6 @@ import { CookieStore } from "../cookie";
 import { unrewriteBlob } from "../../shared/rewriters/url";
 import { $scramjet } from "../../scramjet";
 import { getRewriter } from "./wasm";
-import { SCRAMJETCLIENTNAME, SCRAMJETFRAMENAME } from "../../symbols";
 
 const encoder = new TextEncoder();
 function rewriteHtmlInner(
@@ -231,9 +230,10 @@ export const htmlRules: {
 		style: "*",
 	},
 	{
-		fn: (value: string) => {
-			if (["_parent", "_top", "_unfencedTop"].includes(value))
-				return SCRAMJETFRAMENAME; // TODO: ...
+		fn: (value: string, meta: URLMeta) => {
+			if (value === "_top" || value === "_unfencedTop")
+				return meta.topFrameName;
+			else if (value === "_parent") return meta.parentFrameName;
 			else return value;
 		},
 		target: ["a", "base"],

src/shared/rewriters/url.ts

@@ -4,6 +4,8 @@ import { rewriteJs } from "./js";
 export type URLMeta = {
 	origin: URL;
 	base: URL;
+	topFrameName?: string;
+	parentFrameName?: string;
 };
 
 function tryCanParseURL(url: string, origin?: string | URL): URL | null {
@@ -54,13 +56,20 @@ export function rewriteUrl(url: string | URL, meta: URLMeta) {
 			location.origin +
 			$scramjet.config.prefix +
 			$scramjet.codec.encode(realUrl.href) +
+			(meta.topFrameName
+				? `?topFrame=${meta.topFrameName}&parentFrame=${meta.parentFrameName}`
+				: "") +
 			realHash
 		);
 	}
 }
 
 export function unrewriteUrl(url: string | URL) {
 	if (url instanceof URL) url = url.toString();
+	// remove query string
+	if (url.includes("?")) {
+		url = url.split("?")[0];
+	}
 
 	const prefixed = location.origin + $scramjet.config.prefix;
 

src/symbols.ts

@@ -2,4 +2,3 @@
 export const SCRAMJETCLIENTNAME = "scramjet client global";
 export const SCRAMJETCLIENT = Symbol.for(SCRAMJETCLIENTNAME);
 export const SCRAMJETFRAME = Symbol.for("scramjet frame handle");
-export const SCRAMJETFRAMENAME = "scramjet_frame";

src/worker/fetch.ts

@@ -26,13 +26,6 @@ import type { URLMeta } from "../shared/rewriters/url";
 import { $scramjet, flagEnabled } from "../scramjet";
 import { rewriteJsWithMap } from "../shared/rewriters/js";
 
-function newMeta(url: URL): URLMeta {
-	return {
-		origin: url,
-		base: url,
-	};
-}
-
 export async function handleFetch(
 	this: ScramjetServiceWorker,
 	request: Request,
@@ -49,6 +42,21 @@ export async function handleFetch(
 			requestUrl.searchParams.delete("dest");
 		}
 
+		let meta: URLMeta = {};
+		if (client) {
+			meta.base = new URL(unrewriteUrl(client.url));
+			meta.origin = new URL(unrewriteUrl(client.url));
+		} else {
+			meta.base = new URL(unrewriteUrl(request.url));
+			meta.origin = new URL(unrewriteUrl(request.url));
+		}
+		if (requestUrl.searchParams.has("topFrame")) {
+			meta.topFrameName = requestUrl.searchParams.get("topFrame");
+		}
+		if (requestUrl.searchParams.has("parentFrame")) {
+			meta.parentFrameName = requestUrl.searchParams.get("parentFrame");
+		}
+
 		if (requestUrl.pathname === this.config.files.wasm) {
 			return fetch(this.config.files.wasm).then(async (x) => {
 				const buf = await x.arrayBuffer();
@@ -89,12 +97,7 @@ export async function handleFetch(
 			if (response.body) {
 				body = await rewriteBody(
 					response as BareResponseFetch,
-					client
-						? {
-								base: new URL(new URL(client.url).origin),
-								origin: new URL(new URL(client.url).origin),
-							}
-						: newMeta(new URL(unrewriteUrl(request.referrer))),
+					meta,
 					request.destination,
 					workerType,
 					this.cookieStore
@@ -230,7 +233,6 @@ export async function handleFetch(
 				const unrewrittenReferrer = unrewriteUrl(request.referrer);
 				if (unrewrittenReferrer) {
 					const referrerUrl = new URL(unrewrittenReferrer);
-					const meta = newMeta(url);
 					siteDirective = await getSiteDirective(
 						meta,
 						referrerUrl,
@@ -277,6 +279,7 @@ export async function handleFetch(
 
 		return await handleResponse(
 			url,
+			meta,
 			workerType,
 			request.destination,
 			request.mode,
@@ -316,6 +319,7 @@ export async function handleFetch(
 
 async function handleResponse(
 	url: URL,
+	meta: URLMeta,
 	workertype: string,
 	destination: RequestDestination,
 	mode: RequestMode,
@@ -331,7 +335,7 @@ async function handleResponse(
 		mode === "navigate" && ["document", "iframe"].includes(destination);
 	const responseHeaders = await rewriteHeaders(
 		response.rawHeaders,
-		newMeta(url),
+		meta,
 		bareClient,
 		{ get: getReferrerPolicy, set: storeReferrerPolicy }
 	);
@@ -358,7 +362,10 @@ async function handleResponse(
 			responseHeaders["referrer-policy"]
 		);
 
-		const redirectMeta = newMeta(redirectUrl);
+		const redirectMeta = {
+			origin: redirectUrl,
+			base: redirectUrl,
+		};
 		const newSiteDirective = await getSiteDirective(
 			redirectMeta,
 			url,
@@ -395,7 +402,7 @@ async function handleResponse(
 	if (response.body) {
 		responseBody = await rewriteBody(
 			response,
-			newMeta(url),
+			meta,
 			destination,
 			workertype,
 			cookieStore