Merge branch 'ph/issueDescriptionFixGLEmoji' into 'master'

Fixes gl-emoji's not rendering inside of issue descriptions

See merge request gitlab-org/gitlab!70058

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,

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'],

spec/features/issues/issue_detail_spec.rb

@@ -32,6 +32,21 @@ RSpec.describe 'Issue Detail', :js do
     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)')

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}