diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
index f605e98dc..6226feaeb 100644
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -115,4 +115,18 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss20.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+  it('should sanitize colons properly', () => {
+    cy.visit('http://localhost:9000/xss21.html');
+    cy.wait(1000);
+    cy.get('a').click('');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });
diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
new file mode 100644
index 000000000..33d4dfccb
--- /dev/null
+++ b/cypress/platform/xss20.html
@@ -0,0 +1,105 @@
+<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>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      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: 5,
+        state: {
+          defaultRenderer: 'dagre-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // 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: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      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 Succeded');
+      }
+
+//       var diagram = `  graph TD
+// A --> B["&lt;a href='javasc`;
+// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      var diagram = `  graph TD
+A --> B["<a href='javasc`;
+diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  // console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
new file mode 100644
index 000000000..9a88d7afa
--- /dev/null
+++ b/cypress/platform/xss21.html
@@ -0,0 +1,105 @@
+<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>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+  <script src="./mermaid.js"></script>
+    <script>
+      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-d3',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
+        },
+        htmlLabels: true,
+        // 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: 'loose',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      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 Succeded');
+      }
+
+//       var diagram = `  graph TD
+// A --> B["&lt;a href='javasc`;
+// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
+      var diagram = `  graph TD
+A --> B["<a href='javasc`;
+diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
+// diagram += '//via.placeholder.com/64\' width=64 />"]';
+// document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
+  console.log(res);
+  document.querySelector('#res').innerHTML = res;
+});
+    </script>
+  </body>
+</html>
+
diff --git a/cypress/platform/xss22.html b/cypress/platform/xss22.html
new file mode 100644
index 000000000..d51a7f384
--- /dev/null
+++ b/cypress/platform/xss22.html
@@ -0,0 +1,16 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <div class="mermaid">
+  graph TD
+A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
+  </div>
+<script src="./mermaid.js"></script>
+ <script>mermaid.initialize({ startOnLoad: true });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index 145e29219..b61d4dddd 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -59,6 +59,7 @@ export const removeScript = (txt) => {
   let decodedText = removeEscapes(rs);
   decodedText = decodedText.replace(/script>/gi, '#');
   decodedText = decodedText.replace(/javascript:/gi, '#');
+  decodedText = decodedText.replace(/javascript&colon/gi, '#');
   decodedText = decodedText.replace(/onerror=/gi, 'onerror:');
   decodedText = decodedText.replace(/<iframe/gi, '');
   return decodedText;
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index a7b9adfc7..7b5e0293f 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -62,6 +62,7 @@ import { log, setLogLevel } from './logger';
 import getStyles from './styles';
 import theme from './themes';
 import utils, { directiveSanitizer, assignWithDepth, sanitizeCss } from './utils';
+import DOMPurify from 'dompurify';
 
 /**
  * @param text
@@ -542,6 +543,10 @@ const render = function (id, _txt, cb, container) {
     )}" sandbox="allow-top-navigation-by-user-activation allow-popups">
   The “iframe” tag is not supported by your browser.
 </iframe>`;
+  } else {
+    if (cnf.securityLevel !== 'loose') {
+      svgCode = DOMPurify.sanitize(svgCode, { ADD_TAGS: ['foreignobject'] });
+    }
   }
 
   if (typeof cb !== 'undefined') {
