Merge pull request #2210 from mermaid-js/2209_safety

Combining Mermaids native sanitation with DOMPurify

cypress/platform/knsv.html

@@ -56,17 +56,11 @@ subgraph CompositeState
 
 end
 </div>
-<div class="mermaid3" style="width: 100%; height: 20%;">
-stateDiagram-v2
-  state CompositeState {
-    state AnotherCompositeState1234567890 {
-      YourState
-    }
-  }
-
-</div>
-&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29
 <div class="mermaid" style="width: 100%; height: 20%;">
+graph TD
+  A["<img src=`https://via.placeholder.com/64/`>"]
+</div>
+<div class="mermaid2" style="width: 100%; height: 20%;">
 flowchart TD
   Link --> b
   click Link href "&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29" "Tooltip for

src/diagrams/common/common.js

@@ -36,8 +36,36 @@ export const removeScript = (txt) => {
   return rs;
 };
 
-export const sanitizeText = (text) => {
-  const txt = DOMPurify.sanitize(text);
+const sanitizeMore = (text, config) => {
+  let txt = text;
+  let htmlLabels = true;
+  if (
+    config.flowchart &&
+    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
+  ) {
+    htmlLabels = false;
+  }
+
+  if (htmlLabels) {
+    const level = config.securityLevel;
+
+    if (level === 'antiscript') {
+      txt = removeScript(txt);
+    } else if (level !== 'loose') {
+      // eslint-disable-line
+      txt = breakToPlaceholder(txt);
+      txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      txt = txt.replace(/=/g, '&equals;');
+      txt = placeholderToBreak(txt);
+    }
+  }
+
+  return txt;
+};
+
+export const sanitizeText = (text, config) => {
+  const txt = sanitizeMore(DOMPurify.sanitize(text), config);
+
   return txt;
 };
 
@@ -50,7 +78,9 @@ export const hasBreaks = (text) => {
 export const splitBreaks = (text) => {
   return text.split(/<br\s*[/]?>/gi);
 };
-
+const placeholderToBreak = (s) => {
+  return s.replace(/#br#/g, '<br/>');
+};
 const breakToPlaceholder = (s) => {
   return s.replace(lineBreakRegex, '#br#');
 };

src/diagrams/flowchart/parser/flow-singlenode.spec.js

@@ -121,7 +121,7 @@ describe('[Singlenodes] when parsing', () => {
 
     expect(edges.length).toBe(0);
     expect(vert['a'].type).toBe('diamond');
-    expect(vert['a'].text).toBe('A <br> end');
+    expect(vert['a'].text).toBe('A <br/> end');
   });
 
   it('should handle a single hexagon node', function() {
@@ -144,7 +144,7 @@ describe('[Singlenodes] when parsing', () => {
 
     expect(edges.length).toBe(0);
     expect(vert['a'].type).toBe('hexagon');
-    expect(vert['a'].text).toBe('A <br> end');
+    expect(vert['a'].text).toBe('A <br/> end');
   });
 
   it('should handle a single round node with html in it', function() {
@@ -156,7 +156,7 @@ describe('[Singlenodes] when parsing', () => {
 
     expect(edges.length).toBe(0);
     expect(vert['a'].type).toBe('round');
-    expect(vert['a'].text).toBe('A <br> end');
+    expect(vert['a'].text).toBe('A <br/> end');
   });
 
   it('should handle a single node with alphanumerics starting on a char', function() {

src/diagrams/flowchart/parser/flow-text.spec.js

@@ -328,7 +328,7 @@ describe('[Text] when parsing', () => {
       const edges = flow.parser.yy.getEdges();
 
       expect(vert['C'].type).toBe('round');
-      expect(vert['C'].text).toBe('Chimpansen hoppar åäö  <br> -  ÅÄÖ');
+      expect(vert['C'].text).toBe('Chimpansen hoppar åäö  <br/> -  ÅÄÖ');
     });
     // xit('it should handle åäö, minus and space and br',function(){
     //    const res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->B(Thing);');