feat(editor): Implement HTML sanitization for Notification and Message components (#4081)

* feat(editor): Implement HTML sanitization when using `dangerouslyUseHTMLString` option of Notification and Message components

* 🐛 Implement mechanism to allow for A href actions from locale strings

* 🐛 Prevent link action default

* ♻️ Use `xss` library instead of `sanitize-html` to handle sanitization

* 🔥 Remove `onLinkClick` functionality of `$showMessage`

packages/editor-ui/src/utils.ts

@@ -1,3 +1,5 @@
+import xss, { friendlyAttrValue } from 'xss';
+
 export const omit = (keyToOmit: string, { [keyToOmit]: _, ...remainder }) => remainder;
 
 export function isObjectLiteral(maybeObject: unknown): maybeObject is { [key: string]: string } {
@@ -12,3 +14,33 @@ export function isJsonKeyObject(item: unknown): item is {
 
 	return Object.keys(item).includes('json');
 }
+
+export function sanitizeHtml(dirtyHtml: string) {
+	const allowedAttributes = ['href','name', 'target', 'title', 'class', 'id'];
+	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small' ];
+
+	const sanitizedHtml = xss(dirtyHtml, {
+		onTagAttr: (tag, name, value) => {
+			if (tag === 'img' && name === 'src') {
+				// Only allow http requests to supported image files from the `static` directory
+				const isImageFile = value.split('#')[0].match(/\.(jpeg|jpg|gif|png|webp)$/) !== null;
+				const isStaticImageFile = isImageFile && value.startsWith('/static/');
+				if (!value.startsWith('https://') && !isStaticImageFile) {
+					return '';
+				}
+			}
+
+			// Allow `allowedAttributes` and all `data-*` attributes
+			if(allowedAttributes.includes(name) || name.startsWith('data-')) return `${name}="${friendlyAttrValue(value)}"`;
+
+			return;
+			// Return nothing, means keep the default handling measure
+		},
+		onTag: (tag) => {
+			if(!allowedTags.includes(tag)) return '';
+			return;
+		},
+	});
+
+	return sanitizedHtml;
+}