
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: ts 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, I've not dug into which version of mermaid was first affected. PoC Render the following diagram and observe the modified DOM. architecture-beta …Read More
References
Back to Main