Mermaid version 11.8.0 introduces several notable changes compared to the previous stable release, 11.7.0. Primarily, the core parsing capabilities have been enhanced, with @mermaid-js/parser being updated from version 0.5.0 to 0.6.0. This update likely includes improvements in syntax handling, bug fixes, and potentially new language features for defining diagrams.
Developers should be aware of this parser update, as it could affect how their existing Mermaid diagrams are interpreted, potentially requiring minor adjustments. The dependencies and devDependencies sections reveal other subtle yet crucial differences. While most dependency versions remain consistent, there are a few adjustments in the devDependencies like chokidar. The core visualization dependencies like d3, cytoscape, and roughjs remain unchanged, suggesting a focus on refining existing functionalities rather than introducing major new graphical paradigms.
Furthermore, the dist section shows an increase in both fileCount from 734 to 769 and unpackedSize from 64314303 to 64941155 . This indicates that the newer version includes more files and a larger overall footprint, hinting at added features, enhanced documentation, or more comprehensive testing suites. The updated release date also confirms it's a newer version. Developers considering upgrading to 11.8.0 should prioritize testing their existing diagrams to ensure compatibility with the updated parser and assess the impact of the increased package size on their project's build and deployment processes.
All the vulnerabilities related to the version 11.8.0 of the package
Mermaid improperly sanitizes sequence diagram labels leading to XSS
In the default configuration of mermaid 11.9.0, user supplied input for sequence diagram labels is passed to innerHTML during calculation of element size, causing XSS.
Sequence diagram node labels with KaTeX delimiters are passed through calculateMathMLDimensions. This method passes the full label to innerHTML which allows allows malicious users to inject arbitrary HTML and cause XSS when mermaid-js is used in it's default configuration (with KaTeX support enabled).
The vulnerability lies here:
export const calculateMathMLDimensions = async (text: string, config: MermaidConfig) => {
text = await renderKatex(text, config);
const divElem = document.createElement('div');
divElem.innerHTML = text; // XSS sink, text has not been sanitized.
divElem.id = 'katex-temp';
divElem.style.visibility = 'hidden';
divElem.style.position = 'absolute';
divElem.style.top = '0';
const body = document.querySelector('body');
body?.insertAdjacentElement('beforeend', divElem);
const dim = { width: divElem.clientWidth, height: divElem.clientHeight };
divElem.remove();
return dim;
};
The calculateMathMLDimensions method was introduced in 5c69e5fdb004a6d0a2abe97e23d26e223a059832 two years ago, which was released in Mermaid 10.9.0.
Render the following diagram and observe the modified DOM.
sequenceDiagram
participant A as Alice<img src="x" onerror="document.write(`xss on ${document.domain}`)">$$\\text{Alice}$$
A->>John: Hello John, how are you?
Alice-)John: See you later!
Here is a PoC on mermaid.live: https://mermaid.live/edit#pako:eNpVUMtOwzAQ_BWzyoFKaRTyaFILiio4IK7ckA-1km1iKbaLY6spUf4dJ0AF68uOZ2dm7REqXSNQ6PHDoarwWfDGcMkUudaJGysqceLKkj3hPdl3osJ7IRvSm-qBwcCAaIXGaONRrSsnUdnobITF28PQ954lwXglai25UNNhxWAXBMyXxcGOi-3kL_5k79e73atuFSUv2HWazH1IWn0m3CC5aPf4b3p2WK--BW-4DJCOWzQ3TM0HQmiMqIFa4zAEicZv4iGMsw0D26JEBtS3NR656ywDpiYv869_11r-Ko12TQv0yLveI3eqfcjP111HUNVonrRTFuhdsVgAHWEAmuRxlG7SuEzKMi-yJAnhAjTLIk_EcbFJtuk2y9MphM8lM47KIp--AOZghtU
XSS on all sites that use mermaid and render user supplied diagrams without further sanitization.
The value of the text argument for the calculateMathMLDimensions method needs to be sanitized before getting passed on to innerHTML.
Mermaid does not properly sanitize architecture diagram iconText leading to XSS
In the default configuration of mermaid 11.9.0, user supplied input for architecture diagram icons is passed to the d3 html() method, creating a sink for cross site scripting.
Architecture diagram service iconText values are passed to the d3 html() method, allowing malicious users to inject arbitrary HTML and cause XSS when mermaid-js is used in it's default configuration.
The vulnerability lies here:
export const drawServices = async function (
db: ArchitectureDB,
elem: D3Element,
services: ArchitectureService[]
): Promise<number> {
for (const service of services) {
/** ... **/
} else if (service.iconText) {
bkgElem.html(
`<g>${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
);
const textElemContainer = bkgElem.append('g');
const fo = textElemContainer
.append('foreignObject')
.attr('width', iconSize)
.attr('height', iconSize);
const divElem = fo
.append('div')
.attr('class', 'node-icon-text')
.attr('style', `height: ${iconSize}px;`)
.append('div')
.html(service.iconText); // <- iconText passed into innerHTML
/** ... **/
};
};
This issue was introduced with 734bde38777c9190a5a72e96421c83424442d4e4, around 15 months ago, which was released in v11.1.0.
Render the following diagram and observe the modified DOM.
architecture-beta
group api(cloud)[API]
service db "<img src=x onerror=\"document.write(`xss on ${document.domain}`)\">" [Database] in api
Here is a PoC on mermaid.live: https://mermaid.live/edit#pako:eNo9T8FOwzAM_ZXI4rBJpWrpRtuIISF24caZZdKyxOsiLUnlJjCo-u9kQ8wX-_n5-dkjKK8ROEhSRxNQhUh4v8cghWMpOvKxZ7I3M3XyUc83L-9v2z9qQPo0CpneMwFPxnZsILU6M--QyNNKCAHaq2jRhfyL0vLZ7jwMiWd3443Q3krjpt38Mv4sgG3WMsi9HHDLjLs4CwcZdGQ08EARM7BISZMgjJdLBIQjWhTAU6nxIOMpCBBuSrJeug_v7b8yPdMdgR_kaUgo9loGXBvZkbS3LqHTSK8-ugC8LMrrEuAjnIEvlnlVL9q6rZu6Lh-rRQbfwKuyyZuybcvqIaWiqKcMfq6uRd7Uy-kXhYFzcA
XSS on all sites that use mermaid and render user supplied diagrams without further sanitization.
Sanitize the value of iconText before passing it to html().