Merge pull request #6 from Cascades-CSS/sanitization

Add output sanitization

Author: Gigabyte5671

.github/workflows/unit-tests.yml

@@ -18,6 +18,7 @@ jobs:
           ignored,
           import,
           nth-child,
+          sanitize,
           selector
         ]
     steps:

README.md

@@ -86,6 +86,9 @@ An options object can be passed as the second argument to `cssToHtml()` to custo
 | `fill`       | `fill`       * | Fill the DOM with duplicate elements up to the desired location. Eg: <br/> `span#fourth:nth-child(4) {}` <br/> Will become: <br/> `<span></span><span></span><span></span><span id="fourth"></span>`. |
 |              | `no-fill`      | Don't fill. Eg: <br/> `span#fourth:nth-child(4) {}` <br/> Will become: <br/> `<span id="fourth"></span>`. |
 | `imports`    | `include`      | Fetch imported stylesheets and include them in the HTML generation process. |
-|              | `style-only` * | Ignore `@import` rules. |
+|              | `style-only` * | Ignore `@import` rules when generating HTML. |
 | `mergeNth`   | `merge`      * | Elements generated from `:nth-` selectors will be merged with any similar element occupying the desired location. |
 |              | `no-merge`     | These elements will not be merged. |
+| `sanitize`   | `all`        * | Sanitize the generated HTML using [DOMPurify](https://github.com/cure53/DOMPurify). |
+|              | `imports`      | Only sanitize the HTML generated from imported stylesheets. |
+|              | `off`          | Don't sanitize the generated HTML. |

package-lock.json

@@ -31,9 +31,11 @@
 	},
 	"homepage": "https://github.com/CSS-Canvas/CSS-to-HTML#readme",
 	"devDependencies": {
-		"@playwright/test": "^1.35.1"
+		"@playwright/test": "^1.35.1",
+		"@types/dompurify": "^3.0.5"
 	},
 	"dependencies": {
-		"css-selector-parser": "^2.3.2"
+		"css-selector-parser": "^2.3.2",
+		"dompurify": "^3.1.2"
 	}
 }

package.json

@@ -1,5 +1,5 @@
 import type { AstRule } from 'css-selector-parser';
-import { replaceTextNode } from './Utility.js';
+import { replaceTextNode, sanitizeElement } from './Utility.js';
 
 /**
  * Valid positioning pseudo classes.
@@ -44,8 +44,8 @@ function parsePositionFormula (a: number, b: number): number | false {
  * Describes an element based on pieces of a selector.
  */
 export class Descriptor {
-	public rule;
-	public element;
+	public rule: AstRule;
+	public element: HTMLElement;
 	public combinator = '';
 	public position = {
 		explicit: false,
@@ -55,9 +55,11 @@ export class Descriptor {
 	};
 	public invalid = false;
 	private rawContent = '';
+	private sanitize = false;
 
-	constructor (rule: AstRule, content?: string) {
+	constructor (rule: AstRule, content?: string, sanitize = false) {
 		this.rule = rule;
+		this.sanitize = sanitize;
 
 		// Create the element.
 		let tag = 'div';
@@ -96,6 +98,11 @@ export class Descriptor {
 			}
 		}
 
+		// Sanitize the element.
+		if (this.sanitize) {
+			this.element = sanitizeElement(this.element);
+		}
+
 		// Set the content.
 		if (content) {
 			this.content = content;
@@ -170,6 +177,11 @@ export class Descriptor {
 		else {
 			replaceTextNode(this.element, value);
 		}
+
+		// Sanitize the element.
+		if (this.sanitize) {
+			this.element = sanitizeElement(this.element);
+		}
 	}
 
 	/**

src/Descriptor.ts

@@ -1,23 +1,26 @@
 import { createParser } from 'css-selector-parser';
-import type { AstRule } from 'css-selector-parser';
+import type { AstRule, AstSelector } from 'css-selector-parser';
 import { Descriptor } from './Descriptor.js';
-import { createCSSOM, elementsAreComparable, mergeElements } from './Utility.js';
+import { createCSSOM, elementsAreComparable, mergeElements, sanitizeElement } from './Utility.js';
 
 export class Options {
 	duplicates?: 'preserve' | 'remove';
 	fill?: 'fill' | 'no-fill';
 	imports?: 'include' | 'style-only';
 	mergeNth?: 'merge' | 'no-merge';
+	sanitize?: 'all' | 'imports' | 'off';
 }
 
 const parse = createParser({ syntax: 'progressive' });
 
 class Rule {
-	rule;
-	selectorAst;
+	rule: CSSStyleRule;
+	sanitize: boolean;
+	selectorAst: AstSelector;
 
-	constructor (rule: CSSStyleRule) {
+	constructor (rule: CSSStyleRule, sanitize = false) {
 		this.rule = rule;
+		this.sanitize = sanitize;
 		this.selectorAst = parse(rule.selectorText);
 	}
 }
@@ -47,12 +50,12 @@ export async function cssToHtml (css: CSSRuleList | string, options: Options = {
 	const rules = new Array<Rule>();
 	const importSet = new Set<string>();
 
-	async function parseRules (source: CSSRuleList, urlBase: string): Promise<void> {
+	async function parseRules (source: CSSRuleList, urlBase: string, sanitize?: boolean): Promise<void> {
 		let seenStyleRule = false;
 		for (const rule of Object.values(source!)) {
 			if (rule instanceof CSSStyleRule) {
 				seenStyleRule = true;
-				rules.push(new Rule(rule));
+				rules.push(new Rule(rule, sanitize));
 			}
 			// Fetch the content of imported stylesheets.
 			else if (rule instanceof CSSImportRule && !seenStyleRule && options.imports === 'include') {
@@ -63,23 +66,23 @@ export async function cssToHtml (css: CSSRuleList | string, options: Options = {
 					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);
+					if (importedRule) await parseRules(importedRule, url.href, options.sanitize === 'imports');
 				}
 			}
 		}
 	}
 	await parseRules(styleRules, window.location.href);
 
 	// Populate the DOM.
-	for (const { rule, selectorAst } of rules) {
+	for (const { rule, sanitize, 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);
+				const descriptor = new Descriptor(next, undefined, sanitize);
 				if (descriptor.invalid) {
 					invalidNest = true;
 					next = undefined;
@@ -180,5 +183,13 @@ export async function cssToHtml (css: CSSRuleList | string, options: Options = {
 		}
 	}
 
+	if (options.sanitize !== 'off' && options.sanitize !== 'imports') {
+		const cleanHtml = sanitizeElement(output);
+		if (cleanHtml instanceof HTMLBodyElement) return cleanHtml;
+		const body = document.createElement('body');
+		body.append(cleanHtml);
+		return body;
+	}
+
 	return output;
 }

src/Generator.ts

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 /**
  * Create a CSS Object Model from a string of CSS.
  * @param css The CSS string.
@@ -80,3 +82,16 @@ export function replaceTextNode (element: HTMLElement | Element, value: string):
         element.append(value);
     }
 }
+
+/**
+ * Sanitize a given HTML element with DOMPurify.
+ * @param element The element to sanitize.
+ * @returns A sanitized copy of the given element.
+ */
+export function sanitizeElement (element: HTMLElement): HTMLElement {
+    const sanitizedElement = DOMPurify.sanitize(element, { RETURN_DOM: true });
+    if (sanitizedElement instanceof HTMLBodyElement && !(element instanceof HTMLBodyElement)) {
+        return sanitizedElement.firstElementChild as HTMLElement;
+    }
+    return sanitizedElement;
+}

src/Utility.ts

@@ -0,0 +1,3 @@
+img.dangerous[onload="console.log('danger')"] {
+	content: 'image.png';
+}