From 76db50d6d486ad325d2a3be30086b9ad1edd33a8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 10 Sep 2021 16:12:47 +0100
Subject: [PATCH] Fixes gl-emoji's not rendering inside of issue descriptions

The gl-emoji tag gets sanitized out of the issue description
which means that fallback emojis won't work.
---
 .../issue_show/components/description.vue         |  3 ++-
 app/assets/javascripts/lib/dompurify.js           |  2 +-
 spec/features/issues/issue_detail_spec.rb         | 15 +++++++++++++++
 spec/frontend/lib/dompurify_spec.js               |  4 ++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 0812392f8049..4c6a1478e950 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -123,6 +123,7 @@ export default {
       }
     },
   },
+  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 
@@ -136,7 +137,7 @@ export default {
   >
     <div
       ref="gfm-content"
-      v-safe-html="descriptionHtml"
+      v-safe-html:[$options.safeHtmlConfig]="descriptionHtml"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index ff5123643560..d421d66981e2 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -3,7 +3,7 @@ import { getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
 
 const defaultConfig = {
   // Safely allow SVG <use> tags
-  ADD_TAGS: ['use'],
+  ADD_TAGS: ['use', 'gl-emoji'],
   // Prevent possible XSS attacks with data-* attributes used by @rails/ujs
   // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421
   FORBID_ATTR: ['data-remote', 'data-url', 'data-type', 'data-method'],
diff --git a/spec/features/issues/issue_detail_spec.rb b/spec/features/issues/issue_detail_spec.rb
index a942a1a44f63..531c3634b5e3 100644
--- a/spec/features/issues/issue_detail_spec.rb
+++ b/spec/features/issues/issue_detail_spec.rb
@@ -32,6 +32,21 @@
     end
   end
 
+  context 'when issue description has emojis' do
+    let(:issue) { create(:issue, project: project, author: user, description: 'hello world :100:') }
+
+    before do
+      sign_in(user)
+      visit project_issue_path(project, issue)
+    end
+
+    it 'renders gl-emoji tag' do
+      page.within('.description') do
+        expect(page).to have_selector('gl-emoji', count: 1)
+      end
+    end
+  end
+
   context 'when issue description has xss snippet' do
     before do
       issue.update!(description: '![xss" onload=alert(1);//](a)')
diff --git a/spec/frontend/lib/dompurify_spec.js b/spec/frontend/lib/dompurify_spec.js
index 696e2ba6e137..324441fa2c9d 100644
--- a/spec/frontend/lib/dompurify_spec.js
+++ b/spec/frontend/lib/dompurify_spec.js
@@ -65,6 +65,10 @@ describe('~/lib/dompurify', () => {
     expect(sanitize(htmlXlink)).toBe(htmlXlink);
   });
 
+  it("doesn't sanitize gl-emoji", () => {
+    expect(sanitize('<p><gl-emoji>💯</gl-emoji></p>')).toBe('<p><gl-emoji>💯</gl-emoji></p>');
+  });
+
   describe.each`
     type          | gon
     ${'root'}     | ${rootGon}
-- 
GitLab