e2e test for stricter security in mermaid

2025-09-20 15:59:51 +02:00 · 2019-07-14 02:05:59 -07:00
parent 31576f8f55
commit 5abedab095
11 changed files with 220 additions and 6 deletions
--- a/dist/xssi.html
+++ b/dist/xssi.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <script>   
+  function xss(x){
+    alert(x + ' cause an xss attack');
+  }
+</script>
+</head>
+<body>
+  <div class="mermaid">
+    gantt
+      title Exclusive end dates <strong>If bold then xss</strong> (Manual date should end on 3d)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      section Section1
+       2 Days: 1, 2019-01-01,2d
+       Manual Date: 2, 2019-01-01,2019-01-03
+  </div>
+  <img src=xss.png />
+    <div class="mermaid">
+      graph TD
+      A["<strong>If bold then xss</strong>Christmas"] -->|Get <strong>If bold then xss</strong> money| B(Go <strong>If bold then xss</strong> shopping)
+      B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br />sssssssssssssssssssssssssss}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[Car]
+    </div>
+  <div class="mermaid">
+graph TB
+	subgraph "<strong>If bold then xss</strong>"
+		a1-->a2
+	end
+  </div>
+  <div class="mermaid">
+graph TD
+A[Christmas] -->|Get money| B(Go shopping)
+B --> C{Let me think}
+C -->|One| D[Laptop]
+C -->|Two| E[iPhone]
+C -->|Three| F[Car]
+click A "index.html#link-clicked" "link test"
+click B testClick "click test"
+classDef someclass fill:#f96;
+class A someclass;
+  </div>
+
+  <div class="mermaid">
+sequenceDiagram
+participant "Alice"
+participant Bob
+participant John as John<br/>Second Line
+Alice ->> Bob: Hello Bob, how are you?
+Bob-->>John: How about you <strong>If bold then xss</strong>John?
+Bob--x Alice: I am good thanks!
+Bob-x John: I am good thanks!
+Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+Bob-->Alice: Checking with John...
+alt either this
+Alice->>John: Yes
+else or this
+Alice->>John: No
+else or this will happen
+Alice->John: Maybe
+end
+par this happens in parallel
+Alice -->> Bob: Parallel message 1
+and
+Alice -->> John: Parallel message 2
+end
+  </div>
+
+  <div class="mermaid">
+classDiagram
+Class01 <|-- AveryLongClass : Co<strong>If bold then xss</strong>ol
+Class03 "0" *-- "0..n" Class04
+Class05 "1" o-- "many" Class06
+Class07 .. Class08
+Class09 "many" --> "1" C2  : Where am i?
+Class09 "0" --* "1..n" C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+  </div>
+
+  <script src="./mermaid.js"></script>
+  <script>
+    mermaid.initialize({
+      theme: 'forest',
+      // themeCSS: '.node rect { fill: red; }',
+      logLevel: 3,
+      flowchart: { curve: 'linear' },
+      gantt: { axisFormat: '%m/%d/%Y' },
+      sequence: { actorMargin: 50 },
+      // sequenceDiagram: { actorMargin: 300 } // deprecated
+    });
+  </script>
+  <script>
+    function ganttTestClick(a, b, c){
+      console.log("a:", a)
+      console.log("b:", b)
+      console.log("c:", c)
+    }
+    function testClick(nodeId) {
+      console.log("clicked", nodeId)
+      var originalBgColor = document.querySelector('body').style.backgroundColor
+      document.querySelector('body').style.backgroundColor = 'yellow'
+      setTimeout(function() {
+        document.querySelector('body').style.backgroundColor = originalBgColor
+      }, 100)
+    }
+  </script>
+</body>
+</html>