Merge branch 'develop' into feature/hideUnusedParticipants_1210

mermaid-js · Apr 28, 2022 · 386f3c7 · 386f3c7
2 parents 4c93870 + 7c25fb5
commit 386f3c7
Show file tree

Hide file tree

Showing 26 changed files with 491 additions and 137 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -2,6 +2,9 @@ name: Build
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml
@@ -10,6 +10,9 @@ on:
     branches:
       - gh-pages
 
+permissions:
+  contents: read
+
 jobs:
   check:
     runs-on: ubuntu-latest

diff --git a/.github/workflows/e2e b/.github/workflows/e2e
@@ -2,6 +2,9 @@ name: E2E
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest

diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@ English | [简体中文](./README.zh-CN.md)
 
 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
 
+
+
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
@@ -39,18 +41,16 @@ __The following are some examples of the diagrams, charts and graphs that can be
 ### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
-flowchart LR
-title Example flow chart
-accDescripton Flow chart showing examples of node usage
+flowchart LR 
+
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 ```mermaid
 flowchart LR
-title Example flow chart
-accDescripton Flow chart showing examples of node usage
+
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]

diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -115,4 +115,18 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss20.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss21.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });
diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
@@ -0,0 +1,105 @@
+<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: 5,
+        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 = `  graph TD
+// A --> B["&lt;a href='javasc`;
+// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      var diagram = `  graph TD
+A --> B["<a href='javasc`;
+diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  // console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
@@ -0,0 +1,105 @@
+<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 = `  graph TD
+// A --> B["&lt;a href='javasc`;
+// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      var diagram = `  graph TD
+A --> B["<a href='javasc`;
+diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
diff --git a/cypress/platform/xss22.html b/cypress/platform/xss22.html
@@ -0,0 +1,16 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <div class="mermaid">
+  graph TD
+A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
+  </div>
+<script src="./mermaid.js"></script>
+ <script>mermaid.initialize({ startOnLoad: true });
+</script>
+</body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -385,8 +385,7 @@
     A -->|Get money| B1[(Go shopping 1)]
     A -->|Get money| B2[(Go shopping 2)]
     A -->|Get money| B3[(Go shopping 3)]
-    C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or
- something to get around?)]
+    C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)]
     B1 --> C
     B2 --> C
     B3 --> C
@@ -518,8 +517,10 @@
     sequenceDiagram
     autonumber
     Alice->>John: Hello John,<br>how are you?
+    autonumber 50 10
     Alice->>John: John,<br />can you hear me?
     John-->>Alice: Hi Alice,<br />I can hear you!
+    autonumber off
     John-->>Alice: I feel great!
   </div>
 
@@ -601,10 +602,11 @@
     gitGraph:
     options
     {
-    "nodeSpacing": 150,
-    "nodeRadius": 10
+    "nodeSpacing": 50, 
+    "nodeRadius": 5
     }
     end
+    branch master
     commit
     branch newbranch
     checkout newbranch

diff --git a/demos/sequence.html b/demos/sequence.html
@@ -24,6 +24,7 @@
 		participant Alice
 		participant Bob
 		participant John as John<br />Second Line
+		autonumber 10 10
 		rect rgb(200, 220, 100)
 		rect rgb(200, 255, 200)
 		Alice ->> Bob: Hello Bob, how are you?
@@ -39,14 +40,17 @@
 		Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
 		Note over John: After a few more moments, John<br />finally snaps out of it.
 		end
+		autonumber off
 		alt either this
 		Alice->>+John: Yes
     John-->>-Alice: OK
 		else or this
+		autonumber
 		Alice->>John: No
 		else or this will happen
 		Alice->John: Maybe
 		end
+		autonumber 200
 		par this happens in parallel
 		Alice -->> Bob: Parallel message 1
 		and

diff --git a/docs/examples.md b/docs/examples.md
@@ -140,7 +140,7 @@ sequenceDiagram
 
 ```
 
-A commit flow diagram.
+## A commit flow diagram.
 ```mermaid
 gitGraph:
     commit "Ashish"
@@ -155,4 +155,4 @@ gitGraph:
     commit
     branch b2
     commit
-```
+```
diff --git a/docs/flowchart.md b/docs/flowchart.md
@@ -7,7 +7,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
 It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
 
 > **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
-Node
+
 ### A node (default)
 
 ```mermaid-example