single-file-core 1.5.115 → 1.5.117

package/core/helper.js

@@ -408,10 +408,10 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 						}
 					}
 					if (options.removeUnusedFonts) {
-						getUsedFont(computedStyle, options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":first-letter"), options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":before"), options, data.usedFonts);
-						getUsedFont(getComputedStyle(win, element, ":after"), options, data.usedFonts);
+						getUsedFont(computedStyle, data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":first-letter"), data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":before"), data.usedFonts);
+						getUsedFont(getComputedStyle(win, element, ":after"), data.usedFonts);
 					}
 				}
 			}
@@ -496,17 +496,22 @@ function getStylesheetsContent(styleSheets, adoptedStyleSheetsCache = new Map())
 function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {
 	const tagName = element.tagName && element.tagName.toUpperCase();
 	if (tagName == "CANVAS") {
+		const canvasComputedStyle = computedStyle || getComputedStyle(win, element);
+		const canvasData = {
+			backgroundColor: canvasComputedStyle && canvasComputedStyle.getPropertyValue("background-color")
+		};
 		try {
-			data.canvases.push({
-				dataURI: element.toDataURL("image/png"),
-				backgroundColor: computedStyle.getPropertyValue("background-color")
-			});
-			element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
-			data.markedElements.push(element);
+			canvasData.dataURI = element.toDataURL("image/png");
 			// eslint-disable-next-line no-unused-vars
 		} catch (error) {
-			// ignored
+			// a canvas painted with a cross-origin resource is tainted and toDataURL throws for the
+			// whole element, its own drawing included. The entry is pushed and the element marked
+			// anyway: the loss is then counted and reported instead of being silent, and an
+			// out-of-page fallback re-rendering the element has something to find it by
 		}
+		data.canvases.push(canvasData);
+		element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
+		data.markedElements.push(element);
 	}
 	if (tagName == "IMG") {
 		const imageData = {
@@ -606,12 +611,28 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 	}
 }
 
-function getUsedFont(computedStyle, options, usedFonts) {
+// Every family in the computed font-family is recorded, and the set of faces the document actually
+// resolved is deliberately NOT consulted. Narrowing the list to the loaded faces is the obvious
+// idea — a fallback stack names every family the page might need and only some are used — and it
+// was written in 2019, wired to an option nothing ever set, and dead until it was reconnected here.
+// Reconnected, it saved nothing measurable on nine real pages and cost fidelity twice: a face
+// matched on its declared style is not found when the browser SYNTHESIZED that style, so a family
+// drawn in an italic it declares no face for was dropped from the page that draws it; and a webfont
+// that merely failed to load on the capturing machine would be dropped from the archive for good.
+// It belongs with the unicode-range work, which needs the same information and can weigh a measured
+// benefit against those, not here.
+function getUsedFont(computedStyle, usedFonts) {
 	if (computedStyle) {
 		const fontStyle = computedStyle.getPropertyValue("font-style") || "normal";
 		computedStyle.getPropertyValue("font-family").split(",").forEach(fontFamilyName => {
 			fontFamilyName = normalizeFontFamily(fontFamilyName);
-			if (!options.loadedFonts || options.loadedFonts.find(font => normalizeFontFamily(font.family) == fontFamilyName && font.style == fontStyle)) {
+			// an element with no computed font-family at all is one whose styles could not be read,
+			// not one drawn in a family with no name. It happens to every element of a frame that
+			// was re-parsed from its srcdoc, because the computed style is asked of the parent
+			// window and the document it belongs to is not the one being rendered. Recorded, it
+			// turns "nothing is known here" into a list of length one, which reads downstream as a
+			// complete answer and prunes every face the frame declares
+			if (fontFamilyName) {
 				const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
 				const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
 				const value = [fontFamilyName, fontWeight, fontStyle, fontVariant];

package/core/index.js

@@ -422,6 +422,7 @@ const SHADOWROOT_CLONABLE = "shadowrootclonable";
 const SHADOWROOT_SERIALIZABLE = "shadowrootserializable";
 const SCRIPT_OPTIONS = "data-single-file-options";
 const UTF8_CHARSET = "utf-8";
+const TAINTED_CANVAS_WARNING_MESSAGE = "SingleFile: canvas elements tainted by a cross-origin resource, dropped from the page:";
 
 class Processor {
 	constructor(options, processorHelper, batchRequest) {
@@ -1055,20 +1056,29 @@ class Processor {
 
 	replaceCanvasElements() {
 		if (this.options.canvases) {
+			let discardedCount = 0;
 			this.doc.querySelectorAll("canvas").forEach(canvasElement => {
 				const attributeValue = canvasElement.getAttribute(util.CANVAS_ATTRIBUTE_NAME);
 				if (attributeValue) {
 					const canvasData = this.options.canvases[Number(attributeValue)];
 					if (canvasData) {
-						const backgroundStyle = {};
-						if (canvasData.backgroundColor) {
-							backgroundStyle["background-color"] = canvasData.backgroundColor;
+						if (canvasData.dataURI) {
+							const backgroundStyle = {};
+							if (canvasData.backgroundColor) {
+								backgroundStyle["background-color"] = canvasData.backgroundColor;
+							}
+							this.processorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")", backgroundStyle);
+							this.stats.add("processed", "canvas", 1);
+						} else {
+							discardedCount++;
+							this.stats.add("discarded", "canvas", 1);
 						}
-						this.processorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")", backgroundStyle);
-						this.stats.add("processed", "canvas", 1);
 					}
 				}
 			});
+			if (discardedCount) {
+				warn(TAINTED_CANVAS_WARNING_MESSAGE, discardedCount);
+			}
 		}
 	}
 
@@ -1726,6 +1736,10 @@ function log(...args) {
 	console.log("S-File <core>   ", ...args); // eslint-disable-line no-console
 }
 
+function warn(...args) {
+	console.warn("S-File <core>   ", ...args); // eslint-disable-line no-console
+}
+
 // -----
 // Stats
 // -----

package/core/lib/processor-helper-common.js

@@ -102,9 +102,10 @@ class ProcessorHelperCommon {
 			["image, feImage", "xlink:href"],
 			["image, feImage", "href"]
 		];
-		if (options.blockImages) {
-			doc.querySelectorAll("svg").forEach(element => element.remove());
-		}
+		// an inline svg is document content, not a fetched resource: blocking images empties the
+		// references it makes outwards (image, feImage and use are all processed below) and leaves
+		// the markup itself alone. Removing it deleted JS-drawn charts, inline icons, and the
+		// <defs> holding gradients and filters that CSS applies to ordinary HTML elements
 		let resourcePromises = processAttributeArgs.map(([selector, attributeName, removeElementIfMissing, processDuplicates]) =>
 			this.processAttribute(doc, doc.querySelectorAll(selector), attributeName, baseURI, options, "image", resources, removeElementIfMissing, batchRequest, styles, processDuplicates)
 		);
@@ -136,9 +137,12 @@ class ProcessorHelperCommon {
 				resourceElement.setAttribute("data-sf-original-href", originalResourceURL);
 			}
 			let resourceURL = normalizeURL(originalResourceURL);
-			if (!options.blockImages) {
-				if (testValidPath(resourceURL) && !testIgnoredPath(resourceURL)) {
-					resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+			// a reference into the page itself costs no request, so blocking images must not empty
+			// it: normalizeURL drops the fragment, which leaves a bare "#symbol" as the empty path
+			// below and a same-document URL matching options.url
+			if (testValidPath(resourceURL) && !testIgnoredPath(resourceURL)) {
+				resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+				if (!options.blockImages) {
 					try {
 						resourceURL = util.resolveURL(resourceURL, baseURI);
 						// eslint-disable-next-line no-unused-vars
@@ -172,11 +176,9 @@ class ProcessorHelperCommon {
 							}
 						}
 					}
-				} else if (resourceURL == options.url) {
-					resourceElement.setAttribute(attributeName, originalResourceURL.substring(resourceURL.length));
 				}
-			} else {
-				resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+			} else if (resourceURL == options.url) {
+				resourceElement.setAttribute(attributeName, originalResourceURL.substring(resourceURL.length));
 			}
 		}));
 	}
@@ -255,6 +257,17 @@ class ProcessorHelperCommon {
 		}));
 	}
 
+	// a video or an audio element gets the attribute REMOVED rather than emptied: util.EMPTY_RESOURCE
+	// is inert on an image but not on a media element, which would attempt the load, fail, and sit
+	// in an error state where removing the attribute leaves the poster showing cleanly
+	setAttributeEmpty(resourceElement, attributeName, expectedType) {
+		if (expectedType == "video" || expectedType == "audio") {
+			resourceElement.removeAttribute(attributeName);
+		} else {
+			resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
+		}
+	}
+
 	setBackgroundImage(element, url, style) {
 		element.style.setProperty("background-blend-mode", "normal", "important");
 		element.style.setProperty("background-clip", "content-box", "important");
@@ -382,12 +395,7 @@ class ProcessorHelperCommon {
 	}
 
 	async removeAlternativeFonts(doc, stylesheets, fonts, fontTests) {
-		const fontsDetails = {
-			fonts: new Map(),
-			medias: new Map(),
-			supports: new Map(),
-			layers: new Map()
-		};
+		const fontsDetails = this.createFontsDetailsInfo();
 		const stats = { rules: { processed: 0, discarded: 0 }, fonts: { processed: 0, discarded: 0 } };
 		let sheetIndex = 0;
 		stylesheets.forEach(stylesheetInfo => {
@@ -446,7 +454,18 @@ class ProcessorHelperCommon {
 				const key = this.getFontKey(ruleData);
 				const fontInfo = fontsDetails.fonts.get(key);
 				if (fontInfo) {
-					await this.processFontFaceRule(ruleData, fontInfo, fonts, fontTests, stats);
+					// a face declaring the same descriptors and the same sources as one already kept
+					// cannot change what that one did, and its sources are embedded a second time. A
+					// stylesheet reached from two <link> elements, or imported by two sheets, repeats
+					// every face it carries. The test is made before the await: the sources are read
+					// as they stand for both rules, and processing them is what would interleave
+					const ruleKey = key + " " + this.getPropertyValue(ruleData, "src");
+					if (fontsDetails.emittedFonts.has(ruleKey)) {
+						removedRules.push(cssRule);
+					} else {
+						fontsDetails.emittedFonts.add(ruleKey);
+						await this.processFontFaceRule(ruleData, fontInfo, fonts, fontTests, stats);
+					}
 				} else {
 					removedRules.push(cssRule);
 				}
@@ -504,7 +523,12 @@ class ProcessorHelperCommon {
 			fonts: new Map(),
 			medias: new Map(),
 			supports: new Map(),
-			layers: new Map()
+			layers: new Map(),
+			// the faces already emitted in this cascade context, so a second declaration of one of
+			// them can be dropped instead of embedding the same bytes again. Each media, supports
+			// and layer block gets its own info, so only rules that apply under the same conditions
+			// are ever compared
+			emittedFonts: new Set()
 		};
 	}
 

package/core/lib/processor-helper-inline.js

@@ -44,6 +44,10 @@ const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
 const DUPLICATE_STYLESHEET_ATTRIBUTE_NAME = "data-sf-duplicate-stylesheet-ref";
+// the attributes that say how the link fetched its stylesheet, which the style element now holding
+// that stylesheet has no use for. Everything else identified the element in the page
+const LINK_FETCH_ATTRIBUTE_NAMES = ["rel", "href", "type", "media", "as", "crossorigin", "integrity",
+	"referrerpolicy", "hreflang", "sizes", "imagesrcset", "imagesizes", "fetchpriority"];
 
 let util;
 
@@ -162,6 +166,15 @@ function getProcessorHelperClass(utilInstance) {
 				if (stylesheetInfo) {
 					stylesheets.delete(linkElement);
 					const styleElement = doc.createElement("style");
+					// the element is replaced rather than rewritten, so whatever identified it in
+					// the page has to be carried over: an id a script still looks up, a class a
+					// selector still matches. The attributes left out are the ones that describe
+					// the fetch the style element no longer performs
+					Array.from(linkElement.attributes).forEach(({ name, value }) => {
+						if (!LINK_FETCH_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
+							styleElement.setAttribute(name, value);
+						}
+					});
 					if (stylesheetInfo.mediaText) {
 						styleElement.media = stylesheetInfo.mediaText;
 					}
@@ -348,7 +361,7 @@ function getProcessorHelperClass(utilInstance) {
 					delete resourceElement.dataset.singleFileOriginURL;
 					if (!expectedType || !options["block" + expectedType.charAt(0).toUpperCase() + expectedType.substring(1) + "s"]) {
 						if (!testIgnoredPath(resourceURL)) {
-							setAttributeEmpty(resourceElement, attributeName, expectedType);
+							this.setAttributeEmpty(resourceElement, attributeName, expectedType);
 							if (testValidPath(resourceURL)) {
 								try {
 									resourceURL = util.resolveURL(resourceURL, baseURI);
@@ -435,18 +448,10 @@ function getProcessorHelperClass(utilInstance) {
 							}
 						}
 					} else {
-						setAttributeEmpty(resourceElement, attributeName, expectedType);
+						this.setAttributeEmpty(resourceElement, attributeName, expectedType);
 					}
 				}
 			}));
-
-			function setAttributeEmpty(resourceElement, attributeName, expectedType) {
-				if (expectedType == "video" || expectedType == "audio") {
-					resourceElement.removeAttribute(attributeName);
-				} else {
-					resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
-				}
-			}
 		}
 
 		async processImageSrcset(resourceURL, srcsetValue, resources, batchRequest) {

package/core/lib/processor-helper.js

@@ -36,6 +36,7 @@ const CANVAS_TAG_FOUND = /<canvas/gi;
 const EMPTY_URL_SOURCE = /^url\(["']?data:[^,]*,?["']?\)/;
 const LOCAL_SOURCE = "local(";
 const FONT_MAX_LOAD_DELAY = 5000;
+const LINK_OWN_ATTRIBUTE_NAMES = ["rel", "type", "href", "media"];
 
 let util;
 
@@ -100,18 +101,29 @@ function getProcessorHelperClass(utilInstance) {
 		replaceStylesheets(doc, stylesheets, options, resources) {
 			const entries = Array.from(stylesheets).reverse();
 			const linkElements = new Map();
+			const sharedStyleElements = new Map();
 			Array.from(new Set(options.inlineStylesheetsRefs.values())).forEach(stylesheetRefIndex => {
 				const linkElement = doc.createElement("link");
 				linkElement.setAttribute("rel", "stylesheet");
 				linkElement.setAttribute("type", "text/css");
 				const name = "stylesheet_" + resources.stylesheets.size + ".css";
 				linkElement.setAttribute("href", name);
-				let { content } = options.inlineStylesheets.get(stylesheetRefIndex);
-				const stylesheet = cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
-				this.replacePseudoClassDefined(stylesheet);
-				content = this.generateStylesheetContent(stylesheet, options);
-				resources.stylesheets.set(resources.stylesheets.size, { name, content });
+				// the shared copy is generated from the stylesheet of the element the duplicates were
+				// folded into, not from the text that was captured: that text still names the resources
+				// by their addresses in the original page, which resolve to nothing once the page is
+				// inside the archive
+				const { styleElement, content } = options.inlineStylesheets.get(stylesheetRefIndex);
+				const sharedEntry = entries.find(([key]) => key.element == styleElement);
+				const stylesheet = sharedEntry
+					? sharedEntry[1].stylesheet
+					: cssTree.parse(content, { context: "stylesheet", parseCustomProperty: true });
+				resources.stylesheets.set(resources.stylesheets.size, { name, content: this.generateStylesheetContent(stylesheet, options) });
 				linkElements.set(stylesheetRefIndex, linkElement);
+				// the element the duplicates were folded into is not itself a duplicate, so it is
+				// absent from inlineStylesheetsRefs and would keep its content inline: the archive
+				// would then hold the same stylesheet twice, once as the entry the links point at
+				// and once in the page
+				sharedStyleElements.set(styleElement, stylesheetRefIndex);
 			});
 			for (const [key, stylesheetInfo] of entries) {
 				if (key.urlNode) {
@@ -130,11 +142,22 @@ function getProcessorHelperClass(utilInstance) {
 					resources.stylesheets.set(resources.stylesheets.size, { name, stylesheet: stylesheetInfo.stylesheet, url: stylesheetInfo.url });
 				} else {
 					const styleElement = key.element;
-					const stylesheetRefIndex = options.inlineStylesheetsRefs.get(styleElement);
+					const stylesheetRefIndex = options.inlineStylesheetsRefs.has(styleElement)
+						? options.inlineStylesheetsRefs.get(styleElement)
+						: sharedStyleElements.get(styleElement);
 					if (stylesheetRefIndex === undefined) {
 						styleElement.textContent = this.generateStylesheetContent(stylesheetInfo.stylesheet, options);
 					} else {
 						const linkElement = linkElements.get(stylesheetRefIndex).cloneNode(true);
+						// the element is replaced rather than rewritten, so whatever identified it in
+						// the page has to be carried over: an id a script still looks up, a class a
+						// selector still matches. The attributes left out are the ones that describe
+						// the link itself, which the code around here sets
+						Array.from(styleElement.attributes).forEach(({ name, value }) => {
+							if (!LINK_OWN_ATTRIBUTE_NAMES.includes(name.toLowerCase())) {
+								linkElement.setAttribute(name, value);
+							}
+						});
 						if (stylesheetInfo.mediaText) {
 							linkElement.media = stylesheetInfo.mediaText;
 						}
@@ -151,7 +174,7 @@ function getProcessorHelperClass(utilInstance) {
 			}
 		}
 
-		async resolveImportURLs(stylesheetInfo, baseURI, options, workStylesheet, resources, stylesheets) {
+		async resolveImportURLs(stylesheetInfo, baseURI, options, workStylesheet, resources, stylesheets, importedStyleSheets = new Set()) {
 			const stylesheet = stylesheetInfo.stylesheet;
 			const scoped = stylesheetInfo.scoped;
 			this.resolveStylesheetURLs(stylesheet, baseURI, workStylesheet);
@@ -168,7 +191,10 @@ function getProcessorHelperClass(utilInstance) {
 						} catch (error) {
 							// ignored
 						}
-						if (testValidURL(resourceURL)) {
+						// a sheet already open higher in this import chain must not be entered again: the
+						// ancestors are carried down the branch, not accumulated across the whole document,
+						// so two sibling imports of one sheet are still both resolved
+						if (testValidURL(resourceURL) && !importedStyleSheets.has(resourceURL)) {
 							const mediaQueryListNode = cssTree.find(node, node => node.type == "MediaQueryList");
 							let mediaText, layerName, supportsCondition;
 							if (mediaQueryListNode) {
@@ -198,12 +224,19 @@ function getProcessorHelperClass(utilInstance) {
 									layerName,
 									supportsCondition
 								};
+								const requestedURL = resourceURL;
 								const content = await this.getStylesheetContent(resourceURL, options);
 								stylesheetInfo.url = resourceURL = content.resourceURL;
 								content.data = getUpdatedResourceContent(resourceURL, options) || content.data;
 								stylesheetInfo.stylesheet = cssTree.parse(content.data, { context: "stylesheet", parseCustomProperty: true });
 								stylesheet = stylesheetInfo.stylesheet;
-								await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets);
+								const ancestorStyleSheets = new Set(importedStyleSheets);
+								// both identities of the sheet are remembered: a redirect makes the URL that was
+								// requested and the URL that answered differ, and an import of either one is the
+								// same cycle
+								ancestorStyleSheets.add(requestedURL);
+								ancestorStyleSheets.add(resourceURL);
+								await this.resolveImportURLs(stylesheetInfo, resourceURL, options, workStylesheet, resources, stylesheets, ancestorStyleSheets);
 								stylesheets.set({ urlNode }, stylesheetInfo);
 							}
 							urlNode.importedChildren = stylesheet.children;
@@ -319,7 +352,7 @@ function getProcessorHelperClass(utilInstance) {
 					delete resourceElement.dataset.singleFileOriginURL;
 					if (!expectedType || !options["block" + expectedType.charAt(0).toUpperCase() + expectedType.substring(1) + "s"]) {
 						if (!testIgnoredPath(resourceURL)) {
-							setAttributeEmpty(resourceElement, attributeName, expectedType);
+							this.setAttributeEmpty(resourceElement, attributeName, expectedType);
 							if (testValidPath(resourceURL)) {
 								try {
 									resourceURL = util.resolveURL(resourceURL, baseURI);
@@ -373,18 +406,10 @@ function getProcessorHelperClass(utilInstance) {
 							}
 						}
 					} else {
-						setAttributeEmpty(resourceElement, attributeName, expectedType);
+						this.setAttributeEmpty(resourceElement, attributeName, expectedType);
 					}
 				}
 			}));
-
-			function setAttributeEmpty(resourceElement, attributeName, expectedType) {
-				if (expectedType == "video" || expectedType == "audio") {
-					resourceElement.removeAttribute(attributeName);
-				} else {
-					resourceElement.setAttribute(attributeName, util.EMPTY_RESOURCE);
-				}
-			}
 		}
 
 		async processImageSrcset(resourceURL, srcsetValue, resources, batchRequest) {