mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into develop

This commit is contained in:
Knut Sveidqvist 2021-03-13 16:45:27 +01:00
parent 5f841d98bc b9d90339ac
commit 4e7ecb3f30
13 changed files with 482 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
cypress/integration/other/xss.spec.js
View File

@ -13,9 +13,25 @@ describe('XSS', () => {
cy.get('.mermaid').should('exist');
});
cy.get('svg')
// cy.percySnapshot()
})
it('should not allow tags in the css', () => {
const str = 'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
const url = mermaidUrl(str,{
"theme": "default",
"flowchart": {
"htmlMode": false
}
}, true);
cy.visit(url);
cy.wait(1000).then(()=>{
cy.get('#the-malware').should('not.exist');
});
})
it('should handle xss in tags in non-html mode', () => {
const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
@ -27,9 +43,15 @@ describe('XSS', () => {
}, true);
cy.visit(url);
// cy.get('svg')
// cy.percySnapshot()
cy.get('.malware').should('not.exist');
cy.wait(1000)
cy.get('#the-malware').should('not.exist');
})
it('should not allow changing the __proto__ attribute using config', () => {
cy.visit('http://localhost:9000/xss2.html');
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
})
})

62
cypress/platform/xss2.html Normal file
View File

@ -0,0 +1,62 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>
.malware {
position: fixed;
bottom:0;
left:0;
right:0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
</style>
<script>
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
</script>
</head>
<body>
<div class="mermaid">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR
A --> B
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,
});
var cnt = 0;
var a;
var handler = setInterval(() => {
cnt++;
a = {};
if(typeof a.polluted !== 'undefined') {
clearInterval(handler);
xssAttack();
}
if(cnt>20) {
clearInterval(handler);
}
}, 100);
</script>
</body>
</html>

62
cypress/platform/xss3.html Normal file
View File

@ -0,0 +1,62 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style>
.malware {
position: fixed;
bottom:0;
left:0;
right:0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
</style>
<script>
function xssAttack(){
const div = document.createElement('div')
div.id = 'the-malware'
div.className = 'malware'
div.innerHTML = 'XSS Succeeded'
document.getElementsByTagName('body')[0].appendChild(div);
throw new Error('XSS Succeded');
}
</script>
</head>
<body>
<div class="mermaid">
%%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%%
graph LR
A --> B
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,
});
var cnt = 0;
var a;
var handler = setInterval(() => {
cnt++;
a = {};
if(typeof a.polluted !== 'undefined') {
clearInterval(handler);
xssAttack();
}
if(cnt>20) {
clearInterval(handler);
}
}, 100);
</script>
</body>
</html>

207
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

207
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

91
docs/Setup.md
View File

@ -52,14 +52,15 @@ A summary of all options and their defaults is found [here][5]. A description of
## theme
Theme , the CSS style sheet
theme , the CSS style sheet
theme , the CSS style sheet
| Parameter | Description | Type | Required | Values |
| --------- | --------------- | ------ | -------- | ---------------------------------------------------- |
| Theme | Built in Themes | String | Optional | Values include, default, forest, dark, neutral, null |
**Notes:** To disable any pre-defined mermaid theme, use "null".
**Notes:**To disable any pre-defined mermaid theme, use "null".
<pre>
"theme": "forest",
@ -72,7 +73,7 @@ Theme , the CSS style sheet
| ---------- | ------------------------------------------------------ | ------ | -------- | ---------------------------------------- |
| fontFamily | specifies the font to be used in the rendered diagrams | String | Required | Trebuchet MS, Verdana, Arial, Sans-Serif |
**Default value is \\"trebuchet ms\\".
\*\*notes: Default value is \\"trebuchet ms\\".
## logLevel
@ -80,7 +81,7 @@ Theme , the CSS style sheet
| --------- | ----------------------------------------------------- | ------ | -------- | ------------- |
| logLevel | This option decides the amount of logging to be used. | String | Required | 1, 2, 3, 4, 5 |
**Values:**
**Notes:**
- debug: 1.
- info: 2.
@ -94,7 +95,7 @@ Theme , the CSS style sheet
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript |
**Values:
\*\*Notes:
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **loose**: tags in text are allowed, click functionality is enabled
@ -115,7 +116,7 @@ Theme , the CSS style sheet
| ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
| arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | Boolean | Required | True, False |
**Notes : This matters if you are using base tag settings.**
## Notes\*\*: This matters if you are using base tag settings.
**Default value: false**.
@ -150,7 +151,7 @@ The object containing configurations specific for flowcharts
| -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
**Notes: The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels**
**Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
**Default value: 8**.
### htmlLabels
@ -187,7 +188,7 @@ Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) grap
| curve | Defines how mermaid renders curves for flowcharts. | String | Required | Basis, Linear, Cardinal |
**Notes:
Default Vaue: Linear**
Default Vaue: monotoneX**
### useMaxWidth
@ -206,7 +207,7 @@ The object containing configurations specific for sequence diagrams
### activationWidth
Width of the activation rect
widt of the activation rect
**Default value 10**.
### diagramMarginX
@ -374,7 +375,7 @@ This will display arrows that start and begin at the same node as right angles,
### actorFontWeight
This sets the font weight of the actor's description
Default value 400.
\*\*Default value 400.
### noteFontSize
@ -397,7 +398,7 @@ Default value 400.
### noteFontWeight
This sets the font weight of the note's description
**Default value 400.
\*\*Default value 400.
### noteAlign
@ -406,7 +407,7 @@ This sets the font weight of the note's description
| noteAlign | This sets the text alignment of actor-attached notes. | string | required | left, center, right |
**Notes:**
**Default value: center**.
**Default value center**.
### messageFontSize
@ -429,27 +430,27 @@ This sets the font weight of the note's description
### messageFontWeight
This sets the font weight of the message's description
Default value 400.
\*\*Default value 400.
### wrap
This sets the auto-wrap state for the diagram
Default value false.
\*\*Default value false.
### wrapPadding
This sets the auto-wrap padding for the diagram (sides only)
Default value 10.
\*\*Default value 10.
### labelBoxWidth
This sets the width of the loop-box (loop, alt, opt, par)
Default value 50.
\*\*Default value 50.
### labelBoxHeight
This sets the height of the loop-box (loop, alt, opt, par)
Default value 20.
\*\*Default value 20.
## gantt
@ -520,15 +521,14 @@ The object containing configurations specific for gantt diagrams\*
**Notes:**
**Default value 11**.
### fontFamily
### sectionFontSize
| Parameter | Description | Type | Required | Values |
| ---------- | ----------- | ------ | -------- | ------------------------- |
| fontFamily | font Family | string | required | "Open-Sans", "sans-serif" |
| Parameter | Description | Type | Required | Values |
| --------------- | --------------------- | ------- | -------- | ------------------ |
| sectionFontSize | Font size for secions | Integer | Required | Any Positive Value |
**Notes:**
**Default value '"Open-Sans", "sans-serif"'**.
**Default value 11**.
### numberSectionStyles
@ -556,8 +556,8 @@ This might need adjustment to match your locale and preferences
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See notes | Boolean | 4 | True, False |
**Notes: when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.**
**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.
**Default value true**.
@ -583,7 +583,7 @@ The object containing configurations specific for journey diagrams
**Notes:**
**Default value 10**..
### actorMargin
### leftMargin
| Parameter | Description | Type | Required | Values |
| ----------- | ---------------------- | ------- | -------- | ------------------ |
@ -653,7 +653,7 @@ Space between messages.
| ------------ | --------------------------- | ---- | -------- | ------------------- |
| messageAlign | Multiline message alignment | 3 | 4 | left, center, right |
**Notes:** default:center
**Notes:**default:center\*\*
### bottomMarginAdj
@ -661,7 +661,7 @@ Space between messages.
| --------------- | ------------------------------------------- | ------- | -------- | ------------------ |
| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | 4 | Any Positive Value |
**Notes: Depending on css styling this might need adjustment.**
**Notes:**Depending on css styling this might need adjustment.
**Default value 1**.
### useMaxWidth
@ -681,7 +681,7 @@ available space if not the absolute space required is used.
| ----------- | ---------------------------------- | ---- | -------- | ----------- |
| rightAngles | Curved Arrows become Right Angles, | 3 | 4 | True, False |
**Notes:This will display arrows that start and begin at the same node as right angles, rather than a curves**
**Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves
**Default value false**.
## useMaxWidth
@ -690,13 +690,34 @@ available space if not the absolute space required is used.
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See notes | Boolean | 4 | True, False |
**Notes: when this flag is set, the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.**
**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.
**Default value true**.
## useMaxWidth
## ER Diagrams
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See notes | Boolean | 4 | True, False |
**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.
**Default value true**.
## useMaxWidth
| Parameter | Description | Type | Required | Values |
| ----------- | ----------- | ------- | -------- | ----------- |
| useMaxWidth | See notes | Boolean | 4 | True, False |
**Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used.
**Default value true**.
## er
The object containing configurations specific for entity relationship diagrams
@ -735,7 +756,7 @@ T = top, B = bottom, L = left, and R = right.
| --------------- | ------------------------------------ | ------- | -------- | ------------------ |
| minEntityHeight | The minimum height of an entity box, | Integer | 4 | Any Positive Value |
**Notes: expressed in pixels**
**Notes:**expressed in pixels
**Default value: 75 **
### entityPadding
@ -744,7 +765,7 @@ T = top, B = bottom, L = left, and R = right.
| ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
| entityPadding | minimum internal padding betweentext in box and box borders | Integer | 4 | Any Positive Value |
**Notes: The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.**
**Notes:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.
**Default value: 15 **
### stroke
@ -770,7 +791,7 @@ T = top, B = bottom, L = left, and R = right.
| --------- | ------------------- | ------- | -------- | ------------------ |
| fontSize | Font Size in pixels | Integer | | Any Positive Value |
**Notes: Font size (expressed as an integer representing a number of pixels)**
**Notes:**Font size (expressed as an integer representing a number of pixels)
**Default value: 12 **
### useMaxWidth

19
docs/development.md
View File

@ -6,7 +6,7 @@ So you want to help? That's great!
Here are a few things to know to get you started on the right path.
**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
**Note: Commits and Pull Requests should be directed to the develop branch.**
@ -46,7 +46,7 @@ If it is not in the documentation, it's like it never happened. Wouldn't that be
The docs are located in the `docs` folder and are written in MarkDown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation:
**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md). Click edit it to see them.**
**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md). **
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from **Master** Branch.
@ -56,7 +56,12 @@ We are a little less strict here, it is OK to commit directly in the `develop` b
The documentation is located in the `docs` directory and organized according to relevant subfolder.
<<<<<<< HEAD
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw)
=======
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
>>>>>>> master
### **Add unit tests for the parsing part**
@ -96,13 +101,13 @@ This is what a rendering test looks like:
```
### **Docs or it Didn't Happen**
### **Docs or it didn't happen**
Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
The docs are located in the docs folder and are written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the [sidebar](/.sidebar.md).
The changes in master is reflected in [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) once released the updates are commited to [https://mermaid-js.github.io/#/](https://mermaid-js.github.io/mermaid/#/).
The changes in master is reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released, the updates are commited to [https://mermaid-js.github.io/#/](https://mermaid-js.github.io/mermaid/#/).
### Questions and/or suggestions ?
After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
@ -110,14 +115,14 @@ After logging in at [GitHub.com](https://www.github.com), open or append to an i
### How to contribute a suggestion
Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
If you want to use an editor on your own computer, you may follow these steps:
To Edit on your Computer:
* Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs) directory on the develop branch.
* Create a fork of the develop branch.
* Make changes or add new documentation.
* Commit changes to your fork and push it to GitHub.
* Create a pull request of your fork.
If you don't have such editor on your computer, you may follow these steps:
To Edit Docs on GitHub:
* Login at [GitHub.com](https://www.github.com).
* Navigate to [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
* To edit a file, click the pencil icon at the top-right of the file contents panel.

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.9.1",
"version": "8.9.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [

24
src/config.js
View File

@ -135,6 +135,7 @@ export const getConfig = () => {
* @param options - the potential setConfig parameter
*/
export const sanitize = options => {
// Checking that options are not in the list of excluded options
Object.keys(siteConfig.secure).forEach(key => {
if (typeof options[siteConfig.secure[key]] !== 'undefined') {
// DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script
@ -146,6 +147,29 @@ export const sanitize = options => {
delete options[siteConfig.secure[key]];
}
});
// Check that there no attempts of prototype pollution
Object.keys(options).forEach(key => {
if (key.indexOf('__') === 0) {
delete options[key];
}
});
// Check that there no attempts of xss, there should be no tags at all in the directive
// blocking data urls as base64 urls can contain svgs with inline script tags
Object.keys(options).forEach(key => {
if (typeof options[key] === 'string') {
if (
options[key].indexOf('<') > -1 ||
options[key].indexOf('>') > -1 ||
options[key].indexOf('url(data:') > -1
) {
delete options[key];
}
}
if (typeof options[key] === 'object') {
sanitize(options[key]);
}
});
};
export const addDirective = directive => {