fix(dompurify): allow target property and force the use of rel=noopener

tomperr · Aug 20, 2023 · 20ec99e · 20ec99e
1 parent 72fa348
commit 20ec99e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 2 deletions.
diff --git a/demos/classchart.html b/demos/classchart.html
@@ -177,6 +177,15 @@ <h1>Class diagram demos</h1>
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    classDiagram
+      class test {
+        +bar : foo
+      }
+      note for test "<a href='https://mermaid.js.org/' target='_blank'>mermaid</a>"
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L268)
+[defaultConfig.ts:269](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L269)
 
 ---
 

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -253,6 +253,7 @@ const config: RequiredDeep<MermaidConfig> = {
     // TODO: can we make this default to `true` instead?
     useMaxWidth: false,
   },
+  dompurifyConfig: { ADD_ATTR: ['target'] },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -68,6 +68,7 @@ vi.mock('stylis', () => {
   };
 });
 import { compile, serialize } from 'stylis';
+import DOMPurify from 'dompurify';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -644,7 +645,14 @@ describe('mermaidAPI', () => {
     it('allows dompurify config to be set', () => {
       mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
 
-      expect(mermaidAPI!.getConfig()!.dompurifyConfig!.ADD_ATTR).toEqual(['onclick']);
+      expect(mermaidAPI!.getConfig()!.dompurifyConfig!.ADD_ATTR).toEqual(['target', 'onclick']);
+    });
+    it('add `rel` property on link if `target` property is set', () => {
+      mermaidAPI.initialize();
+      const res = DOMPurify.sanitize('<a href="#" target="_blank">foo</a>', mermaidAPI.getConfig().dompurifyConfig!) as HTMLElement;
+
+      expect(res).toMatch(/target="_blank"/i);
+      expect(res).toMatch(/rel="noopener"/i);
     });
   });
 

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
@@ -580,6 +580,12 @@ function initialize(options: MermaidConfig = {}) {
   const config =
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
+  DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+    if ('target' in node) {
+      node.setAttribute('rel', 'noopener');
+    }
+  });
+
   setLogLevel(config.logLevel);
   addDiagrams();
 }