html2canvas-pro 2.5.2 → 2.5.3

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.2 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.5.3 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -8040,6 +8040,54 @@
 	const imagesReady = (document) => {
 		return Promise.all([].slice.call(document.images, 0).map(imageReady));
 	};
+	/**
+	* Wait until every external stylesheet link of the clone has been applied or
+	* definitively failed, or the readiness budget expires.
+	*
+	* The clone is mounted by adoptNode() into an already-closed document
+	* (close() must precede adoptNode for Chrome uppercase class-name matching,
+	* see the mount sequence below), so the cloned <link rel="stylesheet">
+	* elements are inserted after the document finished loading: they neither
+	* delay the iframe load event nor change readyState, and the iframeLoader
+	* readiness poll cannot observe them. On a cold cache the first capture
+	* could then measure the clone before its external CSS arrived and render
+	* an unstyled layout (issue #245). Inline <style> clones apply
+	* synchronously and document-level adopted stylesheets are serialised at
+	* clone time, so neither needs this wait.
+	* @internal – exported for testing only.
+	*/
+	const stylesheetsReady = (documentClone, logger, signal) => {
+		if (signal?.aborted) return Promise.resolve();
+		const pending = [];
+		const links = documentClone.getElementsByTagName("link");
+		for (let i = 0; i < links.length; i++) {
+			const link = links[i];
+			if (!link || link.sheet) continue;
+			const rel = (link.getAttribute("rel") ?? "").trim().toLowerCase().split(/\s+/);
+			if (!rel.includes("stylesheet") || rel.includes("alternate") || link.disabled || !link.getAttribute("href")) continue;
+			pending.push(new Promise((resolve) => {
+				let timer;
+				const settle = () => {
+					link.removeEventListener("load", settle);
+					link.removeEventListener("error", settle);
+					signal?.removeEventListener("abort", onAbort);
+					clearTimeout(timer);
+					resolve();
+				};
+				const onAbort = () => settle();
+				timer = setTimeout(() => {
+					logger?.warn(`Stylesheet ${link.href} did not finish loading within ${CLONE_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+					settle();
+				}, CLONE_READY_TIMEOUT_MS);
+				link.addEventListener("load", settle);
+				link.addEventListener("error", settle);
+				signal?.addEventListener("abort", onAbort, { once: true });
+				if (link.sheet) settle();
+			}));
+		}
+		if (pending.length === 0) return Promise.resolve();
+		return Promise.all(pending).then(() => void 0);
+	};
 	const iframeLoader = (iframe, logger, signal) => {
 		return new Promise((resolve, reject) => {
 			const cloneWindow = iframe.contentWindow;
@@ -8082,6 +8130,15 @@
 		});
 	};
 	/**
+	* Reduce a doctype component to characters that are inert inside a
+	* <!DOCTYPE ...> declaration. Doctype content is parsed as a declaration
+	* token, never as HTML markup, but the fields originate from the captured
+	* document — stripping markup delimiters and control characters here makes
+	* that property locally verifiable (and keeps the sanitizer guarantee even
+	* if a future serializer ever embeds the result elsewhere).
+	*/
+	const sanitizeDoctypePart = (value) => value.replace(/[<>&"'`\\]|[\u0000-\u001f\u007f]/g, "");
+	/**
 	* Serialise a document type declaration to an HTML string.
 	* @internal – exported for testing only, not part of the public API.
 	*/
@@ -8089,12 +8146,12 @@
 		let str = "";
 		if (doctype) {
 			str += "<!DOCTYPE ";
-			if (doctype.name) str += doctype.name;
-			if (doctype.internalSubset) str += " " + doctype.internalSubset.replace(/"/g, "&quot;").replace(/>/g, "&gt;");
+			if (doctype.name) str += sanitizeDoctypePart(doctype.name);
+			if (doctype.internalSubset) str += " " + sanitizeDoctypePart(doctype.internalSubset);
 			if (doctype.publicId) {
-				str += " PUBLIC \"" + doctype.publicId.replace(/"/g, "&quot;") + "\"";
-				if (doctype.systemId) str += " \"" + doctype.systemId.replace(/"/g, "&quot;") + "\"";
-			} else if (doctype.systemId) str += " SYSTEM \"" + doctype.systemId.replace(/"/g, "&quot;") + "\"";
+				str += " PUBLIC \"" + sanitizeDoctypePart(doctype.publicId) + "\"";
+				if (doctype.systemId) str += " \"" + sanitizeDoctypePart(doctype.systemId) + "\"";
+			} else if (doctype.systemId) str += " SYSTEM \"" + sanitizeDoctypePart(doctype.systemId) + "\"";
 			str += ">";
 		}
 		return str;
@@ -8130,6 +8187,8 @@
 			const referenceElement = mount.clonedReferenceElement;
 			if (typeof referenceElement === "undefined") throw new Error(`Error finding the ${mount.referenceElementName} in the cloned document`);
 			throwIfAborted(mount.signal);
+			await stylesheetWait;
+			throwIfAborted(mount.signal);
 			if (documentClone.fonts && documentClone.fonts.ready) await documentClone.fonts.ready;
 			throwIfAborted(mount.signal);
 			if (/(AppleWebKit)/g.test(navigator.userAgent)) {
@@ -8180,6 +8239,7 @@
 		const adoptedNode = documentClone.adoptNode(mount.documentElement);
 		addBase(adoptedNode, baseUri);
 		documentClone.replaceChild(adoptedNode, documentClone.documentElement);
+		const stylesheetWait = stylesheetsReady(documentClone, context.logger, mount.signal);
 		return iframeLoad;
 	};
 	//#endregion