diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index d5a2da794..7a45c9008 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -473,6 +473,16 @@ 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, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + private readonly setupToolTips = (element: Element) => { let tooltipElem = select('.mermaidTooltip'); if (tooltipElem.empty()) { @@ -509,7 +519,7 @@ export class ClassDB implements DiagramDB { const rect = (event.currentTarget as Element).getBoundingClientRect(); tooltipElem.transition().duration(200).style('opacity', '.9'); tooltipElem - .html(title.replace(/<br\/>/g, '
')) + .html(this.escapeHtml(title).replace(/<br\/>/g, '
')) .style('left', `${window.scrollX + rect.left + rect.width / 2}px`) .style('top', `${window.scrollY + rect.bottom + 4}px`);