fix: Render links with target attribute (#4685)

app/javascript/packs/application.js

@@ -39,6 +39,7 @@ import {
 } from '../dashboard/helper/scriptHelpers';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 
 Vue.config.env = process.env;
 
@@ -55,7 +56,8 @@ if (window.analyticsConfig) {
     api_host: window.analyticsConfig.host,
   });
 }
-Vue.use(VueDOMPurifyHTML);
+
+Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(WootUiKit);

app/javascript/packs/widget.js

@@ -9,9 +9,10 @@ import ActionCableConnector from '../widget/helpers/actionCable';
 import i18n from '../widget/i18n';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import router from '../widget/router';
+import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
-Vue.use(VueDOMPurifyHTML);
+Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 
 const i18nConfig = new VueI18n({
   locale: 'en',

app/javascript/shared/helpers/HTMLSanitizer.js

@@ -6,3 +6,15 @@ export const escapeHtml = (unsafe = '') => {
     .replace(/"/g, '"')
     .replace(/'/g, ''');
 };
+
+export const afterSanitizeAttributes = currentNode => {
+  if ('target' in currentNode) {
+    currentNode.setAttribute('target', '_blank');
+  }
+};
+
+export const domPurifyConfig = {
+  hooks: {
+    afterSanitizeAttributes,
+  },
+};

app/javascript/shared/helpers/MessageFormatter.js

@@ -1,6 +1,6 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { escapeHtml } from './HTMLSanitizer';
+import { escapeHtml, afterSanitizeAttributes } from './HTMLSanitizer';
 
 const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
 const TWITTER_USERNAME_REPLACEMENT =
@@ -48,9 +48,7 @@ class MessageFormatter {
       const markedDownOutput = marked(withHash);
       return markedDownOutput;
     }
-    DOMPurify.addHook('afterSanitizeAttributes', node => {
-      if ('target' in node) node.setAttribute('target', '_blank');
-    });
+    DOMPurify.addHook('afterSanitizeAttributes', afterSanitizeAttributes);
     return DOMPurify.sanitize(
       marked(this.message, { breaks: true, gfm: true })
     );