From 6deba5cff75aef53d03eca5fbf41bfdb1c5adf7a Mon Sep 17 00:00:00 2001
From: Tom PERRILLAT-COLLOMB <tom.perrillat-collomb@protonmail.com>
Date: Sun, 20 Aug 2023 23:24:47 +0200
Subject: [PATCH] fix(dompurify): allow target property and force the use of
 rel=noopener

---
 demos/classchart.html                      |  9 +++++++++
 docs/config/setup/modules/defaultConfig.md |  2 +-
 packages/mermaid/src/defaultConfig.ts      |  1 +
 packages/mermaid/src/mermaidAPI.spec.ts    | 10 +++++++++-
 packages/mermaid/src/mermaidAPI.ts         |  6 ++++++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/demos/classchart.html b/demos/classchart.html
index 508bb106647..b24225d9b6a 100644
--- 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
index 2d23977fed9..5faa708fb20 100644
--- 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
index 0b232116da7..fed72838bd0 100644
--- 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
index 0f4e6149984..d07ab3e6719 100644
--- 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 sanitizedText = DOMPurify.sanitize('<a href="#" target="_blank">foo</a>', mermaidAPI.getConfig().dompurifyConfig!);
+
+      expect(sanitizedText).toMatch(/target="_blank"/i);
+      expect(sanitizedText).toMatch(/rel="noopener"/i);
     });
   });
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index f8a36f88e65..3adb1d82c19 100644
--- 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();
 }