HTML sanitizing added

js/markdown.js

@@ -1,6 +1,3 @@
-// FIXME: Strikethrough
-// FIXME: Modifiers not applying
-
 class MDTokenType {
 	static Text = new MDTokenType('Text');
 	static Whitespace = new MDTokenType('Whitespace');
@@ -614,6 +611,9 @@ class MDState {
 	 */
 	#referenceToTitle = {};
 
+	/** @type {MDHTMLFilter} */
+	tagFilter;
+
 	static #textWhitespaceRegex = /^(\s*)(?:(\S|\S.*\S)(\s*?))?$/; // 1=leading WS, 2=text, 3=trailing WS
 
 	/**
@@ -627,12 +627,14 @@ class MDState {
 		config=null,
 		readersByBlockPriority=null,
 		readersByTokenPriority=null,
-		readersBySubstitutePriority=null) {
+		readersBySubstitutePriority=null,
+		tagFilter=null) {
 		this.#lines = lines;
 		this.config = config;
 		this.#readersByBlockPriority = readersByBlockPriority
 		this.#readersByTokenPriority = readersByTokenPriority
 		this.#readersBySubstitutePriority = readersBySubstitutePriority
+		this.tagFilter = tagFilter;
 	}
 
 	/**
@@ -839,11 +841,13 @@ class MDState {
 
 		// Convert any remaining tokens to nodes, apply CSS modifiers.
 		var lastNode = null;
+		const me = this;
 		nodes = nodes.map(function(node) {
 			if (node instanceof MDToken) {
 				/** @type {MDToken} */
 				const token = node;
 				if (token.type == MDTokenType.Modifier && lastNode) {
+					me.root.tagFilter.scrubModifier(token.modifier);
 					token.modifier.applyTo(lastNode);
 					lastNode = null;
 					return new MDTextNode('');
@@ -2282,6 +2286,8 @@ class MDHTMLTagReader extends MDReader {
 	readToken(state, line) {
 		const tag = MDHTMLTag.fromLineStart(line)
 		if (tag === null) return null;
+		if (!state.root.tagFilter.isValidTagName(tag.tagName)) return null;
+		state.root.tagFilter.scrubTag(tag);
 		return new MDToken(tag.original, MDTokenType.HTMLTag, null, null, tag)
 	}
 
@@ -3035,6 +3041,348 @@ class MDHTMLTagNode extends MDInlineNode {
 // -- Other -----------------------------------------------------------------
 
 
+/**
+ * Helps to reject unapproved HTML, tag attributes, and CSS.
+ */
+class MDHTMLFilter {
+	/**
+	 * Mapping of permitted lowercase tag names to objects containing allowable
+	 * attributes for those tags. Does not need to include those attributes
+	 * defined in `allowableGlobalAttributes`.
+	 *
+	 * Values are objects with allowable lowercase attribute names mapped to
+	 * allowable value patterns. A `*` means any value is acceptable. Multiple
+	 * allowable values can be joined together with `|`. These special symbols
+	 * represent certain kinds of values and can be used in combination or in
+	 * place of literal values.
+	 *
+	 * - `{classlist}`: A list of legal CSS classnames, separated by spaces
+	 * - `{int}`: An integer
+	 * - `{none}`: No value (an attribute with no `=` or value, like `checked`)
+	 * - `{style}`: One or more CSS declarations, separated by semicolons (simple
+	 *   `key: value;` syntax only)
+	 * - `{url}`: A URL
+	 * @type {object}
+	 */
+	allowableTags = {
+		'address': {
+			'cite': '{url}',
+		},
+		'h1': {},
+		'h2': {},
+		'h3': {},
+		'h4': {},
+		'h5': {},
+		'h6': {},
+		'blockquote': {},
+		'dl': {},
+		'dt': {},
+		'dd': {},
+		'div': {},
+		'hr': {},
+		'ul': {},
+		'ol': {
+			'start': '{int}',
+			'type': 'a|A|i|I|1',
+		},
+		'li': {
+			'value': '{int}',
+		},
+		'p': {},
+		'pre': {},
+		'table': {},
+		'thead': {},
+		'tbody': {},
+		'tfoot': {},
+		'tr': {},
+		'td': {},
+		'th': {},
+		'a': {
+			'href': '{url}',
+			'target': '*',
+		},
+		'abbr': {},
+		'b': {},
+		'br': {},
+		'cite': {},
+		'code': {},
+		'data': {
+			'value': '*',
+		},
+		'dfn': {},
+		'em': {},
+		'i': {},
+		'kbd': {},
+		'mark': {},
+		'q': {
+			'cite': '{url}',
+		},
+		's': {},
+		'samp': {},
+		'small': {},
+		'span': {},
+		'strong': {},
+		'sub': {},
+		'sup': {},
+		'time': {
+			'datetime': '*',
+		},
+		'u': {},
+		'var': {},
+		'wbr': {},
+		'img': {
+			'alt': '*',
+			'href': '{url}',
+		},
+		'figure': {},
+		'figcaption': {},
+		'del': {},
+		'ins': {},
+		'details': {},
+		'summary': {},
+	};
+
+	/**
+	 * Mapping of allowable lowercase global attributes to their permitted
+	 * values. Uses same value pattern syntax as described in `allowableTags`.
+	 * @type {object}
+	 */
+	allowableGlobalAttributes = {
+		'class': '{classlist}',
+		'data-*': '*',
+		'dir': 'ltr|rtl|auto',
+		'id': '*',
+		'lang': '*',
+		'style': '{style}',
+		'title': '*',
+		'translate': 'yes|no|{none}',
+	};
+
+	/**
+	 * Mapping of allowable CSS style names to their allowable value patterns.
+	 * @type {object}
+	 */
+	allowableStyleKeys = {
+		'background-color': '{color}',
+		'color': '{color}',
+	};
+
+	/**
+	 * Scrubs all forbidden attributes from an HTML tag.
+	 *
+	 * @param {MDHTMLTag} tag - HTML tag
+	 */
+	scrubTag(tag) {
+		for (const name of Object.keys(tag.attributes)) {
+			if (!this.isValidAttributeName(tag.tagName, name)) {
+				delete tag.attributes[name];
+			}
+			if (!this.isValidAttributeValue(tag.tagName, name, tag.attributes[name])) {
+				delete tag.attributes[name];
+			}
+		}
+	}
+
+	/**
+	 * Scrubs all forbidden attributes from an HTML modifier.
+	 *
+	 * @param {MDTagModifier} modifier
+	 * @param {string|null} tagName - HTML tag name, if known, otherwise only
+	 *   global attributes will be permitted
+	 */
+	scrubModifier(modifier, tagName) {
+		if (modifier.cssClasses.length > 0) {
+			const classList = modifier.cssClasses.join(' ');
+			if (!this.isValidAttributeValue(tagName, 'class', classList)) {
+				modifier.cssClasses = [];
+			}
+		}
+		if (modifier.cssId !== null) {
+			if (!this.isValidAttributeValue(tagName, 'id', modifier.cssId)) {
+				modifier.cssId = null;
+			}
+		}
+		if (!this.isValidAttributeName(tagName, 'style')) {
+			modifier.cssStyles = {};
+		} else {
+			for (const key of Object.keys(modifier.cssStyles)) {
+				const val = modifier.cssStyles[key];
+				if (!this.isValidStyleValue(key, val)) {
+					delete modifier.cssStyles[key];
+				}
+			}
+		}
+		for (const key of Object.keys(modifier.attributes)) {
+			const val = modifier.attributes[key];
+			if (!this.isValidAttributeValue(tagName, key, val)) {
+				delete modifier.attributes[key];
+			}
+		}
+	}
+
+	/**
+	 * Tests if an HTML tag name is permitted.
+	 *
+	 * @param {string} tagName
+	 * @returns {boolean}
+	 */
+	isValidTagName(tagName) {
+		return this.allowableTags[tagName.toLowerCase()] !== undefined;
+	}
+
+	/**
+	 * Tests if an HTML attribute name is permitted.
+	 *
+	 * @param {string|null} tagName - HTML tag name or null to only check global
+	 *   attributes
+	 * @param {string} attributeName - attribute name
+	 * @returns {boolean}
+	 */
+	isValidAttributeName(tagName, attributeName) {
+		const lcAttributeName = attributeName.toLowerCase();
+		if (this.allowableGlobalAttributes[lcAttributeName] !== undefined) {
+			return true;
+		}
+		for (const pattern in this.allowableGlobalAttributes) {
+			if (pattern.endsWith('*') && lcAttributeName.startsWith(pattern.substring(0, pattern.length - 1))) {
+				return true;
+			}
+		}
+		if (tagName === null) return false;
+		const lcTagName = tagName.toLowerCase();
+		const tagAttributes = this.allowableTags[lcTagName];
+		if (tagAttributes) {
+			return tagAttributes[lcAttributeName] !== undefined;
+		}
+		return false;
+	}
+
+	/**
+	 * Tests if an attribute value is allowable.
+	 *
+	 * @param {string|null} tagName
+	 * @param {string} attributeName
+	 * @param {string} attributeValue
+	 * @returns {boolean}
+	 */
+	isValidAttributeValue(tagName, attributeName, attributeValue) {
+		const lcAttributeName = attributeName.toLowerCase();
+		const globalPattern = this.allowableGlobalAttributes[attributeName.toLowerCase()];
+		if (globalPattern !== undefined) {
+			return this.#attributeValueMatchesPattern(attributeValue, globalPattern);
+		}
+		for (const namePattern in this.allowableGlobalAttributes) {
+			if (namePattern.endsWith('*') && lcAttributeName.startsWith(namePattern.substring(0, namePattern.length - 1))) {
+				return this.#attributeValueMatchesPattern(attributeValue, this.allowableGlobalAttributes[namePattern]);
+			}
+		}
+		if (tagName === null) return false;
+		const lcTagName = tagName.toLowerCase();
+		const tagAttributes = this.allowableTags[lcTagName];
+		if (tagAttributes === undefined) return false;
+		const valuePattern = tagAttributes[lcAttributeName];
+		if (valuePattern === undefined) return false;
+		return this.#attributeValueMatchesPattern(attributeValue, valuePattern);
+	}
+
+	static #permissiveURLRegex = /^\S+$/;
+	static #integerRegex = /^[\-]?\d+$/;
+	static #classListRegex = /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*(?:\s+-?[_a-zA-Z]+[_a-zA-Z0-9-]*)*$/;
+
+	/**
+	 * @param {string} value
+	 * @param {string} pattern
+	 * @returns {boolean}
+	 */
+	#attributeValueMatchesPattern(value, pattern) {
+		const options = pattern.split('|');
+		for (const option of options) {
+			switch (option) {
+				case '*':
+					return true;
+				case '{classlist}':
+					if (MDHTMLFilter.#classListRegex.exec(value)) return true;
+					break;
+				case '{int}':
+					if (MDHTMLFilter.#integerRegex.exec(value)) return true;
+					break;
+				case '{none}':
+					if (value === true) return true;
+					break;
+				case '{style}':
+					if (this.isValidStyleDeclaration(value)) return true;
+					break;
+				case '{url}':
+					if (MDHTMLFilter.#permissiveURLRegex.exec(value)) return true;
+					break;
+				default:
+					if (value === option) return true;
+					break;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * Tests if a string of one or more style `key: value;` declarations is
+	 * fully allowable.
+	 *
+	 * @param {string} styles
+	 * @returns {boolean}
+	 */
+	isValidStyleDeclaration(styles) {
+		const settings = styles.split(';');
+		for (const setting of settings) {
+			if (setting.trim().length == 0) continue;
+			const parts = setting.split(':');
+			if (parts.length != 2) return false;
+			const name = parts[0].trim();
+			if (!this.isValidStyleKey(name)) return false;
+			const value = parts[1].trim();
+			if (!this.isValidStyleValue(name, value)) return false;
+		}
+		return true;
+	}
+
+	/**
+	 * Tests if a CSS style key is allowable.
+	 *
+	 * @param {string} key - CSS key
+	 * @returns {boolean}
+	 */
+	isValidStyleKey(key) {
+		return this.allowableStyleKeys[key] !== undefined;
+	}
+
+	/**
+	 * Tests if a CSS style value is allowable.
+	 *
+	 * @param {string} key
+	 * @param {string} value
+	 * @returns {boolean}
+	 */
+	isValidStyleValue(key, value) {
+		const pattern = this.allowableStyleKeys[key];
+		if (pattern === undefined) return false;
+		const options = pattern.split('|');
+		for (const option of options) {
+			switch (option) {
+				case '{color}':
+					if (this.#isValidCSSColor(value)) return true;
+				default:
+					if (value === option) return true;
+			}
+		}
+		return false;
+	}
+
+	static #styleColorRegex = /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$|^[a-zA-Z]+$/i;
+
+	#isValidCSSColor(value) {
+		return MDHTMLFilter.#styleColorRegex.exec(value) !== null;
+	}
+}
+
 class MDHTMLTag {
 	/** @type {string} */
 	original;
@@ -3434,6 +3782,12 @@ class Markdown {
 	 */
 	config;
 
+	/**
+	 * Filter for what non-markdown HTML is permitted. HTML generated as a
+	 * result of markdown is unaffected.
+	 */
+	tagFilter = new MDHTMLFilter();
+
 	#readers;
 
 	/** @type {MDReader[]} */
@@ -3469,7 +3823,8 @@ class Markdown {
 			this.config,
 			this.#readersByBlockPriority,
 			this.#readersByTokenPriority,
-			this.#readersBySubstitutePriority);
+			this.#readersBySubstitutePriority,
+			this.tagFilter);
 		for (const reader of this.#readers) {
 			reader.preProcess(state);
 		}

js/spreadsheet.js

@@ -2889,7 +2889,7 @@ class SpreadsheetCell {
 /**
  * Integration with Markdown. Adding this block reader to a parser will run a
  * post-process step on any tables in the document tree. Must be used with
- * `MDTableBlockReader`. Tables without at least one formula will not be altered.
+ * `MDTableReader`. Tables without at least one formula will not be altered.
  */
 class MDSpreadsheetReader extends MDReader {
 	postProcess(state, nodes) {

testjs.html

@@ -870,8 +870,8 @@
 				}
 
 				test_htmlTags() {
-					let markdown = 'Lorem <strong title="value" foo=\'with " quote\' bar="with \' apostrophe" attr=unquoted checked>ipsum</strong> dolor';
-					let expected = 'Lorem <strong title="value" foo="with &quot; quote" bar="with \' apostrophe" attr="unquoted" checked>ipsum</strong> dolor';
+					let markdown = 'Lorem <strong title=\'with " quote\' id="with \' apostrophe" lang=unquoted translate forbidden="true">ipsum</strong> dolor';
+					let expected = 'Lorem <strong title="with &quot; quote" id="with \' apostrophe" lang="unquoted" translate>ipsum</strong> dolor';
 					let actual = this.md(markdown);
 					this.assertEqual(actual, expected);
 				}