[FIX] Issue with special message rendering (#19817)

app/message-attachments/client/renderField.js

@@ -1,6 +1,8 @@
 import { Template } from 'meteor/templating';
 import { Blaze } from 'meteor/blaze';
 
+import { escapeHTML } from '../../../lib/escapeHTML';
+
 const renderers = {};
 
 /**
@@ -49,7 +51,7 @@ Template.renderField.helpers({
 			html = Blaze.toHTMLWithData(Template[renderers[field.type]], { field, message });
 		} else {
 			// consider the value already formatted as html
-			html = field.value;
+			html = escapeHTML(field.value);
 		}
 		return `<div class="${ field.type }">${ html }</div>`;
 	},

lib/escapeHTML.spec.ts

@@ -0,0 +1,19 @@
+import assert from 'assert';
+
+import { describe, it } from 'mocha';
+
+import { escapeHTML } from './escapeHTML';
+
+describe('escapeHTML', () => {
+	it('works', () => {
+		assert.strictEqual(escapeHTML('<div>Blah & "blah" & \'blah\'</div>'), '&lt;div&gt;Blah &amp; &quot;blah&quot; &amp; &#39;blah&#39;&lt;/div&gt;');
+		assert.strictEqual(escapeHTML('&lt;'), '&amp;lt;');
+		assert.strictEqual(escapeHTML(' '), ' ');
+		assert.strictEqual(escapeHTML('¢'), '&cent;');
+		assert.strictEqual(escapeHTML('¢ £ ¥ € © ®'), '&cent; &pound; &yen; &euro; &copy; &reg;');
+		assert.strictEqual(escapeHTML(5 as unknown as string), '5');
+		assert.strictEqual(escapeHTML(''), '');
+		assert.strictEqual(escapeHTML(null as unknown as string), '');
+		assert.strictEqual(escapeHTML(undefined as unknown as string), '');
+	});
+});

lib/escapeHTML.ts

@@ -0,0 +1,27 @@
+const characterToHtmlEntityCode = {
+	'¢': 'cent',
+	'£': 'pound',
+	'¥': 'yen',
+	'€': 'euro',
+	'©': 'copy',
+	'®': 'reg',
+	'<': 'lt',
+	'>': 'gt',
+	'"': 'quot',
+	'&': 'amp',
+	'\'': '#39',
+} as const;
+
+const regex = new RegExp(`[${ Object.keys(characterToHtmlEntityCode).join('') }]`, 'g');
+
+const toString = (object: unknown): string =>
+	(object ? `${ object }` : '');
+
+const isEscapable = (char: string): char is keyof typeof characterToHtmlEntityCode =>
+	char in characterToHtmlEntityCode;
+
+const escapeChar = (char: string): string =>
+	(isEscapable(char) ? `&${ characterToHtmlEntityCode[char] };` : '');
+
+export const escapeHTML = (str: string): string =>
+	toString(str).replace(regex, escapeChar);