Merge pull request #6 from mermaid-js/develop

Merge
mermaid-js · Dec 9, 2019 · cf5d747 · cf5d747
2 parents 91d9869 + 08cbc0f
commit cf5d747
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 35 deletions.
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
@@ -12,6 +12,8 @@ categories:
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 branches:
   - develop
+exclude-labels:
+  - 'Skip changelog'
 no-changes-template: 'This release contains minor changes and bugfixes.'
 template: |
   # Release Notes

diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
@@ -9,8 +9,27 @@ describe('XSS', () => {
     const url = mermaidUrl(str,{}, true);
 
     cy.visit(url);
+    cy.wait(1000).then(()=>{
+      cy.get('.mermaid').should('exist');
+    });
     cy.get('svg')
-    cy.percySnapshot()
+    // cy.percySnapshot()
+
+  })
+  it('should handle xss in tags in non-html mode', () => {
+    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
+
+    const url = mermaidUrl(str,{
+      "theme": "default",
+      "flowchart": {
+        "htmlMode": false
+      }
+    }, true);
+
+    cy.visit(url);
+    // cy.get('svg')
+    // cy.percySnapshot()
+    cy.get('.malware').should('not.exist');
 
   })
 })
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
@@ -2,20 +2,20 @@
 import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Sequencediagram', () => {
-  it('should render a simple git graph', () => {
-    imgSnapshotTest(
-      `
-    gitGraph:
-      commit
-      branch newbranch
-      checkout newbranch
-      commit
-      commit
-      checkout master
-      commit
-      commit
-      merge newbranch`,
-      { logLevel: 0 }
-    );
-  });
+  // it('should render a simple git graph', () => {
+  //   imgSnapshotTest(
+  //     `
+  //   gitGraph:
+  //     commit
+  //     branch newbranch
+  //     checkout newbranch
+  //     commit
+  //     commit
+  //     checkout master
+  //     commit
+  //     commit
+  //     merge newbranch`,
+  //     { logLevel: 0 }
+  //   );
+  // });
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -4,29 +4,33 @@
       href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
       rel="stylesheet"
     />
+    <style>
+      body {background: black}
+      h1 { color: white;}
+      .arrowheadPath {fill: red;}
 
+      .edgePath .path {stroke: red;}
+
+
+    </style>
   </head>
   <body>
     <h1>info below</h1>
     <div style="display: flex;">
-      <div class="mermaid">stateDiagram
-        [*] --> State1
-        State1 --> State2 : Transition 1
-        State1 --> State3 : Transition 2
-        State1 --> State4 : Transition 3
-        State1 --> State5 : Transition 4
-        State2 --> State3 : Transition 5
-        State1 --> [*]
+      <div class="mermaid">graph TD
+        A ==> B
+        A --> C
+        A -.-> D
       </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'forest',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
-        // themeCSS: '.node rect { fill: red; }',
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 3,
-        flowchart: { curve: 'linear' },
+        flowchart: { curve: 'linear', "htmlLabels": false },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -31,7 +31,6 @@ const contentLoaded = function() {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
     global.mermaid.initialize(graphObj.mermaid);
-    // console.log('graphObj.mermaid', graphObj.mermaid)
     global.mermaid.init();
   }
 };
@@ -55,7 +54,7 @@ const contentLoadedApi = function() {
         divs[i] = div;
       }
 
-      global.mermaid.initialize(graphObj.mermaid);
+      mermaid2.initialize(graphObj.mermaid);
 
       for (let i = 0; i < numCodes; i++) {
         mermaid2.render(
@@ -74,8 +73,9 @@ const contentLoadedApi = function() {
       div.id = 'block';
       div.className = 'mermaid';
       // div.innerHTML = graphObj.code
+      console.warn('graphObj.mermaid', graphObj.mermaid);
       document.getElementsByTagName('body')[0].appendChild(div);
-      global.mermaid.initialize(graphObj.mermaid);
+      mermaid2.initialize(graphObj.mermaid);
 
       mermaid2.render(
         'newid',

diff --git a/cypress/platform/xss.html b/cypress/platform/xss.html
@@ -28,7 +28,10 @@
         div.id = 'the-malware'
         div.className = 'malware'
         div.innerHTML = 'XSS Succeeded'
-        document.getElementsByTagName('body')[0].appendChild(div)
+        document.getElementsByTagName('body')[0].appendChild(div);
+        // const el = document.querySelector('.mermaid');
+        // el.parentNode.removeChild(el);
+        throw new Error('XSS Succeded');
       }
     </script>
   </head>

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -22,7 +22,13 @@ let funs = [];
 
 const sanitize = text => {
   let txt = text;
-  if (config.securityLevel !== 'loose') {
+  let htmlLabels = true;
+  if (
+    config.flowchart &&
+    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
+  )
+    htmlLabels = false;
+  if (config.securityLevel !== 'loose' && htmlLabels) { // eslint-disable-line
     txt = txt.replace(/<br>/g, '#br#');
     txt = txt.replace(/<br\S*?\/>/g, '#br#');
     txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -213,10 +213,10 @@ export const addEdges = function(edges, g) {
           }
           break;
         case 'dotted':
-          style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
+          style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
           break;
         case 'thick':
-          style = 'stroke: #333; stroke-width: 3.5px;fill:none';
+          style = ' stroke-width: 3.5px;fill:none';
           break;
       }
     }