From c6c9b88292d8c1542d86c669168383a51d20e4f3 Mon Sep 17 00:00:00 2001
From: Cory Gwin <gwincr11@github.com>
Date: Thu, 17 Mar 2022 14:34:52 +0000
Subject: [PATCH 1/2] feat(config): add dompurify config option

---
 demos/index.html              | 50 ++++++++++++++++++++++++++++++++---
 docs/security.md              |  5 ++++
 src/diagrams/common/common.js |  7 ++++-
 src/mermaidAPI.spec.js        |  6 +++++
 4 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/demos/index.html b/demos/index.html
index 530e24965..80975ef0d 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -37,7 +37,7 @@
       axisFormat %m-%d %a
       excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
       includes 2021-10-09
-        
+
       section Airworks 3.4.1
       开发	:b, 2021-10-07, 5d
       测试	:after b, 4d
@@ -619,7 +619,7 @@
 
   <div class="mermaid">
     classDiagram
-    Class01 <|-- AveryLongClass : Cool 
+    Class01 <|-- AveryLongClass : Cool
 
     &lt;&lt;interface&gt;&gt; Class01
     Class03 "0" *-- "0..n" Class04
@@ -656,7 +656,7 @@
 
   <div class="mermaid">
     classDiagram
-    Class01~T~ <|-- AveryLongClass : Cool 
+    Class01~T~ <|-- AveryLongClass : Cool
     &lt;&lt;interface&gt;&gt; Class01
     Class03~T~ "0" *-- "0..n" Class04
     Class05 "1" o-- "many" Class06
@@ -786,6 +786,43 @@
 
   <script src="./mermaid.js"></script>
   <script>
+    const ALLOWED_TAGS = [
+      'a',
+  'b',
+  'blockquote',
+  'br',
+  'dd',
+  'div',
+  'dl',
+      'dt',
+  'em',
+  'foreignObject',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+      'h5',
+  'h6',
+  'h7',
+  'h8',
+  'hr',
+  'i',
+  'li',
+  'ul',
+  'ol',
+  'p',
+      'pre',
+  'span',
+  'strike',
+  'strong',
+  'table',
+  'tbody',
+      'td',
+  'tfoot',
+  'th',
+  'thead',
+  'tr',
+    ];
     mermaid.initialize({
       theme: 'forest',
       // themeCSS: '.node rect { fill: red; }',
@@ -794,6 +831,13 @@
       flowchart: { curve: 'basis' },
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },
+      dompurifyConfig: {
+        USE_PROFILES: {
+          svg: true,
+        },
+        ADD_TAGS: ALLOWED_TAGS,
+        ADD_ATTR: ['transform-origin'],
+      },
       // sequenceDiagram: { actorMargin: 300 } // deprecated
     });
   </script>
diff --git a/docs/security.md b/docs/security.md
index 2d88d1aec..1ace05c42 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -15,3 +15,8 @@ You may also reach out to the team via our public Slack chat channels; however,
 Keep current with the latest Mermaid releases. We regularly update Mermaid, and these updates may fix security defects discovered in previous versions. Check the Mermaid release notes for security-related updates.
 
 Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.
+
+
+## Configuring DomPurify
+
+By default Mermaid uses a baseline DomPurify config. It is possible to override the options passed to dompurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
\ No newline at end of file
diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index 961c50df6..145e29219 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -93,7 +93,12 @@ const sanitizeMore = (text, config) => {
 
 export const sanitizeText = (text, config) => {
   if (!text) return text;
-  const txt = DOMPurify.sanitize(sanitizeMore(text, config));
+  let txt = '';
+  if (config['dompurifyConfig']) {
+    txt = DOMPurify.sanitize(sanitizeMore(text, config), config['dompurifyConfig']);
+  } else {
+    txt = DOMPurify.sanitize(sanitizeMore(text, config));
+  }
   return txt;
 };
 
diff --git a/src/mermaidAPI.spec.js b/src/mermaidAPI.spec.js
index 414c073dc..b6ffc6be6 100644
--- a/src/mermaidAPI.spec.js
+++ b/src/mermaidAPI.spec.js
@@ -113,6 +113,12 @@ describe('when using mermaidAPI and ', function () {
       expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
     });
   });
+  describe('dompurify config', function () {
+    it('should allow dompurify config to be set', function () {
+      mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
+      expect(mermaidAPI.getConfig().dompurifyConfig.ADD_ATTR).toEqual(['onclick']);
+    });
+  });
   describe('checking validity of input ', function () {
     it('it should throw for an invalid definiton', function () {
       expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();

From 1e1c3ef1a6e4241ed6551060c5663a47fafdaa56 Mon Sep 17 00:00:00 2001
From: Cory Gwin <gwincr11@github.com>
Date: Thu, 17 Mar 2022 12:41:11 -0400
Subject: [PATCH 2/2] Update docs/security.md

Co-authored-by: Tali Herzka <therzka@github.com>
---
 docs/security.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/security.md b/docs/security.md
index 1ace05c42..03e4fe260 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -19,4 +19,4 @@ Keep your application’s dependencies up to date. Make sure you upgrade your pa
 
 ## Configuring DomPurify
 
-By default Mermaid uses a baseline DomPurify config. It is possible to override the options passed to dompurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
\ No newline at end of file
+By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
\ No newline at end of file