fix(markdown): preserve SVG tags in code blocks (#707)

# Motivation

The `Markdown` component converts markdown into HTML. For security
reasons, the input is sanitized before transformation.

The initial implementation was introduced
[here](dfinity/nns-dapp#3399) and acknowledged
this edge case.
> It's not possible to use the HTML renderer since the SVG contains
multiple tags.
> One edge case remains unaddressed: if the SVG is inside the `<code>`
tag, it will be rendered with &lt; and &gt; instead of "<" and ">."

We need to address this use case now, as there is a mismatch between how
the proposal is rendered and how it should be rendered:
*
https://nns.ic0.app/proposal/?u=qoctq-giaaa-aaaaa-aaaea-cai&proposal=138188
* https://dashboard.internetcomputer.org/proposal/138188


# Changes

* Do not escape svg's inside code blocks.

# Screenshots

<img width="1013" height="847" alt="Screenshot 2025-08-27 at 15 42 30"
src="https://github.com/user-attachments/assets/0c9ceb4e-1806-491d-bb17-99e68fa9b096"
/>

Author: yhabib

src/lib/utils/markdown.utils.ts

@@ -47,8 +47,42 @@ export const imageToLinkRenderer = (
 
 const escapeHtml = (html: string): string =>
   html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-const escapeSvgs = (html: string): string =>
-  html.replace(/<svg[^>]*>[\s\S]*?<\/svg>/gi, escapeHtml);
+
+const escapeSvgs = (html: string): string => {
+  // Early exit if no SVGs to process
+  if (!/<svg\b[^>]*>/i.test(html)) {
+    return html;
+  }
+  // Early exit if no code blocks - just escape all SVGs
+  if (!/```[\s\S]*?```|`[^`\n]+`/g.test(html)) {
+    return html.replace(/<svg[^>]*>[\s\S]*?<\/svg>/gi, escapeHtml);
+  }
+
+  // Find all code blocks (both inline and fenced) and their positions
+  const codeBlocks: Array<{ start: number; end: number }> = [];
+
+  // Match fenced code blocks (```...```)
+  const fencedCodeRegex = /```[\s\S]*?```/g;
+  let match;
+  while ((match = fencedCodeRegex.exec(html)) !== null) {
+    codeBlocks.push({ start: match.index, end: match.index + match[0].length });
+  }
+
+  // Match inline code (`...`)
+  const inlineCodeRegex = /`[^`\n]+`/g;
+  while ((match = inlineCodeRegex.exec(html)) !== null) {
+    codeBlocks.push({ start: match.index, end: match.index + match[0].length });
+  }
+
+  // Helper function to check if a position is inside any code block
+  const isInsideCodeBlock = (position: number): boolean =>
+    codeBlocks.some((block) => position >= block.start && position < block.end);
+
+  // Replace SVGs that are NOT inside code blocks
+  return html.replace(/<svg[^>]*>[\s\S]*?<\/svg>/gi, (svgMatch, offset) =>
+    isInsideCodeBlock(offset) ? svgMatch : escapeHtml(svgMatch),
+  );
+};
 
 /**
  * Escape <img> tags or convert them to links
@@ -96,7 +130,6 @@ const proposalSummaryRenderer = (marked: Marked): Renderer => {
 export const markdownToHTML = async (text: string): Promise<string> => {
   // Replace the SVG elements in the HTML with their escaped versions to improve security.
   // It's not possible to do it with html renderer because the svg consists of multiple tags.
-  // One edge case is not covered: if the svg is inside the <code> tag, it will be rendered as with &lt; & &gt; instead of "<" & ">"
   const escapedText = escapeSvgs(text);
 
   // The dynamic import cannot be analyzed by Vite. As it is intended, we use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

src/tests/lib/utils/markdown.utils.spec.ts

@@ -150,5 +150,49 @@ describe("markdown.utils", () => {
         `<a href="image.png" target="_blank" rel="noopener noreferrer" type="image/png">title</a>`,
       );
     });
+
+    it("should escape SVGs in regular markdown text", async () => {
+      const markdown = `Here's an SVG: <svg onload="alert('xss')"><circle/></svg>`;
+
+      const result = await markdownToHTML(markdown);
+
+      // SVG should be escaped for security
+      expect(result).toContain("&lt;svg");
+      expect(result).toContain("&lt;/svg&gt;");
+      expect(result).not.toContain("<svg onload=\"alert('xss')\"");
+    });
+
+    it("should escape SVGs in HTML blocks", async () => {
+      const markdown = `<div>
+   <svg xmlns="http://www.w3.org/2000/svg" onload="alert('xss')">
+     <circle cx="50" cy="50" r="40"/>
+   </svg>
+   </div>`;
+
+      const result = await markdownToHTML(markdown);
+
+      // SVG should be escaped even in HTML blocks
+      expect(result).toContain("&lt;svg");
+      expect(result).toContain("&lt;circle");
+    });
+
+    it("should preserve SVGs in code blocks as escaped text", async () => {
+      const markdown = `
+   \`\`\`xml
+   <svg onload="alert('safe-in-code')">
+     <circle cx="50" cy="50" r="40"/>
+   </svg>
+   \`\`\``;
+
+      const result = await markdownToHTML(markdown);
+
+      // SVG in code should be HTML-encoded for display as text
+      expect(result).toContain("&lt;svg");
+      expect(result).toContain("&lt;circle");
+      expect(result).toContain("&lt;/svg&gt;");
+
+      // Should not contain executable SVG
+      expect(result).not.toContain("<svg onload=\"alert('safe-in-code')\"");
+    });
   });
 });