fix: Use DOMPurify to sanitize HTML content

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.changeset/tricky-lions-behave.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Correct tooltip placement to appear near hovered element

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.3",
+    "@argos-ci/cypress": "^6.1.1",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
     "@cspell/eslint-plugin": "^8.19.4",

packages/mermaid/src/diagrams/class/classDb.ts

@@ -1,4 +1,4 @@
-import { select, type Selection } from 'd3';
+import { select } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import common from '../common/common.js';
@@ -12,6 +12,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
+import { createTooltip } from '../common/svgDrawCommon.js';
 import { ClassMember } from './classTypes.js';
 import type {
   ClassRelation,
@@ -25,6 +26,7 @@ import type {
 } from './classTypes.js';
 import type { Node, Edge } from '../../rendering-util/types.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
+import DOMPurify from 'dompurify';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 let classCounter = 0;
@@ -473,43 +475,45 @@ export class ClassDB implements DiagramDB {
     LOLLIPOP: 4,
   };
 
+  // Utility function to escape HTML meta-characters
+  private escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
   private readonly setupToolTips = (element: Element) => {
-    let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
-      select('.mermaidTooltip');
-    // @ts-expect-error - Incorrect types
-    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-      tooltipElem = select('body')
-        .append('div')
-        .attr('class', 'mermaidTooltip')
-        .style('opacity', 0);
-    }
+    const tooltipElem = createTooltip();
 
     const svg = select(element).select('svg');
 
-    const nodes = svg.selectAll('g.node');
+    const nodes = svg.selectAll('g').filter(function () {
+      return select(this).attr('title') !== null;
+    });
+
     nodes
       .on('mouseover', (event: MouseEvent) => {
         const el = select(event.currentTarget as HTMLElement);
         const title = el.attr('title');
-        // Don't try to draw a tooltip if no data is provided
-        if (title === null) {
+        if (!title) {
           return;
         }
-        // @ts-ignore - getBoundingClientRect is not part of the d3 type definition
-        const rect = this.getBoundingClientRect();
 
+        const rect = (event.currentTarget as Element).getBoundingClientRect();
         tooltipElem.transition().duration(200).style('opacity', '.9');
         tooltipElem
-          .text(el.attr('title'))
-          .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-          .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
-        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
+          .html(DOMPurify.sanitize(title))
+          .style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
+          .style('top', `${window.scrollY + rect.bottom + 4}px`);
+
         el.classed('hover', true);
       })
       .on('mouseout', (event: MouseEvent) => {
         tooltipElem.transition().duration(500).style('opacity', 0);
-        const el = select(event.currentTarget as HTMLElement);
-        el.classed('hover', false);
+        select(event.currentTarget as HTMLElement).classed('hover', false);
       });
   };
 

packages/mermaid/src/diagrams/common/svgDrawCommon.ts

@@ -1,4 +1,5 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
+import { select } from 'd3';
 import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { lineBreakRegex } from './common.js';
 import type {
@@ -135,3 +136,24 @@ export const getTextObj = (): TextObject => {
   };
   return testObject;
 };
+
+export const createTooltip = () => {
+  let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
+  if (tooltipElem.empty()) {
+    tooltipElem = select('body')
+      .append('div')
+      .attr('class', 'mermaidTooltip')
+      .style('opacity', 0)
+      .style('position', 'absolute')
+      .style('text-align', 'center')
+      .style('max-width', '200px')
+      .style('padding', '2px')
+      .style('font-size', '12px')
+      .style('background', '#ffffde')
+      .style('border', '1px solid #333')
+      .style('border-radius', '2px')
+      .style('pointer-events', 'none')
+      .style('z-index', '100');
+  }
+  return tooltipElem;
+};

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -17,6 +17,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
+import { createTooltip } from '../common/svgDrawCommon.js';
 import type {
   FlowClass,
   FlowEdge,
@@ -26,7 +27,7 @@ import type {
   FlowVertex,
   FlowVertexTypeParam,
 } from './types.js';
-
+import DOMPurify from 'dompurify';
 interface LinkData {
   id: string;
 }
@@ -574,15 +575,7 @@ You have to call mermaid.initialize.`
   }
 
   private setupToolTips(element: Element) {
-    let tooltipElem = select('.mermaidTooltip');
-    // @ts-ignore TODO: fix this
-    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
-      // @ts-ignore TODO: fix this
-      tooltipElem = select('body')
-        .append('div')
-        .attr('class', 'mermaidTooltip')
-        .style('opacity', 0);
-    }
+    const tooltipElem = createTooltip();
 
     const svg = select(element).select('svg');
 
@@ -603,7 +596,7 @@ You have to call mermaid.initialize.`
           .text(el.attr('title'))
           .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
           .style('top', window.scrollY + rect.bottom + 'px');
-        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
+        tooltipElem.html(DOMPurify.sanitize(title));
         el.classed('hover', true);
       })
       .on('mouseout', (e: MouseEvent) => {

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -27,53 +27,6 @@ import { log } from '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-/**
- * Apply absolute note positioning after dagre layout
- * This fixes the issue where TB and LR directions position notes differently
- * by making note positioning truly absolute
- */
-const positionNotes = (graph) => {
-  const noteStatePairs = [];
-
-  graph.nodes().forEach((nodeId) => {
-    const node = graph.node(nodeId);
-    if (node.position && node.shape === 'note') {
-      const edges = graph.nodeEdges(nodeId);
-
-      for (const edge of edges) {
-        const otherNodeId = edge.v === nodeId ? edge.w : edge.v;
-        const otherNode = graph.node(otherNodeId);
-
-        if (otherNode && otherNode.shape !== 'note' && otherNode.shape !== 'noteGroup') {
-          noteStatePairs.push({
-            noteId: nodeId,
-            noteNode: node,
-            stateId: otherNodeId,
-            stateNode: otherNode,
-            position: node.position,
-          });
-        }
-      }
-    }
-  });
-
-  noteStatePairs.forEach(({ noteNode, stateNode, position }) => {
-    const spacing = 60;
-
-    let noteX = noteNode.x;
-    let noteY = stateNode.y;
-
-    if (position === 'right of') {
-      noteX = stateNode.x + stateNode.width / 2 + spacing + noteNode.width / 2;
-    } else if (position === 'left of') {
-      noteX = stateNode.x - stateNode.width / 2 - spacing - noteNode.width / 2;
-    }
-
-    noteNode.x = noteX;
-    noteNode.y = noteY;
-  });
-};
-
 const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
   log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
@@ -211,9 +164,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
 
   dagreLayout(graph);
 
-  // Apply absolute note positioning after dagre layout
-  positionNotes(graph);
-
   log.info('Graph after layout:', JSON.stringify(graphlibJson.write(graph)));
   // Move the nodes to the correct place
   let diff = 0;

pnpm-lock.yaml

@@ -17,8 +17,8 @@ importers:
         specifier: ^3.55.2
         version: 3.55.2(encoding@0.1.13)(typescript@5.7.3)
       '@argos-ci/cypress':
-        specifier: ^6.1.3
-        version: 6.1.3(cypress@14.5.4)
+        specifier: ^6.1.1
+        version: 6.1.1(cypress@14.5.4)
       '@changesets/changelog-github':
         specifier: ^0.5.1
         version: 0.5.1(encoding@0.1.13)
@@ -793,26 +793,26 @@ packages:
     resolution: {integrity: sha512-8mBaNNJ0zUBlb09ycc8aFTKajoqEu+E7M7kdV1IENIwuVOI3ecM6x9vr4ptWQz0LTnel7M+L3NPqAGJqoQ3AKA==}
     engines: {node: '>=12.13.0'}
 
-  '@argos-ci/api-client@0.12.0':
-    resolution: {integrity: sha512-WfhI+StLJKIKERWQaIm7Kv1/k+YO/CYIp3djDVhZIU6mv/8yalyNXHnkRC6ofq1kPpmRvoag1KW79/C2WsB4Ag==}
+  '@argos-ci/api-client@0.11.0':
+    resolution: {integrity: sha512-mv7LWrJfEDjjs+CmAJaM1GIexpb3A8TwuyTUCTKgDp/SHdbU0uF8uC6lV4P/mfeGIvBYZzIRKq/frd+IETlC2g==}
     engines: {node: '>=20.0.0'}
 
   '@argos-ci/browser@5.0.0':
     resolution: {integrity: sha512-SKAD7EXoLX4u50dzTIT/ABnpD284+DnBfoJM0ZrTIav2eiiVJyknNKSznF5w118lYGnYvugTXbKMnukGPzJeOA==}
     engines: {node: '>=20.0.0'}
 
-  '@argos-ci/core@4.2.0':
-    resolution: {integrity: sha512-3RNyBZ84pYfQ8dn/Ivv5ls2x2rgqFuh8wA8e4ugggA5lx2dE7a6yghJw8cPzud+zbHrpOntl/HBM3akh2SXLkw==}
+  '@argos-ci/core@4.1.5':
+    resolution: {integrity: sha512-tPsbnSuHEClkdGLUU/qHTNsMe3kAPBvz0DK0nkv6Z18N0imEbzVg+ggmcTmc2x2yEm7i1V456Z2MLhFvTqXnlw==}
     engines: {node: '>=20.0.0'}
 
-  '@argos-ci/cypress@6.1.3':
-    resolution: {integrity: sha512-JlBabUsksKXH7QT2M47dhBNHRxNwW+GQ1lvBT/mgGaFJX8P/GqLkEEmKolf1YBn28MFemQmjuK4G+z5Pjs3rLg==}
+  '@argos-ci/cypress@6.1.1':
+    resolution: {integrity: sha512-fs6K2o7vEiAjBtQhrB6cp7YG6beYBRI9WyVbAHRVYyhdEic36agAqQ7/q3tx8d+uf7nXjjtZuW7KGUxjBmC9MA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       cypress: ^12.0.0 || ^13.0.0 || ^14.0.0
 
-  '@argos-ci/util@3.1.1':
-    resolution: {integrity: sha512-sGb9PS7yqdVVtxpxRD1Nfter3kaioC4nPPTknVmMSqo2GQKO1gdmjMJtwHY+Nf9FgiMfwpTCnk8Rrf0pjS3Sug==}
+  '@argos-ci/util@3.1.0':
+    resolution: {integrity: sha512-QM0IwJGm9YsRdsvTAskQab9iXpQOTOOLb+h9Yev76L2TzoLZ2tM9QO+pYNNlX9YLK5dYr/H/pBNQ1lWr130Jjw==}
     engines: {node: '>=20.0.0'}
 
   '@asamuzakjp/css-color@3.2.0':
@@ -7603,8 +7603,8 @@ packages:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
 
-  openapi-fetch@0.14.1:
-    resolution: {integrity: sha512-l7RarRHxlEZYjMLd/PR0slfMVse2/vvIAGm75/F7J6MlQ8/b9uUQmUF2kCPrQhJqMXSxmYWObVgeYXbFYzZR+A==}
+  openapi-fetch@0.14.0:
+    resolution: {integrity: sha512-PshIdm1NgdLvb05zp8LqRQMNSKzIlPkyMxYFxwyHR+UlKD4t2nUjkDhNxeRbhRSEd3x5EUNh2w5sJYwkhOH4fg==}
 
   openapi-typescript-helpers@0.0.15:
     resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
@@ -10298,19 +10298,19 @@ snapshots:
 
   '@applitools/utils@1.12.0': {}
 
-  '@argos-ci/api-client@0.12.0':
+  '@argos-ci/api-client@0.11.0':
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
-      openapi-fetch: 0.14.1
+      openapi-fetch: 0.14.0
     transitivePeerDependencies:
       - supports-color
 
   '@argos-ci/browser@5.0.0': {}
 
-  '@argos-ci/core@4.2.0':
+  '@argos-ci/core@4.1.5':
     dependencies:
-      '@argos-ci/api-client': 0.12.0
-      '@argos-ci/util': 3.1.1
+      '@argos-ci/api-client': 0.11.0
+      '@argos-ci/util': 3.1.0
       convict: 6.2.4
       debug: 4.4.3(supports-color@8.1.1)
       fast-glob: 3.3.3
@@ -10319,17 +10319,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@argos-ci/cypress@6.1.3(cypress@14.5.4)':
+  '@argos-ci/cypress@6.1.1(cypress@14.5.4)':
     dependencies:
       '@argos-ci/browser': 5.0.0
-      '@argos-ci/core': 4.2.0
-      '@argos-ci/util': 3.1.1
+      '@argos-ci/core': 4.1.5
+      '@argos-ci/util': 3.1.0
       cypress: 14.5.4
       cypress-wait-until: 3.0.2
     transitivePeerDependencies:
       - supports-color
 
-  '@argos-ci/util@3.1.1': {}
+  '@argos-ci/util@3.1.0': {}
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -18528,7 +18528,7 @@ snapshots:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  openapi-fetch@0.14.1:
+  openapi-fetch@0.14.0:
     dependencies:
       openapi-typescript-helpers: 0.0.15