Fix for issue with backticks in ids in classDiagrams

mermaid-js · Sep 29, 2023 · 47acc1e · 47acc1e
1 parent f96d351
commit 47acc1e
Show file tree

Hide file tree

Showing 21 changed files with 305 additions and 24 deletions.
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -132,4 +132,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks in class names properly', () => {
+    cy.visit('http://localhost:9000/xss24.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -58,12 +58,10 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      flowchart
-        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(Customer Awareness Journey):::mainCategories
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
+      classDiagram
+  `Class<img src=x onerror=alert(1)>` <|-- `Class2<img src=x onerror=alert(2)>`
+    </pre>
+    <pre id="diagram" class="mermaid2">
 flowchart
 Node1:::class1 --> Node2:::class2
 Node1:::class1 --> Node3:::class2

diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss23-css.html b/cypress/platform/xss23-css.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>

diff --git a/cypress/platform/xss24.html b/cypress/platform/xss24.html
@@ -0,0 +1,109 @@
+<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>
+    <script>
+      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 Succeeded');
+      }
+    </script>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      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');
+      }
+
+      let diagram = 'classDiagram\n';
+      diagram += '`Class<img src=x on';
+      diagram += 'error=xssAttack()>` <|-- `Class2<img src=x on';
+      diagram += 'error=xssAttack()>`';
+
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>
@@ -84,14 +94,6 @@
       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 Succeeded');
-      }
       let diagram = 'graph LR\n';
       diagram += 'B-->D("<img onerror=location=`java';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";

diff --git a/cypress/platform/xss6.html b/cypress/platform/xss6.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     </style>
+    <script>
+      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 Succeeded');
+      }
+    </script>
   </head>
   <body>
     <div>Security check</div>