Summary
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.
Details
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.
PoC
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
Impact
XSS on all sites that use mermaid and render user supplied diagrams without further sanitization.
Remediation
Sanitize the value of iconText
before passing it to html()
.
References
Summary
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.Details
Architecture diagram service
iconText
values are passed to the d3html()
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:
This issue was introduced with 734bde38777c9190a5a72e96421c83424442d4e4, around 15 months ago, which was released in v11.1.0.
PoC
Render the following diagram and observe the modified DOM.
Here is a PoC on mermaid.live: https://mermaid.live/edit#pako:eNo9T8FOwzAM_ZXI4rBJpWrpRtuIISF24caZZdKyxOsiLUnlJjCo-u9kQ8wX-_n5-dkjKK8ROEhSRxNQhUh4v8cghWMpOvKxZ7I3M3XyUc83L-9v2z9qQPo0CpneMwFPxnZsILU6M--QyNNKCAHaq2jRhfyL0vLZ7jwMiWd3443Q3krjpt38Mv4sgG3WMsi9HHDLjLs4CwcZdGQ08EARM7BISZMgjJdLBIQjWhTAU6nxIOMpCBBuSrJeug_v7b8yPdMdgR_kaUgo9loGXBvZkbS3LqHTSK8-ugC8LMrrEuAjnIEvlnlVL9q6rZu6Lh-rRQbfwKuyyZuybcvqIaWiqKcMfq6uRd7Uy-kXhYFzcA
Impact
XSS on all sites that use mermaid and render user supplied diagrams without further sanitization.
Remediation
Sanitize the value of
iconText
before passing it tohtml()
.References