refactor: adjust xhr code logic and sequence

Author: ACTCD

README.md

@@ -280,7 +280,6 @@ Userscripts currently supports the following api methods. All methods are asynch
       - `status`
       - `statusText`
       - `timeout`
-      - `withCredentials`
       - `responseText` (when `responseType` is `text`)
   - returns an object with a single property, `abort`, which is a `Function`
     - usage: `const foo = GM.xmlHttpRequest({...});` ... `foo.abort();` to abort the request

src/ext/background/main.js

@@ -392,31 +392,51 @@ async function handleMessage(message, sender) {
 			return { status: "fulfilled", result };
 		}
 		case "API_XHR": {
-			// parse details and set up for XMLHttpRequest
+			// initializing an xhr instance
+			const xhr = new XMLHttpRequest();
+			// establish a long-lived port connection to content script
+			const port = browser.tabs.connect(sender.tab.id, {
+				name: message.xhrPortName,
+			});
+			// receive messages from content script and process them
+			port.onMessage.addListener((msg) => {
+				if (msg.name === "ABORT") xhr.abort();
+				if (msg.name === "DISCONNECT") port.disconnect();
+			});
+			// handle port disconnect and clean tasks
+			port.onDisconnect.addListener((p) => {
+				if (p?.error) {
+					console.error(
+						`port disconnected due to an error: ${p.error.message}`,
+					);
+				}
+			});
+			// parse details and set up for xhr instance
 			const details = message.details;
-			const method = details.method ? details.method : "GET";
+			const method = details.method || "GET";
 			const user = details.user || null;
 			const password = details.password || null;
 			let body = details.data || null;
-			if (body != null && details.binary != null) {
+			if (typeof body === "string" && details.binary) {
 				const len = body.length;
 				const arr = new Uint8Array(len);
 				for (let i = 0; i < len; i++) {
 					arr[i] = body.charCodeAt(i);
 				}
 				body = new Blob([arr], { type: "text/plain" });
 			}
-			// establish a long-lived port connection to content script
-			const port = browser.tabs.connect(sender.tab.id, {
-				name: message.xhrPortName,
-			});
-			// set up XMLHttpRequest
-			const xhr = new XMLHttpRequest();
-			xhr.withCredentials = details.user && details.password;
-			xhr.timeout = details.timeout || 0;
-			if (details.overrideMimeType) {
-				xhr.overrideMimeType(details.overrideMimeType);
-			}
+
+			// xhr instances automatically filter out unexpected user values
+			xhr.timeout = details.timeout;
+			xhr.responseType = details.responseType;
+			// record parsed values for subsequent use
+			const responseType = xhr.responseType;
+			// avoid unexpected behavior of legacy defaults such as parsing XML
+			if (responseType === "") xhr.responseType = "text";
+			// transfer to content script via arraybuffer and then parse to blob
+			if (responseType === "blob") xhr.responseType = "arraybuffer";
+			// transfer to content script via text and then parse to document
+			if (responseType === "document") xhr.responseType = "text";
 			// add required listeners and send result back to the content script
 			for (const e of message.events) {
 				if (!details[e]) continue;
@@ -428,12 +448,11 @@ async function handleMessage(message, sender) {
 						readyState: xhr.readyState,
 						response: xhr.response,
 						responseHeaders: xhr.getAllResponseHeaders(),
-						responseType: xhr.responseType,
+						responseType,
 						responseURL: xhr.responseURL,
 						status: xhr.status,
 						statusText: xhr.statusText,
 						timeout: xhr.timeout,
-						withCredentials: xhr.withCredentials,
 					};
 					// get content-type when headers received
 					if (xhr.readyState >= xhr.HEADERS_RECEIVED) {
@@ -442,45 +461,17 @@ async function handleMessage(message, sender) {
 					// only process when xhr is complete and data exist
 					if (xhr.readyState === xhr.DONE && xhr.response !== null) {
 						// need to convert arraybuffer data to postMessage
-						if (xhr.responseType === "arraybuffer") {
-							/** @type {ArrayBuffer} */
+						if (
+							xhr.responseType === "arraybuffer" &&
+							xhr.response instanceof ArrayBuffer
+						) {
 							const buffer = xhr.response;
 							x.response = Array.from(new Uint8Array(buffer));
 						}
 					}
 					port.postMessage({ name: e, event, response: x });
 				};
 			}
-			xhr.open(method, details.url, true, user, password);
-			xhr.responseType = details.responseType;
-			// avoid unexpected behavior of legacy defaults such as parsing XML
-			if (xhr.responseType === "") xhr.responseType = "text";
-			// transfer to content script via arraybuffer and then parse to blob
-			if (xhr.responseType === "blob") xhr.responseType = "arraybuffer";
-			// transfer to content script via text and then parse to document
-			if (xhr.responseType === "document") xhr.responseType = "text";
-			if (details.headers) {
-				for (const key in details.headers) {
-					if (!key.startsWith("Proxy-") && !key.startsWith("Sec-")) {
-						const val = details.headers[key];
-						xhr.setRequestHeader(key, val);
-					}
-				}
-			}
-			// receive messages from content script and process them
-			port.onMessage.addListener((msg) => {
-				if (msg.name === "ABORT") xhr.abort();
-				if (msg.name === "DISCONNECT") port.disconnect();
-			});
-			// handle port disconnect and clean tasks
-			port.onDisconnect.addListener((p) => {
-				if (p?.error) {
-					console.error(
-						`port disconnected due to an error: ${p.error.message}`,
-					);
-				}
-			});
-			xhr.send(body);
 			// if onloadend not set in xhr details
 			// onloadend event won't be passed to content script
 			// if that happens port DISCONNECT message won't be posted
@@ -490,6 +481,17 @@ async function handleMessage(message, sender) {
 					port.postMessage({ name: "onloadend", event });
 				};
 			}
+			if (details.overrideMimeType) {
+				xhr.overrideMimeType(details.overrideMimeType);
+			}
+			xhr.open(method, details.url, true, user, password);
+			// must set headers after `xhr.open()`, but before `xhr.send()`
+			if (typeof details.headers === "object") {
+				for (const [key, val] of Object.entries(details.headers)) {
+					xhr.setRequestHeader(key, val);
+				}
+			}
+			xhr.send(body);
 			return { status: "fulfilled" };
 		}
 		case "REFRESH_DNR_RULES": {

src/ext/content-scripts/api.js

@@ -129,7 +129,10 @@ function xhr(details) {
 	const response = {
 		abort: () => console.error("xhr has not yet been initialized"),
 	};
-	// port listener, most of the messaging logic goes here
+	/**
+	 * port listener, most of the messaging logic goes here
+	 * @type {Parameters<typeof browser.runtime.onConnect.addListener>[0]}
+	 */
 	const listener = (port) => {
 		if (port.name !== xhrPortName) return;
 		port.onMessage.addListener(async (msg) => {
@@ -167,7 +170,7 @@ function xhr(details) {
 				 */
 				// only process when xhr is complete and data exist
 				if (r.readyState === 4 && r.response !== null) {
-					if (r.responseType === "arraybuffer") {
+					if (r.responseType === "arraybuffer" && Array.isArray(r.response)) {
 						// arraybuffer responses had their data converted in background
 						// convert it back to arraybuffer
 						try {
@@ -176,7 +179,7 @@ function xhr(details) {
 							console.error("error parsing xhr arraybuffer", err);
 						}
 					}
-					if (r.responseType === "blob") {
+					if (r.responseType === "blob" && Array.isArray(r.response)) {
 						// blob responses had their data converted in background
 						// convert it back to blob
 						try {
@@ -187,7 +190,7 @@ function xhr(details) {
 							console.error("error parsing xhr blob", err);
 						}
 					}
-					if (r.responseType === "document") {
+					if (r.responseType === "document" && typeof r.response === "string") {
 						// document responses had their data converted in background
 						// convert it back to document
 						try {
@@ -211,7 +214,6 @@ function xhr(details) {
 				port.postMessage({ name: "DISCONNECT" });
 			}
 		});
-
 		// handle port disconnect and clean tasks
 		port.onDisconnect.addListener((p) => {
 			if (p?.error) {