Sanitize emojis when reading from LocalStorage

This adds dompurify to sanitize emoji map
to prevent any potential xss vulnerability

Changelog: security

app/assets/javascripts/emoji/index.js

 import { escape, minBy } from 'lodash';
 import emojiAliases from 'emojis/aliases.json';
+import { sanitize } from '~/lib/dompurify';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
 import { CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants';
@@ -34,7 +35,7 @@ async function loadEmoji() {
 
 async function loadEmojiWithNames() {
   return Object.entries(await loadEmoji()).reduce((acc, [key, value]) => {
-    acc[key] = { ...value, name: key };
+    acc[key] = { ...value, name: key, e: sanitize(value.e) };
 
     return acc;
   }, {});

spec/frontend/__helpers__/emoji.js

@@ -49,6 +49,11 @@ export const emojiFixtureMap = {
     unicodeVersion: '5.1',
     description: 'white medium star',
   },
+  xss: {
+    moji: '<img src=x onerror=prompt(1)>',
+    unicodeVersion: '5.1',
+    description: 'xss',
+  },
 };
 
 export const mockEmojiData = Object.keys(emojiFixtureMap).reduce((acc, k) => {

spec/frontend/emoji/index_spec.js

@@ -9,6 +9,7 @@ import isEmojiUnicodeSupported, {
   isHorceRacingSkinToneComboEmoji,
   isPersonZwjEmoji,
 } from '~/emoji/support/is_emoji_unicode_supported';
+import { sanitize } from '~/lib/dompurify';
 
 const emptySupportMap = {
   personZwj: false,
@@ -379,7 +380,7 @@ describe('emoji', () => {
   describe('searchEmoji', () => {
     const emojiFixture = Object.keys(mockEmojiData).reduce((acc, k) => {
       const { name, e, u, d } = mockEmojiData[k];
-      acc[k] = { name, e, u, d };
+      acc[k] = { name, e: sanitize(e), u, d };
 
       return acc;
     }, {});
@@ -397,6 +398,7 @@ describe('emoji', () => {
         'heart',
         'custard',
         'star',
+        'xss',
       ].map((name) => {
         return {
           emoji: emojiFixture[name],
@@ -620,4 +622,13 @@ describe('emoji', () => {
       expect(sortEmoji(scoredItems)).toEqual(expected);
     });
   });
+
+  describe('sanitize emojis', () => {
+    it('should return sanitized emoji', () => {
+      expect(getEmojiInfo('xss')).toEqual({
+        ...mockEmojiData.xss,
+        e: '<img src="x">',
+      });
+    });
+  });
 });