mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-02 11:54:15 +01:00
Compare commits
27 Commits
e6ee145edf
...
sidv/eslin
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e5840277df | ||
|
|
fc2c32603d | ||
|
|
8c7da5af56 | ||
|
|
4b89af3aca | ||
|
|
2aa8330279 | ||
|
|
803e2e14be | ||
|
|
685516a85e | ||
|
|
880f7454a3 | ||
|
|
1f46c9e9bb | ||
|
|
ec7099dc27 | ||
|
|
aeaf626bb5 | ||
|
|
096fbe933e | ||
|
|
e539909e87 | ||
|
|
cfc76ef1cb | ||
|
|
20a18971ea | ||
|
|
e1e36dfcb3 | ||
|
|
e32e80ea7f | ||
|
|
3256807d25 | ||
|
|
0133f1c0c5 | ||
|
|
12e01bdb5c | ||
|
|
a776b4f0ab | ||
|
|
8d79bc9b19 | ||
|
|
ecf7ab4355 | ||
|
|
c61a431e2d | ||
|
|
526b35c602 | ||
|
|
8090580c67 | ||
|
|
9d685178d2 |
7
.changeset/good-weeks-tickle.md
Normal file
7
.changeset/good-weeks-tickle.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: sanitize icon labels and icon SVGs
|
||||
|
||||
Resolves CVE-2025-54880 reported by @fourcube
|
||||
7
.changeset/tidy-weeks-play.md
Normal file
7
.changeset/tidy-weeks-play.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: sanitize KATEX blocks
|
||||
|
||||
Resolves CVE-2025-54881 reported by @fourcube
|
||||
@@ -24,6 +24,7 @@ Doctave
|
||||
DokuWiki
|
||||
dompurify
|
||||
elkjs
|
||||
eslintcache
|
||||
fcose
|
||||
fontawesome
|
||||
Fonticons
|
||||
|
||||
8
.github/workflows/lint.yml
vendored
8
.github/workflows/lint.yml
vendored
@@ -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: |
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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/)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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/)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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/>
|
||||
|
||||
@@ -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());
|
||||
};
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user