[scramjet/core] properly implement foreign contexts in html rewriter

Author: velzie

package.json

@@ -16,6 +16,14 @@
 		"format": "prettier --write .",
 		"preinstall": "npx only-allow pnpm"
 	},
+	"pnpm": {
+		"overrides": {
+			"htmlparser2": "10.1.0"
+		},
+		"patchedDependencies": {
+			"htmlparser2@10.1.0": "patches/htmlparser2@10.1.0.patch"
+		}
+	},
 	"devDependencies": {
 		"@mercuryworkshop/wisp-js": "catalog:",
 		"@rsdoctor/rspack-plugin": "^1.4.0",

packages/scramjet/package.json

@@ -11,6 +11,14 @@
 		"dev": "node --no-warnings=ExperimentalWarning devserver.ts",
 		"preinstall": "npx only-allow pnpm"
 	},
+	"pnpm": {
+		"overrides": {
+			"htmlparser2": "10.1.0"
+		},
+		"patchedDependencies": {
+			"htmlparser2@10.1.0": "../../patches/htmlparser2@10.1.0.patch"
+		}
+	},
 	"devDependencies": {
 		"@mercuryworkshop/wisp-js": "catalog:",
 		"@rsdoctor/rspack-plugin": "^1.4.0",

packages/scramjet/packages/core/package.json

@@ -87,7 +87,7 @@
 		"dom-serializer": "^2.0.0",
 		"domhandler": "^5.0.3",
 		"domutils": "^3.2.2",
-		"htmlparser2": "^10.0.0",
+		"htmlparser2": "catalog:",
 		"idb": "^8.0.3",
 		"parse-domain": "^8.2.2",
 		"set-cookie-parser": "^2.7.1"

packages/scramjet/packages/core/src/client/dom/element.ts

@@ -6,6 +6,7 @@ import { rewriteUrl, unrewriteUrl } from "@rewriters/url";
 import { SCRAMJETCLIENT } from "@/symbols";
 import { ScramjetClient } from "@client/index";
 import { isHtmlMimeType } from "@/shared/mime";
+import { ForeignContext } from "@/shared/rewriters/html";
 
 const encoder = new TextEncoder();
 function bytesToBase64(bytes: Uint8Array) {
@@ -15,6 +16,35 @@ function bytesToBase64(bytes: Uint8Array) {
 
 	return btoa(binString);
 }
+
+export function foreignContextForElement(
+	client: ScramjetClient,
+	element: Element
+): ForeignContext {
+	if (client.box.instanceof(element, "SVGElement")) return "svg";
+	if (client.box.instanceof(element, "MathMLElement")) return "math";
+	return undefined;
+}
+
+// NOTE: NOT INCLUSIVE OF THE CURRENT ELEMENT
+export function insideForeignContext(
+	client: ScramjetClient,
+	element: Element | null
+): ForeignContext {
+	let current: Element | null = element.parentElement;
+
+	while (current) {
+		const context = foreignContextForElement(client, current);
+		if (context) return context;
+		// EXPLICITLY an html context, don't go up further
+		if (client.box.instanceof(current, "SVGForeignObjectElement"))
+			return undefined;
+		current = current.parentElement;
+	}
+
+	return undefined;
+}
+
 export default function (client: ScramjetClient, self: typeof window) {
 	const attrObject = {
 		nonce: [self.HTMLElement],
@@ -327,6 +357,7 @@ export default function (client: ScramjetClient, self: typeof window) {
 						inline: true,
 						source: client.url.href,
 						apisource: "set Element.prototype.innerHTML",
+						foreignContext: foreignContextForElement(client, ctx.this),
 					});
 				} catch {
 					newval = value;
@@ -430,6 +461,7 @@ export default function (client: ScramjetClient, self: typeof window) {
 					inline: true,
 					source: client.url.href,
 					apisource: "set Element.prototype.setHTMLUnsafe",
+					foreignContext: foreignContextForElement(client, ctx.this),
 				});
 			} catch {}
 		},
@@ -450,6 +482,7 @@ export default function (client: ScramjetClient, self: typeof window) {
 						inline: true,
 						source: client.url.href,
 						apisource: "set Element.prototype.insertAdjacentHTML",
+						foreignContext: foreignContextForElement(client, ctx.this),
 					});
 				} catch {}
 		},
@@ -611,6 +644,7 @@ export default function (client: ScramjetClient, self: typeof window) {
 
 	client.Proxy("DOMParser.prototype.parseFromString", {
 		apply(ctx) {
+			// TODO: what do we do if it's xml/svg?
 			if (typeof ctx.args[1] === "string" && isHtmlMimeType(ctx.args[1])) {
 				try {
 					ctx.args[0] = rewriteHtml(ctx.args[0], client.context, client.meta, {

packages/scramjet/packages/core/src/shared/rewriters/html.ts

@@ -10,6 +10,7 @@ import { htmlRules } from "@/shared/htmlRules";
 import { Tap } from "@/Tap";
 import { RawHeaders } from "@mercuryworkshop/proxy-transports";
 
+export type ForeignContext = "svg" | "math" | undefined;
 export type HtmlContext = {
 	// should we inject scramjet scripts at the top of the document?
 	loadScripts: boolean;
@@ -21,6 +22,7 @@ export type HtmlContext = {
 	apisource?: string;
 	// response headers for worker originating documents
 	headers?: RawHeaders;
+	foreignContext?: ForeignContext;
 };
 
 const encoder = new TextEncoder();
@@ -31,7 +33,10 @@ function rewriteHtmlInner(
 	htmlcontext: HtmlContext
 ) {
 	const handler = new DomHandler((err, dom) => dom);
-	const parser = new Parser(handler);
+	console.log(htmlcontext.foreignContext);
+	const parser = new Parser(handler, {
+		startingForeignContext: htmlcontext.foreignContext === "svg",
+	});
 
 	parser.write(html);
 	parser.end();

packages/scramjet/pnpm-lock.yaml

@@ -14,3 +14,4 @@ catalog:
   "@mercuryworkshop/libcurl-transport": 2.0.5
   "@mercuryworkshop/epoxy-transport": 3.0.1
   "@mercuryworkshop/wisp-js": ^0.4.1
+  htmlparser2: ^10.1.0