Merge pull request from GHSA-x3vm-38hw-55wf · mermaid-js/mermaid@0ae1bdb · GitHub
Skip to content

Commit 0ae1bdb

Browse files
knsvknsv
authored
Merge pull request from GHSA-x3vm-38hw-55wf
CSS Injection security issue
2 parents 1410bad + 5110e42 commit 0ae1bdb

7 files changed

Lines changed: 155 additions & 4 deletions

File tree

‎cypress/e2e/other/ghsa.spec.js‎

Lines changed: 10 additions & 0 deletions

‎cypress/helpers/util.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,56 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
7070
}
7171
};
7272

73+
export const urlSnapshotTest = (url, _options, api = false, validation) => {
74+
cy.log(_options);
75+
const options = Object.assign(_options);
76+
if (!options.fontFamily) {
77+
options.fontFamily = 'courier';
78+
}
79+
if (!options.sequence) {
80+
options.sequence = {};
81+
}
82+
if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
83+
options.sequence.actorFontFamily = 'courier';
84+
}
85+
if (options.sequence && !options.sequence.noteFontFamily) {
86+
options.sequence.noteFontFamily = 'courier';
87+
}
88+
options.sequence.actorFontFamily = 'courier';
89+
options.sequence.noteFontFamily = 'courier';
90+
options.sequence.messageFontFamily = 'courier';
91+
if (options.sequence && !options.sequence.actorFontFamily) {
92+
options.sequence.actorFontFamily = 'courier';
93+
}
94+
if (!options.fontSize) {
95+
options.fontSize = '16px';
96+
}
97+
const useAppli = Cypress.env('useAppli');
98+
const branch = Cypress.env('codeBranch');
99+
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
100+
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
101+
102+
if (useAppli) {
103+
cy.eyesOpen({
104+
appName: 'Mermaid-' + branch,
105+
testName: name,
106+
batchName: branch,
107+
});
108+
}
109+
110+
cy.visit(url);
111+
if (validation) cy.get('svg').should(validation);
112+
cy.get('body');
113+
// Default name to test title
114+
115+
if (useAppli) {
116+
cy.eyesCheckWindow('Click!');
117+
cy.eyesClose();
118+
} else {
119+
cy.matchImageSnapshot(name);
120+
}
121+
};
122+
73123
export const renderGraph = (graphStr, options, api) => {
74124
const url = mermaidUrl(graphStr, options, api);
75125

‎cypress/platform/ghsa1.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html>
2+
<script>
3+
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
4+
</script>
5+
<body>
6+
<div id="target">
7+
<h1>This element does not belong to the SVG but we can style it</h1>
8+
</div>
9+
<svg id="diagram">
10+
</svg>
11+
12+
<script src="./mermaid.js"></script>
13+
<script>
14+
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
15+
16+
const graph = `
17+
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
18+
graph TD
19+
A[Goose]
20+
`;
21+
22+
const diagram = document.getElementById('diagram');
23+
const svg = mermaid.render('diagram-svg', graph);
24+
diagram.innerHTML = svg;
25+
</script>
26+
</body>
27+
28+
</html>

‎cypress/platform/ghsa2.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html>
2+
<script>
3+
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
4+
</script>
5+
<body>
6+
<div id="target">
7+
<h1>This element does not belong to the SVG but we can style it</h1>
8+
</div>
9+
<svg id="diagram">
10+
</svg>
11+
12+
<script src="./mermaid.js"></script>
13+
<script>
14+
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
15+
16+
const graph = `
17+
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
18+
graph TD
19+
A[Goose]
20+
`;
21+
22+
const diagram = document.getElementById('diagram');
23+
const svg = mermaid.render('diagram-svg', graph);
24+
diagram.innerHTML = svg;
25+
</script>
26+
</body>
27+
28+
</html>

‎src/mermaidAPI.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,8 @@ const render = function (id, _txt, cb, container) {
385385

386386
let userStyles = '';
387387
// user provided theme CSS
388+
// If you add more configuration driven data into the user styles make sure that the value is
389+
// sanitized bye the santiizeCSS function
388390
if (cnf.themeCSS !== undefined) {
389391
userStyles += `\n${cnf.themeCSS}`;
390392
}

‎src/styles.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import sequence from './diagrams/sequence/styles';
1010
import stateDiagram from './diagrams/state/styles';
1111
import journey from './diagrams/user-journey/styles';
1212
import c4 from './diagrams/c4/styles';
13+
import { log } from './logger';
1314

1415
const themes = {
1516
flowchart,
@@ -30,7 +31,10 @@ const themes = {
3031
c4,
3132
};
3233

33-
export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
34+
export const calcThemeVariables = (theme, userOverRides) => {
35+
log.info('userOverides', userOverRides);
36+
return theme.calcColors(userOverRides);
37+
};
3438

3539
const getStyles = (type, userStyles, options) => {
3640
return ` {

‎src/utils.js‎

Lines changed: 32 additions & 3 deletions

0 commit comments

Comments
 (0)