Immediately sanitize attributes that can cause events to fire while an element is still in memory

Author: Gigabyte5671

src/Descriptor.ts

@@ -1,6 +1,20 @@
 import type { AstRule } from 'css-selector-parser';
+import type { SanitizationOption } from './Config.js';
 import { replaceTextNode, sanitizeElement } from './Utility.js';
 
+/**
+ * Attributes that should be immediately sanitized before they are added to any elements.
+ */
+const immediatelySanitizedAttributes = [
+	'onerror',
+	'onload',
+	'onloadeddata',
+	'onloadedmetadata',
+	'onloadstart',
+	'onstalled',
+	'onsuspend',
+];
+
 /**
  * Valid positioning pseudo classes.
  */
@@ -54,10 +68,12 @@ export class Descriptor {
 		type: 'child' as 'child' | 'type'
 	};
 	public invalid = false;
+	public isImported = false;
 	private rawContent = '';
-	private sanitize = false;
+	private sanitize: SanitizationOption;
 
-	constructor (rule: AstRule, content?: string, sanitize = false) {
+	constructor (rule: AstRule, content?: string, isImported = false, sanitize: SanitizationOption = 'all') {
+		this.isImported = isImported;
 		this.rule = rule;
 		this.sanitize = sanitize;
 
@@ -90,6 +106,7 @@ export class Descriptor {
 		// Set the attributes.
 		if (rule.attributes) {
 			for (const attribute of rule.attributes) {
+				if (this.sanitize !== 'off' && immediatelySanitizedAttributes.includes(attribute.name)) continue;
 				let value = '';
 				if (attribute.value?.type === 'String') {
 					value = attribute.value.value;
@@ -99,7 +116,7 @@ export class Descriptor {
 		}
 
 		// Sanitize the element.
-		if (this.sanitize) {
+		if (this.isImported && this.sanitize === 'imports') {
 			this.element = sanitizeElement(this.element);
 		}
 
@@ -179,7 +196,7 @@ export class Descriptor {
 		}
 
 		// Sanitize the element.
-		if (this.sanitize) {
+		if (this.isImported && this.sanitize === 'imports') {
 			this.element = sanitizeElement(this.element);
 		}
 	}

src/Generator.ts

@@ -7,13 +7,13 @@ import { createCSSOM, elementsAreComparable, mergeElements, sanitizeElement } fr
 const parse = createParser({ syntax: 'progressive' });
 
 class Rule {
+	isImported: boolean;
 	rule: CSSStyleRule;
-	sanitize: boolean;
 	selectorAst: AstSelector;
 
-	constructor (rule: CSSStyleRule, sanitize = false) {
+	constructor (rule: CSSStyleRule, isImported = false) {
+		this.isImported = isImported;
 		this.rule = rule;
-		this.sanitize = sanitize;
 		this.selectorAst = parse(rule.selectorText);
 	}
 }
@@ -44,12 +44,12 @@ export async function cssToHtml (css: CSSRuleList | string, options: Partial<Opt
 	const rules = new Array<Rule>();
 	const importSet = new Set<string>();
 
-	async function parseRules (source: CSSRuleList, urlBase: string, sanitize?: boolean): Promise<void> {
+	async function parseRules (source: CSSRuleList, urlBase: string, isImported = false): Promise<void> {
 		let seenStyleRule = false;
 		for (const rule of Object.values(source!)) {
 			if (rule instanceof CSSStyleRule) {
 				seenStyleRule = true;
-				rules.push(new Rule(rule, sanitize));
+				rules.push(new Rule(rule, isImported));
 			}
 			// Fetch the content of imported stylesheets.
 			else if (rule instanceof CSSImportRule && !seenStyleRule && options.imports === 'include') {
@@ -60,23 +60,23 @@ export async function cssToHtml (css: CSSRuleList | string, options: Partial<Opt
 					if (resource.status !== 200) throw new Error(`Response status for stylesheet "${url.href}" was ${resource.status}.`);
 					const text = await resource.text();
 					const importedRule = createCSSOM(text);
-					if (importedRule) await parseRules(importedRule, url.href, options.sanitize === 'imports');
+					if (importedRule) await parseRules(importedRule, url.href, true);
 				}
 			}
 		}
 	}
 	await parseRules(styleRules, window.location.href);
 
 	// Populate the DOM.
-	for (const { rule, sanitize, selectorAst } of rules) {
+	for (const { isImported, rule, selectorAst } of rules) {
 		// Traverse each rule nest of the selector AST.
 		for (const r of selectorAst.rules) {
 			const nest = new Array<Descriptor>();
 			let invalidNest = false;
 			// Create a descriptor for each of the nested selectors.
 			let next: AstRule | undefined = r;
 			do {
-				const descriptor = new Descriptor(next, undefined, sanitize);
+				const descriptor = new Descriptor(next, undefined, isImported, options.sanitize);
 				if (descriptor.invalid) {
 					invalidNest = true;
 					next = undefined;