Compare commits

..

27 Commits

Author SHA1 Message Date
Sidharth Vinod
e5840277df chore: save eslintcache to speedup linting 2025-08-18 17:36:30 +05:30
Sidharth Vinod
fc2c32603d fix: Config handling
Co-authored-by: Saurabh Gore <saurabh@mermaidchart.com>
2025-08-18 17:26:01 +05:30
autofix-ci[bot]
8c7da5af56 [autofix.ci] apply automated fixes 2025-08-18 11:52:01 +00:00
Sidharth Vinod
4b89af3aca chore: just something to let autofix run 2025-08-18 17:16:32 +05:30
Sidharth Vinod
2aa8330279 Merge commit from fork
fix: Sanitize icons and icon labels
2025-08-18 17:00:40 +05:30
Sidharth Vinod
803e2e14be Merge remote-tracking branch 'upstream/develop' into advisory-fix-1
* upstream/develop: (68 commits)
  fix: sanitize addHtmlLabel in createLabel
  docs(integrations): update Tiki to Tiki Wiki CMS Groupware community in list cms/ecm to avoid confusion
  updated lock file
  #6856 Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration
  chore: Modify changeset
  Update .changeset/strong-laws-confess.md
  fix: fallback to raw text instead of rendering empty boxes when `htmlLabels: false`
  chore: Modify changeset
  [autofix.ci] apply automated fixes
  test: Add E2E test for unsupported markdown
  Create strong-laws-confess.md
  fix: Remove data loss when unsupported markdown is encountered
  Apply suggestion from @sidharthv96
  Add changeset and integration test
  chore: update E2E timings
  Make elk not force model order, but strongly consider it instead
  chore(deps): update peter-evans/create-pull-request digest to 1310d7d
  added changeset
  Fix border style for hand drawn shapes
  test: Verify label is sanitized
  ...
2025-08-18 16:59:44 +05:30
Sidharth Vinod
685516a85e Merge commit from fork
fix: Sanitize KATEX blocks
2025-08-18 16:57:11 +05:30
Sidharth Vinod
880f7454a3 fix: sanitize addHtmlLabel in createLabel
Co-authored-by: Chris Grieger <chris@scolp.de>
2025-08-18 16:53:20 +05:30
Sidharth Vinod
1f46c9e9bb Merge pull request #6861 from Baraka24/docs/6339_update-tiki-in-integrations-community-list
docs(integrations): update Tiki to Tiki Wiki CMS Groupware community in list cms/ecm to avoid confusion
2025-08-16 18:46:37 +00:00
Baraka Kinywa
ec7099dc27 docs(integrations): update Tiki to Tiki Wiki CMS Groupware community in list cms/ecm to avoid confusion 2025-08-16 10:20:05 +02:00
Sidharth Vinod
aeaf626bb5 fix: Sanitize check in unit test 2025-08-08 18:59:47 +05:30
Sidharth Vinod
096fbe933e test: Verify label is sanitized
Co-authored-by: Chris Grieger <chris@scolp.de>
2025-08-08 12:55:18 +05:30
Sidharth Vinod
e539909e87 fix: Label in addHtmlSpan 2025-08-08 12:54:26 +05:30
Sidharth Vinod
cfc76ef1cb fix: sanitize HTML for spans 2025-08-07 22:49:39 +05:30
Sidharth Vinod
20a18971ea chore: Add CVE ID 2025-08-07 13:39:01 +05:30
Sidharth Vinod
e1e36dfcb3 chore: Add CVE ID 2025-08-07 13:37:54 +05:30
Sidharth Vinod
e32e80ea7f chore: Add @fourcube in changeset 2025-08-05 10:17:21 -07:00
Sidharth Vinod
3256807d25 chore: Add @fourcube in changeset 2025-08-05 22:44:58 +05:30
Sidharth Vinod
0133f1c0c5 docs: Add changeset 2025-08-05 22:42:13 +05:30
Sidharth Vinod
12e01bdb5c docs: Add changeset 2025-08-05 22:41:10 +05:30
Sidharth Vinod
a776b4f0ab Merge branch 'advisory-fix-1' of https://github.com/mermaid-js/mermaid-ghsa-7rqq-prvp-x9jh into advisory-fix-1
* 'advisory-fix-1' of https://github.com/mermaid-js/mermaid-ghsa-7rqq-prvp-x9jh:
  fix: Sanitize Katex
2025-08-05 22:37:06 +05:30
Sidharth Vinod
8d79bc9b19 test: check katex sanitization 2025-08-05 22:36:28 +05:30
Sidharth Vinod
ecf7ab4355 fix: Sanitize getIconSVG 2025-08-05 22:33:05 +05:30
Sidharth Vinod
c61a431e2d fix: Sanitize iconText 2025-08-05 22:32:38 +05:30
Sidharth Vinod
526b35c602 test: Architecture XSS 2025-08-05 22:30:45 +05:30
Sidharth Vinod
8090580c67 test: Handle missing bindFunctions 2025-08-05 22:27:21 +05:30
Sidharth Vinod
9d685178d2 fix: Sanitize Katex 2025-08-05 20:44:03 +05:30
22 changed files with 158 additions and 77 deletions

View File

@@ -0,0 +1,7 @@
---
'mermaid': patch
---
fix: sanitize icon labels and icon SVGs
Resolves CVE-2025-54880 reported by @fourcube

View File

@@ -0,0 +1,7 @@
---
'mermaid': patch
---
fix: sanitize KATEX blocks
Resolves CVE-2025-54881 reported by @fourcube

View File

@@ -24,6 +24,7 @@ Doctave
DokuWiki
dompurify
elkjs
eslintcache
fcose
fontawesome
Fonticons

View File

@@ -40,6 +40,14 @@ jobs:
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Setup ESLint cache
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
with:
path: .eslintcache
key: ${{ runner.os }}-eslint-${{ hashFiles('pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-eslint-
- name: Run Linting
shell: bash
run: |

View File

@@ -14,7 +14,7 @@ interface CodeObject {
mermaid: CypressMermaidConfig;
}
const utf8ToB64 = (str: string): string => {
export const utf8ToB64 = (str: string): string => {
return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
};
@@ -22,7 +22,7 @@ const batchId: string =
'mermaid-batch-' +
(Cypress.env('useAppli')
? Date.now().toString()
: Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
: (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
export const mermaidUrl = (
graphStr: string | string[],
@@ -61,9 +61,7 @@ export const imgSnapshotTest = (
sequence: {
...(_options.sequence ?? {}),
actorFontFamily: 'courier',
noteFontFamily: _options.sequence?.noteFontFamily
? _options.sequence.noteFontFamily
: 'courier',
noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
messageFontFamily: 'courier',
},
};

View File

@@ -1,4 +1,4 @@
import { mermaidUrl } from '../../helpers/util.ts';
import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
describe('XSS', () => {
it('should handle xss in tags', () => {
const str =
@@ -141,4 +141,37 @@ describe('XSS', () => {
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize icon labels in architecture diagrams', () => {
const str = JSON.stringify({
code: `architecture-beta
group api(cloud)[API]
service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize katex blocks', () => {
const str = JSON.stringify({
code: `sequenceDiagram
participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
A->>John: Hello John, how are you?`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
it('should sanitize labels', () => {
const str = JSON.stringify({
code: `erDiagram
"<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
`,
});
imgSnapshotTest(utf8ToB64(str), {}, true);
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
});

View File

@@ -1118,7 +1118,7 @@ end
imgSnapshotTest(
`flowchart TB
A(["Start"]) --> n1["Untitled Node"]
A --> n2["Untitled Node"]
A --> n2["Untitled Node"]
`,
{}
);
@@ -1127,7 +1127,7 @@ end
imgSnapshotTest(
`flowchart BT
n2["Untitled Node"] --> n1["Diamond"]
n1@{ shape: diam}
n1@{ shape: diam}
`,
{}
);
@@ -1138,7 +1138,7 @@ end
n2["Untitled Node"] --> n1["Rounded Rectangle"]
n3["Untitled Node"] --> n1
n1@{ shape: rounded}
n3@{ shape: rect}
n3@{ shape: rect}
`,
{}
);

View File

@@ -41,10 +41,6 @@ graph TB
const { svg } = await mermaid.render('d22', value);
console.log(svg);
el.innerHTML = svg;
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script>
</body>
</html>

View File

@@ -182,7 +182,7 @@ const contentLoadedApi = async function () {
for (let i = 0; i < numCodes; i++) {
const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
div.innerHTML = svg;
bindFunctions(div);
bindFunctions?.(div);
}
} else {
const div = document.createElement('div');
@@ -194,7 +194,7 @@ const contentLoadedApi = async function () {
const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
div.innerHTML = svg;
console.log(div.innerHTML);
bindFunctions(div);
bindFunctions?.(div);
}
}
};

View File

@@ -20,14 +20,14 @@
width: 800
nodeAlignment: left
---
sankey
sankey
a,b,8
b,c,8
c,d,8
d,e,8
x,c,4
c,y,4
c,y,4
</pre>
<h2>Energy flow</h2>

View File

@@ -117,7 +117,7 @@ Content Management Systems/Enterprise Content Management
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [Tiki](https://tiki.org)
- [Tiki Wiki CMS Groupware](https://tiki.org)
- [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

View File

@@ -39,7 +39,7 @@ Drawing a pie chart is really simple in mermaid.
**Note:**
> Pie chart values must be **positive numbers greater than zero**.\
> Pie chart values must be **positive numbers greater than zero**.
> **Negative values are not allowed** and will result in an error.
\[pie] \[showData] (OPTIONAL)

View File

@@ -1,9 +1,9 @@
import { select } from 'd3';
import { log } from '../logger.js';
import { getConfig } from '../diagram-api/diagramAPI.js';
import { evaluate } from '../diagrams/common/common.js';
import { decodeEntities } from '../utils.js';
import { evaluate, sanitizeText } from '../diagrams/common/common.js';
import { log } from '../logger.js';
import { replaceIconSubstring } from '../rendering-util/createText.js';
import { decodeEntities } from '../utils.js';
/**
* @param dom
@@ -19,14 +19,14 @@ function applyStyle(dom, styleFn) {
* @param {any} node
* @returns {SVGForeignObjectElement} Node
*/
function addHtmlLabel(node) {
function addHtmlLabel(node, config) {
const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
const div = fo.append('xhtml:div');
const label = node.label;
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
const span = div.append('span');
span.html(label);
span.html(sanitizeText(label, config));
applyStyle(span, node.labelStyle);
span.attr('class', labelClass);
@@ -49,7 +49,8 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
if (typeof vertexText === 'object') {
vertexText = vertexText[0];
}
if (evaluate(getConfig().flowchart.htmlLabels)) {
const config = getConfig();
if (evaluate(config.flowchart.htmlLabels)) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
vertexText = vertexText.replace(/\\n|\n/g, '<br />');
log.debug('vertexText' + vertexText);
@@ -59,7 +60,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
label,
labelStyle: style.replace('fill:', 'color:'),
};
let vertexNode = addHtmlLabel(node);
let vertexNode = addHtmlLabel(node, config);
// vertexNode.parentNode.removeChild(vertexNode);
return vertexNode;
} else {

View File

@@ -3,6 +3,7 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
import { createText } from '../../rendering-util/createText.js';
import { getIconSVG } from '../../rendering-util/icons.js';
import type { D3Element } from '../../types.js';
import { sanitizeText } from '../common/common.js';
import type { ArchitectureDB } from './architectureDb.js';
import { architectureIcons } from './architectureIcons.js';
import {
@@ -271,6 +272,7 @@ export const drawServices = async function (
elem: D3Element,
services: ArchitectureService[]
): Promise<number> {
const config = getConfig();
for (const service of services) {
const serviceElem = elem.append('g');
const iconSize = db.getConfigField('iconSize');
@@ -285,7 +287,7 @@ export const drawServices = async function (
width: iconSize * 1.5,
classes: 'architecture-service-label',
},
getConfig()
config
);
textElem
@@ -320,7 +322,7 @@ export const drawServices = async function (
.attr('class', 'node-icon-text')
.attr('style', `height: ${iconSize}px;`)
.append('div')
.html(service.iconText);
.html(sanitizeText(service.iconText, config));
const fontSize =
parseInt(
window

View File

@@ -311,9 +311,8 @@ export const hasKatex = (text: string): boolean => (text.match(katexRegex)?.leng
* @returns Object containing \{width, height\}
*/
export const calculateMathMLDimensions = async (text: string, config: MermaidConfig) => {
text = await renderKatex(text, config);
const divElem = document.createElement('div');
divElem.innerHTML = text;
divElem.innerHTML = await renderKatexSanitized(text, config);
divElem.id = 'katex-temp';
divElem.style.visibility = 'hidden';
divElem.style.position = 'absolute';
@@ -325,14 +324,7 @@ export const calculateMathMLDimensions = async (text: string, config: MermaidCon
return dim;
};
/**
* Attempts to render and return the KaTeX portion of a string with MathML
*
* @param text - The text to test
* @param config - Configuration for Mermaid
* @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
*/
export const renderKatex = async (text: string, config: MermaidConfig): Promise<string> => {
const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Promise<string> => {
if (!hasKatex(text)) {
return text;
}
@@ -373,6 +365,20 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise<
);
};
/**
* Attempts to render and return the KaTeX portion of a string with MathML
*
* @param text - The text to test
* @param config - Configuration for Mermaid
* @returns String containing MathML if KaTeX is supported, or an error message if it is not and stylesheets aren't present
*/
export const renderKatexSanitized = async (
text: string,
config: MermaidConfig
): Promise<string> => {
return sanitizeText(await renderKatexUnsanitized(text, config), config);
};
export default {
getRows,
sanitizeText,

View File

@@ -1,8 +1,12 @@
import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
import * as svgDrawCommon from '../common/svgDrawCommon.js';
import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
import { sanitizeUrl } from '@braintree/sanitize-url';
import * as configApi from '../../config.js';
import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
import common, {
calculateMathMLDimensions,
hasKatex,
renderKatexSanitized,
} from '../common/common.js';
import * as svgDrawCommon from '../common/svgDrawCommon.js';
export const ACTOR_TYPE_WIDTH = 18 * 2;
const TOP_ACTOR_CLASS = 'actor-top';
@@ -87,13 +91,13 @@ const popupMenuToggle = function (popId) {
export const drawKatex = async function (elem, textData, msgModel = null) {
let textElem = elem.append('foreignObject');
const lines = await renderKatex(textData.text, configApi.getConfig());
const linesSanitized = await renderKatexSanitized(textData.text, configApi.getConfig());
const divElem = textElem
.append('xhtml:div')
.attr('style', 'width: fit-content;')
.attr('xmlns', 'http://www.w3.org/1999/xhtml')
.html(lines);
.html(linesSanitized);
const dim = divElem.node().getBoundingClientRect();
textElem.attr('height', Math.round(dim.height)).attr('width', Math.round(dim.width));
@@ -965,7 +969,7 @@ const _drawTextCandidateFunc = (function () {
.append('div')
.style('text-align', 'center')
.style('vertical-align', 'middle')
.html(await renderKatex(content, configApi.getConfig()));
.html(await renderKatexSanitized(content, configApi.getConfig()));
byTspan(content, s, x, y, width, height, textAttrs, conf);
_setTextAttrs(text, textAttrs);

View File

@@ -112,7 +112,7 @@ Content Management Systems/Enterprise Content Management
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [Tiki](https://tiki.org)
- [Tiki Wiki CMS Groupware](https://tiki.org)
- [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

View File

@@ -26,7 +26,7 @@ Drawing a pie chart is really simple in mermaid.
**Note:**
> Pie chart values must be **positive numbers greater than zero**.
> Pie chart values must be **positive numbers greater than zero**.
> **Negative values are not allowed** and will result in an error.
[pie] [showData] (OPTIONAL)

View File

@@ -1,6 +1,7 @@
import { describe, expect, it } from 'vitest';
import { replaceIconSubstring } from './createText.js';
import { sanitizeText } from '../diagram-api/diagramAPI.js';
import mermaid from '../mermaid.js';
import { replaceIconSubstring } from './createText.js';
describe('replaceIconSubstring', () => {
it('converts FontAwesome icon notations to HTML tags', async () => {
@@ -56,7 +57,7 @@ describe('replaceIconSubstring', () => {
]);
const input = 'Icons galore: fa:fa-bell';
const output = await replaceIconSubstring(input);
const expected = staticBellIconPack.icons.bell.body;
const expected = sanitizeText(staticBellIconPack.icons.bell.body);
expect(output).toContain(expected);
});
});

View File

@@ -2,9 +2,8 @@
// @ts-nocheck TODO: Fix types
import { select } from 'd3';
import type { MermaidConfig } from '../config.type.js';
import { getConfig, sanitizeText } from '../diagram-api/diagramAPI.js';
import type { SVGGroup } from '../diagram-api/types.js';
import common, { hasKatex, renderKatex } from '../diagrams/common/common.js';
import common, { hasKatex, renderKatexSanitized, sanitizeText } from '../diagrams/common/common.js';
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
import { log } from '../logger.js';
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@@ -12,6 +11,7 @@ import { decodeEntities } from '../utils.js';
import { getIconSVG, isIconAvailable } from './icons.js';
import { splitLineToFitWidth } from './splitText.js';
import type { MarkdownLine, MarkdownWord } from './types.js';
import { getConfig } from '../config.js';
function applyStyle(dom, styleFn) {
if (styleFn) {
@@ -19,7 +19,15 @@ function applyStyle(dom, styleFn) {
}
}
async function addHtmlSpan(element, node, width, classes, addBackground = false) {
async function addHtmlSpan(
element,
node,
width,
classes,
addBackground = false,
// TODO: Make config mandatory
config: MermaidConfig = getConfig()
) {
const fo = element.append('foreignObject');
// This is not the final width but used in order to make sure the foreign
// object in firefox gets a width at all. The final width is fetched from the div
@@ -27,13 +35,12 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
fo.attr('height', `${10 * width}px`);
const div = fo.append('xhtml:div');
let label = node.label;
if (node.label && hasKatex(node.label)) {
label = await renderKatex(node.label.replace(common.lineBreakRegex, '\n'), getConfig());
}
const sanitizedLabel = hasKatex(node.label)
? await renderKatexSanitized(node.label.replace(common.lineBreakRegex, '\n'), config)
: sanitizeText(node.label, config);
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
const span = div.append('span');
span.html(label);
span.html(sanitizedLabel);
applyStyle(span, node.labelStyle);
span.attr('class', `${labelClass} ${classes}`);
@@ -56,9 +63,6 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
bbox = div.node().getBoundingClientRect();
}
// fo.style('width', bbox.width);
// fo.style('height', bbox.height);
return fo.node();
}
@@ -181,9 +185,14 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
/**
* Convert fontawesome labels into fontawesome icons by using a regex pattern
* @param text - The raw string to convert
* @param config - Mermaid config
* @returns string with fontawesome icons as svg if the icon is registered otherwise as i tags
*/
export async function replaceIconSubstring(text: string) {
export async function replaceIconSubstring(
text: string,
// TODO: Make config mandatory
config: MermaidConfig = {}
): Promise<string> {
const pendingReplacements: Promise<string>[] = [];
// cspell: disable-next-line
text.replace(/(fa[bklrs]?):fa-([\w-]+)/g, (fullMatch, prefix, iconName) => {
@@ -193,7 +202,7 @@ export async function replaceIconSubstring(text: string) {
if (await isIconAvailable(registeredIconName)) {
return await getIconSVG(registeredIconName, undefined, { class: 'label-icon' });
} else {
return `<i class='${sanitizeText(fullMatch).replace(':', ' ')}'></i>`;
return `<i class='${sanitizeText(fullMatch, config).replace(':', ' ')}'></i>`;
}
})()
);
@@ -236,7 +245,7 @@ export const createText = async (
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
const htmlText = markdownToHTML(text, config);
const decodedReplacedText = await replaceIconSubstring(decodeEntities(htmlText));
const decodedReplacedText = await replaceIconSubstring(decodeEntities(htmlText), config);
//for Katex the text could contain escaped characters, \\relax that should be transformed to \relax
const inputForKatex = text.replace(/\\\\/g, '\\');
@@ -246,7 +255,7 @@ export const createText = async (
label: hasKatex(text) ? inputForKatex : decodedReplacedText,
labelStyle: style.replace('fill:', 'color:'),
};
const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);
const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground, config);
return vertexNode;
} else {
//sometimes the user might add br tags with 1 or more spaces in between, so we need to replace them with <br/>

View File

@@ -1,7 +1,9 @@
import { log } from '../logger.js';
import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types';
import type { IconifyIconCustomisations } from '@iconify/utils';
import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';
import { getConfig } from '../config.js';
import { sanitizeText } from '../diagrams/common/common.js';
import { log } from '../logger.js';
interface AsyncIconLoader {
name: string;
@@ -100,5 +102,5 @@ export const getIconSVG = async (
...renderData.attributes,
...extraAttributes,
});
return svg;
return sanitizeText(svg, getConfig());
};

View File

@@ -1,7 +1,12 @@
import { select } from 'd3';
import { log } from '../../logger.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import common, { evaluate, renderKatex, hasKatex } from '../../diagrams/common/common.js';
import common, {
evaluate,
hasKatex,
renderKatexSanitized,
sanitizeText,
} from '../../diagrams/common/common.js';
import { log } from '../../logger.js';
import { decodeEntities } from '../../utils.js';
/**
@@ -22,20 +27,21 @@ async function addHtmlLabel(node) {
const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
const div = fo.append('xhtml:div');
const config = getConfig();
let label = node.label;
if (node.label && hasKatex(node.label)) {
label = await renderKatex(node.label.replace(common.lineBreakRegex, '\n'), getConfig());
label = await renderKatexSanitized(node.label.replace(common.lineBreakRegex, '\n'), config);
}
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
div.html(
const labelSpan =
'<span class="' +
labelClass +
'" ' +
(node.labelStyle ? 'style="' + node.labelStyle + '"' : '') + // codeql [js/html-constructed-from-input] : false positive
'>' +
label +
'</span>'
);
labelClass +
'" ' +
(node.labelStyle ? 'style="' + node.labelStyle + '"' : '') + // codeql [js/html-constructed-from-input] : false positive
'>' +
label +
'</span>';
div.html(sanitizeText(labelSpan, config));
applyStyle(div, node.labelStyle);
div.style('display', 'inline-block');