Merge pull request #2123 from mermaid-js/2122_javascript_urls

2122 javascript urls
mermaid-js · Jun 8, 2021 · 890512c · 890512c
2 parents 2d01c54 + 3d22fa5
commit 890512c
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 12 deletions.
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -58,5 +58,10 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   })
+  it('should not allow maniplulating antiscript to run javascript', () => {
+    cy.visit('http://localhost:9000/xss5.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  })
 
 })
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -66,17 +66,43 @@
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{"theme":"forest", "themeVariables": {
-      "specialStateColor":"red",
-      "innerEndBackground":"lightgreen"
-    }}}%%
-    stateDiagram-v2
-    state fork [[fork]]
-    state join [[join]]
-     [*] --> fork
-     fork --> join
-     join --> [*]
+stateDiagram-v2
+state CompositeState {
+state AnotherCompositeState1234567890 {
+YourState
+}
+}
+  </div>
+<div class="mermaid2" style="width: 100%; height: 20%;">
+stateDiagram-v2
+state CS {
+state ACS {
+YourState
+}
+}
   </div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+      stateDiagram-v2
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse
+        note right of SomethingElse : This is the note to the right.
+
+        SomethingElse --> [*]  </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html
@@ -0,0 +1,99 @@
+<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: 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: 'antiscript',
+        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 LR\n";
+  diagram += "B-->D\(\"<img onerror=location=\`java";
+  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+  diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
+
+  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/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
@@ -146,7 +146,7 @@ const roundedWithTitle = (parent, node) => {
 
   const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
   if (node.width <= bbox.width + node.padding) {
-    node.diff = (bbox.width + node.padding - node.width) / 2;
+    node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
   } else {
     node.diff = -node.padding / 2;
   }
@@ -212,7 +212,7 @@ const divider = (parent, node) => {
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;
   node.height = rectBox.height;
-
+  node.diff = -node.padding / 2;
   node.intersect = function(point) {
     return intersectRect(node, point);
   };

diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
@@ -26,6 +26,10 @@ export const removeScript = txt => {
       break;
     }
   }
+
+  rs = rs.replace('javascript:', '#');
+  rs = rs.replace('<iframe', '');
+
   return rs;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,10 @@ export const removeScript = txt => { @@
           break;
         }
       }
+      rs = rs.replace('javascript:', '#');
+      rs = rs.replace('<iframe', '');
       return rs;
     };
@@ Expand Down @@