#2209 Combining sanitasion approaches

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;
 };
 
+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) => {
-  const txt = DOMPurify.sanitize(text);
+  const txt = sanitizeMore(DOMPurify.sanitize(text));
+
   return txt;
 };