Carbon/src/js/events/message.js

const {ejs} = require("../basic")
const DOMPurify = require("dompurify")
const {resolveMxc} = require("../functions")
const {Event} = require("./event")

const purifier = DOMPurify()

purifier.setConfig({
	ALLOWED_URI_REGEXP: /^mxc:\/\/[a-zA-Z0-9\.]+\/[a-zA-Z0-9]+$/, // As per the spec we only allow mxc uris
	ALLOWED_TAGS: ['font', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'sup', 'sub', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'pre', 'span', 'img'],

	// In case we mess up none of those attributes should read to XSS
	ALLOWED_ATTR: ["data-mx-bg-color", "data-mx-color", "color",
		"name", "target", "href",
		"width", "height", "alt", "title", "src", "data-mx-emoticon",
		"start", "class"],
	//Custom config option that allows the array of attributes for a given tag
	ALLOWED_ATTR_CUSTOM: {
		"FONT": ["data-mx-bg-color", "data-mx-color", "color"],
		"SPAN": ["data-mx-bg-color", "data-mx-color", "color"],
		"A": ["name", "target", "href"],
		"IMG": ["width", "height", "alt", "title", "src", "data-mx-emoticon"],
		"OL": ["start"],
		"CODE": ["class"],
	}
})

//Handle our custom tag 
purifier.addHook("uponSanitizeAttribute", (node, hookevent, config) => {
	//If purifier already rejected an attribute there is no point in checking it
	if (hookevent.keepAttr === false) return;

	const allowed_attributes = config.ALLOWED_ATTR_CUSTOM[node.tagName] || []
	hookevent.keepAttr = allowed_attributes.indexOf(hookevent.attrName) > -1;
})

//Remove bad classes from our code element
purifier.addHook("uponSanitizeElement", (node, hookevent, config) => {
	if (node.tagName != "CODE") return
	node.classList.forEach(c => {
		if (!c.startsWith("language-")) {
			node.classList.remove(c)
		}
	})
	return node
})

purifier.addHook("afterSanitizeAttributes", (node, hookevent, config) => {
	if (node.tagName == "IMG") {
		let src = node.getAttribute("src")
		if (src) src = resolveMxc(src)

		node.setAttribute("src", src)
	} else if (node.tagName == "A") {
		node.setAttribute("rel", "noopener")
	} else if (node.tagName == "FONT" || node.tagName == "SPAN") {
		const color = node.getAttribute("data-mx-color")
		const bgColor = node.getAttribute("data-mx-bg-color")
		if (color) node.style.color = color;
		if (bgColor) node.style.backgroundColor = bgColor;
	}
	return node
})


function sanitize(html) {
	return purifier.sanitize(html)
}

class HTMLMessage extends Event {
	render() {
		super.render()
		let html = this.data.content.formatted_body
		const content = ejs("div")
		html = sanitize(html)
		content.html(html)
		this.child(content)
	}

	static canRender(event) {
		const content = event.content
		return event.type == "m.room.message" && content.msgtype == "m.text" && content.format == "org.matrix.custom.html" && content.formatted_body

	}

	canGroup() {
		return true
	}

}

class TextMessage extends Event {
	render() {
		super.render()
		return this.text(this.data.content.body)
	}

	static canRender(event) {
		return event.type == "m.room.message"
	}

	canGroup() {
		return true
	}
}

module.exports = [HTMLMessage, TextMessage]