From dd1fe4f93a6fbafa1d1eed87ac7d4143e701ec08 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Mon, 14 Mar 2022 18:13:21 +0530
Subject: [PATCH] fix: Handle unsanitized markup in DOM (#4110)

---
 app/javascript/shared/helpers/MessageFormatter.js  |  7 ++++++-
 .../shared/helpers/specs/MessageFormatter.spec.js  | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
index f57bbd1d563a..3bc89ec2f853 100644
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -47,7 +47,12 @@ class MessageFormatter {
       const markedDownOutput = marked(withHash);
       return markedDownOutput;
     }
-    return marked(this.message, { breaks: true, gfm: true });
+    DOMPurify.addHook('afterSanitizeAttributes', node => {
+      if ('target' in node) node.setAttribute('target', '_blank');
+    });
+    return DOMPurify.sanitize(
+      marked(this.message, { breaks: true, gfm: true })
+    );
   }
 
   get formattedMessage() {
diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
index 3ac99dbddf33..4e13fe832b42 100644
--- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
+++ b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
@@ -6,14 +6,14 @@ describe('#MessageFormatter', () => {
       const message =
         'Chatwoot is an opensource tool. [Chatwoot](https://www.chatwoot.com)';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<p>Chatwoot is an opensource tool. <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" class="link" title="" target="_blank">Chatwoot</a></p>'
+        '<p>Chatwoot is an opensource tool. <a title="" class="link" href="https://www.chatwoot.com" rel="noreferrer noopener nofollow" target="_blank">Chatwoot</a></p>'
       );
     });
     it('should format correctly', () => {
       const message =
         'Chatwoot is an opensource tool. https://www.chatwoot.com';
       expect(new MessageFormatter(message).formattedMessage).toMatch(
-        '<p>Chatwoot is an opensource tool. <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" class="link" title="" target="_blank">https://www.chatwoot.com</a></p>'
+        '<p>Chatwoot is an opensource tool. <a title="" class="link" href="https://www.chatwoot.com" rel="noreferrer noopener nofollow" target="_blank">https://www.chatwoot.com</a></p>'
       );
     });
   });
@@ -58,4 +58,14 @@ describe('#MessageFormatter', () => {
       );
     });
   });
+
+  describe('#sanitize', () => {
+    it('sanitizes markup and removes all unnecessary elements', () => {
+      const message =
+        '[xssLink](javascript:alert(document.cookie))\n[normalLink](https://google.com)**I am a bold text paragraph**';
+      expect(new MessageFormatter(message).formattedMessage).toMatch(
+        '<p><a title="" class="link" rel="noreferrer noopener nofollow" target="_blank">xssLink</a><br><a title="" class="link" href="https://google.com" rel="noreferrer noopener nofollow" target="_blank">normalLink</a><strong>I am a bold text paragraph</strong></p>'
+      );
+    });
+  });
 });