Merge pull request #2831 from gwincr11/cg-custom-dompurify-config

Add dompurify config option

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>

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](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.

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;
 };
 

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();