fix(front): Enable mermaid rendering on reports tab (#618)

## 📝 Description
Introduces some tests for reports tab, allows class attribute so
`.mermaid` class is preserved and `mermaid-js` can render elements.
`mermaid` set to render into a `iframe` to isolate rendered charts
context.

## ✅ Checklist
- [x] I have tested this change
- [ ] This change requires documentation update

Author: hamir-suspect

front/assets/js/report/index.tsx

@@ -9,7 +9,7 @@ import DOMPurify from 'dompurify';
 import * as toolbox from "js/toolbox";
 import { useEffect, useState } from "preact/hooks";
 
-Mermaid.initialize({ startOnLoad: false, theme: `default`, securityLevel: `strict` });
+Mermaid.initialize({ startOnLoad: false, theme: `default`, securityLevel: `sandbox` });
 const md = MarkdownIt({
   html: true,
   linkify: false,
@@ -83,6 +83,21 @@ const MarkdownBody = (props: { markdown: string, }) => {
   }, [props.markdown]);
 
   const renderedHtml = md.render(props.markdown);
+  // Note: Sanitization is applied here before mermaid rendering. Some mermaid-specific tags
+  // (like those generated by markdown-it-textual-uml) are intentionally not included in ALLOWED_TAGS
+  // because they're processed by Mermaid.run() after sanitization.
+  // Additionally, Mermaid provides two more security layers:
+  // 1. It uses DOMPurify internally for sanitizing diagram content
+  // 2. With securityLevel: 'sandbox' configured above, it renders each diagram in a sandboxed iframe
+  // First, configure DOMPurify hooks
+  DOMPurify.addHook(`afterSanitizeAttributes`, function(node) {
+    // Force all links to open in new tab with security attributes
+    if (`tagName` in node && node.tagName === `A`) {
+      node.setAttribute(`target`, `_blank`);
+      node.setAttribute(`rel`, `noopener noreferrer nofollow`);
+    }
+  });
+
   const sanitizedHtml = DOMPurify.sanitize(renderedHtml, {
     ALLOWED_TAGS: [
       // Basic
@@ -98,17 +113,29 @@ const MarkdownBody = (props: { markdown: string, }) => {
       `mark`,
       `ins`,
       `small`,
-      `abbr`
+      `abbr`,
+      // Links (safe with DOMPurify's URL sanitization)
+      `a`
     ],
     ALLOWED_ATTR: [
       `title`,
-      `open`
+      `open`,
+      `class`,
+      `href`, // DOMPurify by default blocks dangerous protocols (javascript:, data:, vbscript:) and only allows safe ones (http:, https:, mailto:, etc.)
+      `target`,
+      `rel`
     ],
-    FORBID_TAGS: [`a`, `img`, `script`, `object`, `embed`, `iframe`, `link`],
-    FORBID_ATTR: [`href`, `src`, `class`, `id`, `style`, `target`],
-    ALLOW_DATA_ATTR: false
+    // Critical: Keep blocking dangerous tags that were part of the original vulnerability
+    FORBID_TAGS: [`img`, `script`, `object`, `embed`, `iframe`, `link`, `form`, `input`, `style`, `meta`, `base`],
+    FORBID_ATTR: [`src`, `id`, `style`, `onclick`, `onload`, `onerror`, `action`, `method`],
+    ALLOW_DATA_ATTR: false,
+    // Force secure link attributes
+    ADD_ATTR: [`target`, `rel`]
   });
 
+  // Clean up the hook after sanitization to avoid memory leaks
+  DOMPurify.removeHook(`afterSanitizeAttributes`);
+
   return (
     <div
       className="markdown-body"