Merge branch 'release/8.13.10'

mermaid-js · Jan 22, 2022 · f458e9c · f458e9c
2 parents 5c77aa6 + aa36aee
commit f458e9c
Show file tree

Hide file tree

Showing 10 changed files with 405 additions and 241 deletions.
diff --git a/README.md b/README.md
@@ -210,6 +210,9 @@ Mermaid is a growing community and is always accepting new contributors. There's
 
 Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
 
+## Reporting vulnerabilities
+To report a vulnerability, please e-mail [email protected] with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+
 ## Appreciation
 A quick note from Knut Sveidqvist:
 >*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*

diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
@@ -0,0 +1,107 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .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>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        // securityLevel: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+  alert('It worked');
+}
+      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');
+      }
+
+      var diagram = `classDiagram
+class Shape{
+    <<<img/src='1'/`;
+
+// //   var diagram = "stateDiagram-v2\n";
+diagram += `onerror=xssAttack()>>>
+}`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
diff --git a/docs/directives.md b/docs/directives.md
@@ -3,7 +3,7 @@
 **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
 
 ## Directives
-Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. 
+Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
 
 Directives are divided into two sets or orders, by priority in parsing. The first set, containing 'init' or 'initialize' directives are loaded ahead of any other directive. While the other set, containing all other kinds of directives are parsed and factored into the rendering, only after 'init' and the desired graph-type are declared.
 
@@ -18,7 +18,7 @@ Directives are divided into two sets or orders, by priority in parsing. The firs
 init would be an argument-directive: %%{init: { **insert argument here**}}%%
 
 The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
-Valid Key Value pairs can be found in config. 
+Valid Key Value pairs can be found in config.
 
 The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
 ```mmd
@@ -27,11 +27,11 @@ graph >
 A-->B
 ```
 
-will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself. 
+will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself.
 
 Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
 
-```mmd
+```mmd2
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...
@@ -54,7 +54,7 @@ This will then be sent to `mermaid.initialize(...)` for rendering.
 
 In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example:
 
-```mmd
+```
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
 sequenceDiagram
 %%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
@@ -79,6 +79,6 @@ Init directives and any other non-multiline directives should be backwards compa
 
 Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
 
-# example 
+# example
 
 
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
@@ -46,14 +46,6 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
-```mermaid-example
-sequenceDiagram
-    actor Alice
-    actor Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
 ### Aliases
 
 The actor can have a convenient identifier and a descriptive label.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.13.9",
+  "version": "8.13.10",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
@@ -82,7 +82,7 @@
     "concurrently": "^7.0.0",
     "coveralls": "^3.0.2",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "9.2.0",
+    "cypress": "9.2.1",
     "documentation": "13.2.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",

diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
@@ -1,7 +1,9 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { sanitizeText, evaluate } from '../diagrams/common/common';
+
+const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
 
 /**
  * @param dom

diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
@@ -13,6 +13,8 @@ let classCounter = 0;
 
 let funs = [];
 
+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
+
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -141,11 +143,11 @@ export const addMember = function (className, member) {
 
     if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
       // Remove leading and trailing brackets
-      theClass.annotations.push(memberString.substring(2, memberString.length - 2));
+      theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));
     } else if (memberString.indexOf(')') > 0) {
-      theClass.methods.push(memberString);
+      theClass.methods.push(sanitizeText(memberString));
     } else if (memberString) {
-      theClass.members.push(memberString);
+      theClass.members.push(sanitizeText(memberString));
     }
   }
 };
@@ -161,7 +163,7 @@ export const cleanupLabel = function (label) {
   if (label.substring(0, 1) === ':') {
     return common.sanitizeText(label.substr(1).trim(), configApi.getConfig());
   } else {
-    return label.trim();
+    return sanitizeText(label.trim());
   }
 };
 

diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
@@ -17,6 +17,8 @@ parser.yy = classDb;
 let idCache = {};
 const padding = 20;
 
+const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
+
 const conf = {
   dividerMargin: 10,
   padding: 5,
@@ -103,7 +105,7 @@ export const addClasses = function (classes, g) {
     g.setNode(vertex.id, {
       labelStyle: styles.labelStyle,
       shape: _shape,
-      labelText: vertexText,
+      labelText: sanitizeText(vertexText),
       classData: vertex,
       rx: radious,
       ry: radious,

diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
@@ -18,8 +18,6 @@ export const removeEscapes = (text) => {
     return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
   });
 
-  console.log(newStr);
-
   newStr = newStr.replace(/\\x([0-9a-f]{2})/gi, (_, c) => String.fromCharCode(parseInt(c, 16)));
   newStr = newStr.replace(/\\[\d\d\d]{3}/gi, function (match) {
     return String.fromCharCode(parseInt(match.replace(/\\/g, ''), 8));