html2canvas-pro 2.5.2 → 2.5.4

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.2 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.5.4 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -6528,6 +6528,15 @@
 	*/
 	const CLONE_READY_TIMEOUT_MS = 3e4;
 	/**
+	* Total time (ms) to wait for the clone's external stylesheets (link and
+	* @import chains) to apply. Shorter than the document readiness window: a
+	* stylesheet that needs longer usually means a hung CDN, and rendering with
+	* a 10s-old layout beats blocking the capture for 30s. A missed deadline
+	* resolves with a warning (the capture continues with a possibly unstyled
+	* clone).
+	*/
+	const STYLESHEET_READY_TIMEOUT_MS = 1e4;
+	/**
 	* Hard ceiling (ms) for the cloned iframe's load event itself. If the event
 	* never fires, the mount is rejected instead of hanging forever.
 	*/
@@ -8040,6 +8049,129 @@
 	const imagesReady = (document) => {
 		return Promise.all([].slice.call(document.images, 0).map(imageReady));
 	};
+	/**
+	* Whether every CSS rule of the sheet (and of the @import chains it pulls
+	* in) has been applied. A sheet is "attached" as soon as its rules are
+	* readable; an external @import inside it may still be loading, which shows
+	* up as an inaccessible CSSImportRule.sheet. `cssRules` can throw for
+	* cross-origin sheets without a CORS-approved response — those rules cannot
+	* be inspected, so the sheet counts as ready rather than blocking the render
+	* forever.
+	*/
+	const isSheetFullyApplied = (sheet, depth = 0) => {
+		if (!sheet || depth > MAX_IMPORT_DEPTH) return true;
+		let rules;
+		try {
+			rules = sheet.cssRules;
+		} catch (_e) {
+			return true;
+		}
+		if (!rules) return true;
+		for (let i = 0; i < rules.length; i++) {
+			const rule = rules[i];
+			if (rule && typeof CSSImportRule !== "undefined" && rule instanceof CSSImportRule) {
+				if (!rule.styleSheet || !isSheetFullyApplied(rule.styleSheet, depth + 1)) return false;
+			}
+		}
+		return true;
+	};
+	const MAX_IMPORT_DEPTH = 32;
+	/** Collect every <link> in the document, including links inside shadow roots. */
+	const collectLinks = (root, out) => {
+		const links = root.querySelectorAll("link");
+		for (let i = 0; i < links.length; i++) {
+			const link = links[i];
+			if (link) out.push(link);
+		}
+		const walker = (root.ownerDocument ?? root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+		let current = walker.nextNode();
+		while (current) {
+			const shadowRoot = current.shadowRoot;
+			if (shadowRoot) collectLinks(shadowRoot, out);
+			current = walker.nextNode();
+		}
+	};
+	/**
+	* Wait until every external stylesheet 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.
+	*
+	* Readiness is polled rather than purely event-driven because a <style>
+	* clone serialised from `createStyleClone` re-fetches its external @import
+	* rules without firing link load/error events, and shadow-root links are
+	* equally event-hostile in some engines. The poll covers both; link events
+	* remain as the settle path for plain <link> fetches.
+	* @internal – exported for testing only.
+	*/
+	const stylesheetsReady = (documentClone, logger, signal) => {
+		if (signal?.aborted) return Promise.resolve();
+		const pending = [];
+		const links = [];
+		collectLinks(documentClone, links);
+		for (const link of links) {
+			if (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) => {
+				const href = link.href;
+				const settle = () => {
+					link.removeEventListener("load", settle);
+					link.removeEventListener("error", settle);
+					signal?.removeEventListener("abort", onAbort);
+					clearInterval(timer);
+					resolve();
+				};
+				const onAbort = () => settle();
+				if (link.sheet) {
+					resolve();
+					return;
+				}
+				link.addEventListener("load", settle);
+				link.addEventListener("error", settle);
+				signal?.addEventListener("abort", onAbort, { once: true });
+				let elapsed = 0;
+				const timer = setInterval(() => {
+					elapsed += 50;
+					if (link.sheet) settle();
+					else if (elapsed >= 1e4) {
+						logger?.warn(`Stylesheet ${href} did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+						settle();
+					}
+				}, 50);
+			}));
+		}
+		const styleElements = documentClone.getElementsByTagName("style");
+		for (let i = 0; i < styleElements.length; i++) {
+			const style = styleElements[i];
+			const sheet = style?.sheet;
+			if (!sheet || !style?.textContent?.includes("@import")) continue;
+			if (isSheetFullyApplied(sheet)) continue;
+			pending.push(new Promise((resolve) => {
+				let elapsed = 0;
+				const timer = setInterval(() => {
+					elapsed += 50;
+					const currentSheet = style.sheet;
+					if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= 1e4) {
+						if (elapsed >= 1e4 && !isSheetFullyApplied(currentSheet ?? null)) logger?.warn(`@import chain in an inline <style> did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+						clearInterval(timer);
+						resolve();
+					}
+				}, 50);
+			}));
+		}
+		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 +8214,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 +8230,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 +8271,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,7 +8323,11 @@
 		const adoptedNode = documentClone.adoptNode(mount.documentElement);
 		addBase(adoptedNode, baseUri);
 		documentClone.replaceChild(adoptedNode, documentClone.documentElement);
-		return iframeLoad;
+		const stylesheetWait = stylesheetsReady(documentClone, context.logger, mount.signal);
+		return iframeLoad.catch((error) => {
+			iframe.parentNode?.removeChild(iframe);
+			throw error;
+		});
 	};
 	//#endregion
 	//#region src/dom/document-cloner.ts
@@ -13488,14 +13635,19 @@
 			const svg = createForeignObjectSVG(this.options.width, this.options.height, 0, 0, element);
 			const imagePromise = loadSerializedSVG(svg);
 			restoreRootOffsets();
-			const img = await imagePromise;
-			if (this.options.signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-			if (this.options.backgroundColor) {
-				this.ctx.fillStyle = asString(this.options.backgroundColor);
-				this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
+			try {
+				const img = await imagePromise;
+				if (this.options.signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
+				if (this.options.backgroundColor) {
+					this.ctx.fillStyle = asString(this.options.backgroundColor);
+					this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
+				}
+				this.ctx.drawImage(img, this.options.x, this.options.y, this.options.width, this.options.height);
+				return this.canvas;
+			} catch (error) {
+				if (!this.options.canvas) releaseSurface(this.canvas);
+				throw error;
 			}
-			this.ctx.drawImage(img, this.options.x, this.options.y, this.options.width, this.options.height);
-			return this.canvas;
 		}
 	};
 	/**
@@ -14051,19 +14203,17 @@
 		const documentCloner = new DocumentCloner(context, element, cloneOptions);
 		const clonedElement = documentCloner.clonedReferenceElement;
 		if (!clonedElement) throw new Error("Unable to find element in cloned iframe");
-		const container = await documentCloner.toIFrame(ownerDocument, windowBounds);
-		perfMonitor.end("clone");
-		emitProgress(opts.onProgress, context, "clone", 30);
-		if (signal?.aborted) {
-			if (opts.removeContainer ?? true) DocumentCloner.destroy(container);
-			throwIfAborted(signal);
-		}
-		const { width, height, left, top } = isBodyElement(clonedElement) || isHTMLElement(clonedElement) ? parseDocumentSize(clonedElement.ownerDocument) : parseBounds(context, clonedElement);
-		const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
-		const renderOptions = assembleRenderOptions(opts, backgroundColor, left, top, width, height, defaultView.devicePixelRatio ?? 1);
+		let container;
 		let canvas;
 		let root;
 		try {
+			container = await documentCloner.toIFrame(ownerDocument, windowBounds);
+			perfMonitor.end("clone");
+			emitProgress(opts.onProgress, context, "clone", 30);
+			throwIfAborted(signal);
+			const { width, height, left, top } = isBodyElement(clonedElement) || isHTMLElement(clonedElement) ? parseDocumentSize(clonedElement.ownerDocument) : parseBounds(context, clonedElement);
+			const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
+			const renderOptions = assembleRenderOptions(opts, backgroundColor, left, top, width, height, defaultView.devicePixelRatio ?? 1);
 			if (foreignObjectRendering) {
 				context.logger.debug(`Document cloned, using foreign object rendering`);
 				perfMonitor.start("render-foreignobject");
@@ -14097,7 +14247,7 @@
 			try {
 				if (root) root.restoreTree();
 			} finally {
-				if (opts.removeContainer ?? true) DocumentCloner.destroy(container);
+				if (container && (opts.removeContainer ?? true)) DocumentCloner.destroy(container);
 				perfMonitor.end("cleanup");
 			}
 		}