fix: Use DOMPurify to sanitize HTML content

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-10-16 11:52:26 +05:30
parent feed9d75bb
commit fcd2791b2d
2 changed files with 4 additions and 3 deletions

View File

@@ -26,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;
@@ -504,7 +505,7 @@ export class ClassDB implements DiagramDB {
const rect = (event.currentTarget as Element).getBoundingClientRect();
tooltipElem.transition().duration(200).style('opacity', '.9');
tooltipElem
.html(this.escapeHtml(title).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`);

View File

@@ -27,7 +27,7 @@ import type {
FlowVertex,
FlowVertexTypeParam,
} from './types.js';
import DOMPurify from 'dompurify';
interface LinkData {
id: string;
}
@@ -596,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) => {