refactor: improve sanitizeDescriptionHtml

Author: std-microblock

resources/dist.rc

@@ -17,6 +17,7 @@ import { useAutoDisableNewMods } from '../states';
 import { useGlobalContext } from '../App';
 import { PopupContext, createPopup } from './Popup';
 import { ProgressIndicator } from './Progress';
+import { sanitizeDescriptionHtml } from '../sanitizeDescriptionHtml';
 // @ts-ignore
 import celemodIcon from '../resources/Celemod.png';
 
@@ -239,38 +240,26 @@ export const Mod = memo(
                     useEffect(() => {
                       if (!refContent.current) return;
                       refContent.current.innerHTML = '';
-                      // strip all script execution from the description
-                      const div = document.createElement('div');
-                      div.innerHTML = data?.description ?? '';
-                      // @ts-ignore
-                      for (const script of div.querySelectorAll(
-                        'script, iframe, style, link, meta'
-                      ))
-                        script.remove();
-                      // @ts-ignore
-                      for (const ele of div.querySelectorAll('*')) {
-                        // remove all event listeners
-                        for (const key in ele) {
-                          if (key.startsWith('on')) {
-                            ele[key] = null;
-                          }
-                        }
-                      }
+                      refContent.current.appendChild(
+                        sanitizeDescriptionHtml(data?.description ?? '')
+                      );
+
+                      // Keep external links going through the native opener.
                       // @ts-ignore
-                      for (const a of div.querySelectorAll('a')) {
-                        const url = a.href || a.getAttribute('href');
+                      for (const a of refContent.current.querySelectorAll('a')) {
+                        const url = a.getAttribute('href');
+                        if (!url) continue;
                         a.href = '#';
                         a.onclick = (e: any) => {
                           e.preventDefault();
                           e.stopPropagation();
                           callRemote('open_url', url);
                         };
                       }
+
                       // @ts-ignore
-                      for (const img of div.querySelectorAll('img'))
+                      for (const img of refContent.current.querySelectorAll('img'))
                         img.style.maxWidth = '300px';
-
-                      refContent.current.appendChild(div);
                     }, [data]);
 
                     if (!data)

src/celemod-ui/src/components/ModList.tsx

@@ -0,0 +1,103 @@
+const ALLOWED_DESCRIPTION_TAGS = new Set([
+  'a',
+  'b',
+  'blockquote',
+  'br',
+  'code',
+  'div',
+  'em',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hr',
+  'i',
+  'img',
+  'li',
+  'ol',
+  'p',
+  'pre',
+  'span',
+  'strong',
+  'sub',
+  'sup',
+  'u',
+  'ul',
+]);
+
+const isSafeDescriptionUrl = (url: string, isImage = false) => {
+  const value = url.trim();
+  if (!value) return false;
+  if (value.startsWith('#')) return !isImage;
+  if (value.startsWith('/')) return true;
+  if (value.startsWith('./') || value.startsWith('../')) return true;
+
+  const lower = value.toLowerCase();
+  if (lower.startsWith('http://') || lower.startsWith('https://')) return true;
+  if (!isImage && lower.startsWith('mailto:')) return true;
+
+  return false;
+};
+
+export const sanitizeDescriptionHtml = (html: string) => {
+  const container = document.createElement('div');
+  const fragment = document.createDocumentFragment();
+  container.innerHTML = html;
+
+  const appendSafeNode = (node: Node, parent: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      parent.appendChild(document.createTextNode(node.textContent ?? ''));
+      return;
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+    const source = node as HTMLElement;
+    const tagName = source.tagName.toLowerCase();
+
+    if (!ALLOWED_DESCRIPTION_TAGS.has(tagName)) {
+      for (const child of Array.from(source.childNodes)) {
+        appendSafeNode(child, parent);
+      }
+      return;
+    }
+
+    const safeElement = document.createElement(tagName);
+
+    if (tagName === 'a') {
+      const href = source.getAttribute('href');
+      const title = source.getAttribute('title');
+      if (href && isSafeDescriptionUrl(href)) {
+        safeElement.setAttribute('href', href);
+      }
+      if (title) safeElement.setAttribute('title', title);
+    }
+
+    if (tagName === 'img') {
+      const src = source.getAttribute('src');
+      const alt = source.getAttribute('alt');
+      const title = source.getAttribute('title');
+      if (!src || !isSafeDescriptionUrl(src, true)) return;
+      safeElement.setAttribute('src', src);
+      if (alt) safeElement.setAttribute('alt', alt);
+      if (title) safeElement.setAttribute('title', title);
+    }
+
+    const clazz = source.getAttribute('class');
+    if (clazz) safeElement.setAttribute('class', clazz);
+
+    for (const child of Array.from(source.childNodes)) {
+      appendSafeNode(child, safeElement);
+    }
+
+    parent.appendChild(safeElement);
+  };
+
+  for (const node of Array.from(container.childNodes)) {
+    appendSafeNode(node, fragment);
+  }
+
+  return fragment;
+};