Merge pull request mermaid-js#2115 from mermaid-js/2111_placeholder

2111 placeholder
nguoianphu · Jun 5, 2021 · e6e94ad · e6e94ad
2 parents fc70fb7 + e0c3b8e
commit e6e94ad
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 196 deletions.
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -53,5 +53,10 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   })
+  it('should not allow maniplulating htmlLabels into a false positive', () => {
+    cy.visit('http://localhost:9000/xss4.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
 
 })
diff --git a/cypress/platform/exploit.js b/cypress/platform/exploit.js
@@ -0,0 +1,6 @@
+const div = parent.document.createElement('div');
+div.id = 'the-malware';
+div.className = 'malware';
+div.innerHTML = 'XSS Succeeded';
+parent.document.getElementsByTagName('body')[0].appendChild(div);
+throw new Error('XSS Succeded');
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -67,15 +67,14 @@
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
     %%{init:{"theme":"forest", "themeVariables": {
-
+      "specialStateColor":"red",
+      "innerEndBackground":"lightgreen"
     }}}%%
-    %%  "specialStateColor":"red", "innerEndBackground":"lightgreen"
     stateDiagram-v2
     state fork [[fork]]
     state join [[join]]
      [*] --> fork
-     fork --> Test
-     Test --> join
+     fork --> join
      join --> [*]
   </div>
   <script src="./mermaid.js"></script>

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -21,155 +21,28 @@
       .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>info below</div>
+    <div>Security check</div>
     <div class="flex">
-      <div class="mermaid2" style="width: 100%; height: 400px;">
-%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 400px;">
-flowchart TD
-  A[Christmas] ==> D
-  A[Christmas] -->|Get money| B(Go shopping)
-  A[Christmas] ==> C
-  subgraph T ["Test"]
-    A
-    B
-    C
-  end
-
-  classDef Test fill:#F84E68,stroke:#333,color:white;
-  class A,T Test
-  classDef TestSub fill:green;
-  class T TestSub
-  linkStyle 0,1 color:orange, stroke: orange;
-</div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
-graph TD
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
-      </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
-graph TB
-  A --> B
-</div>
-      <div class="mermaid2" style="width: 100%; height: 20%;">
-stateDiagram-v2
-state S1 {
-sub1 -->sub2
-}
-state S2 {
-    sub4
-}
-S1 --> S2
-sub1 --> sub4
-
-      </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-  requirementDiagram
-  requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-  </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-flowchart LR
-  classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
-  Lorem --> Ipsum --> Dolor
-  class Lorem,Dolor dark
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-%%{init: {'theme': 'base' }}%%
-%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
-flowchart TD
-      L1 --- L2
-      L2 --- C
-      M1 ---> C
-      R1 .-> R2
-      R2 <.-> C
-      C -->|Label 1| E1
-      C <-- Label 2 ---> E2
-      C ----> E3
-      C <-...-> E4
-      C ======> E5
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 21%;">
-flowchart LR
-A[red text] -->|default style| B(blue text)
-C([red text]) -->|default style| D[[blue text]]
-E[(red text)] -->|default style| F((blue text))
-G>red text] -->|default style| H{blue text}
-I{{red text}} -->|default style| J[/blue text/]
-K[
-ed text] -->|default style| L[/blue text]
-M[
-ed text/] -->|default style| N[blue text]
-linkStyle default color:Sienna;
-style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style B stroke:#0000ff,fill:#ccccff,color:#0000ff
-style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style F stroke:#0000ff,fill:#ccccff,color:#0000ff
-style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style H stroke:#0000ff,fill:#ccccff,color:#0000ff
-style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style J stroke:#0000ff,fill:#ccccff,color:#0000ff
-style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style L stroke:#0000ff,fill:#ccccff,color:#0000ff
-style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style N stroke:#0000ff,fill:#ccccff,color:#0000ff
-      </div>
-
-
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -187,18 +60,34 @@
           // defaultRenderer: 'dagre-wrapper',
           nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
         },
-        htmlLabels: true,
+        htmlLabels: false,
         // 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',
+        securityLevel: 'strict',
+        startOnLoad: false
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback(){alert('It worked');}
+
+      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
+  diagram += "flowchart\n";
+  diagram += "A[\"<ifra";
+  diagram += "me srcdoc='<scrip";
+  diagram += "t src=http://localhost:9000/exploit.js>";
+  diagram += "</scr"
+  diagram += "ipt>'></iframe>\"]";
+
+  console.log(diagram);
+  // document.querySelector('#diagram').innerHTML = diagram;
+  mermaid.render('diagram', diagram, (res) => {
+    document.querySelector('#res').innerHTML = res;
+  });
     </script>
   </body>
 </html>
+
diff --git a/cypress/platform/xss4.html b/cypress/platform/xss4.html
@@ -0,0 +1,94 @@
+<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-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+        },
+        htmlLabels: false,
+        // 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: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback(){alert('It worked');}
+
+      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
+  diagram += "flowchart\n";
+  diagram += "A[\"<ifra";
+  diagram += "me srcdoc='<scrip";
+  diagram += "t src=http://localhost:9000/exploit.js>";
+  diagram += "</scr"
+  diagram += "ipt>'></iframe>\"]";
+
+  console.log(diagram);
+  // document.querySelector('#diagram').innerHTML = diagram;
+  mermaid.render('diagram', diagram, (res) => {
+    document.querySelector('#res').innerHTML = res;
+  });
+    </script>
+  </body>
+</html>
+
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
@@ -3,6 +3,7 @@ import { log } from '../logger';
 import createLabel from './createLabel';
 import { select } from 'd3';
 import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
 
 const rect = (parent, node) => {
   log.trace('Creating subgraph rect for ', node.id, node);
@@ -26,7 +27,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (getConfig().flowchart.htmlLabels) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -132,7 +133,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (getConfig().flowchart.htmlLabels) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -170,7 +171,10 @@ const roundedWithTitle = (parent, node) => {
     'translate(' +
       (node.x - bbox.width / 2) +
       ', ' +
-      (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +
+      (node.y -
+        node.height / 2 -
+        node.padding / 3 +
+        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
       ')'
   );
 

diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
@@ -1,7 +1,8 @@
 import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
+import { evaluate } from '../diagrams/common/common';
 // let vertexNode;
-// if (getConfig().flowchart.htmlLabels) {
+// if (evaluate(getConfig().flowchart.htmlLabels)) {
 //   // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
 //   const node = {
 //     label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
@@ -86,7 +87,7 @@ function addHtmlLabel(node) {
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
   if (typeof vertexText === 'object') vertexText = vertexText[0];
-  if (getConfig().flowchart.htmlLabels) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.info('vertexText' + vertexText);