Fixes gl-emoji not escaping names

app/assets/javascripts/behaviors/gl_emoji.js

@@ -64,10 +64,12 @@ class GlEmoji extends HTMLElement {
           this.classList.add('emoji-icon');
           this.classList.add(fallbackSpriteClass);
         } else if (hasImageFallback) {
-          this.innerHTML = emojiImageTag(name, fallbackSrc);
+          this.innerHTML = '';
+          this.appendChild(emojiImageTag(name, fallbackSrc));
         } else {
           const src = emojiFallbackImageSrc(name);
-          this.innerHTML = emojiImageTag(name, src);
+          this.innerHTML = '';
+          this.appendChild(emojiImageTag(name, src));
         }
       }
     });

app/assets/javascripts/emoji/index.js

 import { escape, minBy } from 'lodash';
 import emojiRegexFactory from 'emoji-regex';
 import emojiAliases from 'emojis/aliases.json';
+import { setAttributes } from '~/lib/utils/dom_utils';
 import AccessorUtilities from '../lib/utils/accessor';
 import axios from '../lib/utils/axios_utils';
 import { CACHE_KEY, CACHE_VERSION_KEY, CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants';
@@ -220,7 +221,19 @@ export function emojiFallbackImageSrc(inputName) {
 }
 
 export function emojiImageTag(name, src) {
-  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
+  const img = document.createElement('img');
+
+  img.className = 'emoji';
+  setAttributes(img, {
+    title: `:${name}:`,
+    alt: `:${name}:`,
+    src,
+    width: '20',
+    height: '20',
+    align: 'absmiddle',
+  });
+
+  return img;
 }
 
 export function glEmojiTag(inputName, options) {

spec/frontend/behaviors/gl_emoji_spec.js

@@ -97,6 +97,18 @@ describe('gl_emoji', () => {
     });
   });
 
+  it('escapes gl-emoji name', async () => {
+    const glEmojiElement = markupToDomElement(
+      "<gl-emoji data-name='&#34;x=&#34y&#34 onload=&#34;alert(document.location.href)&#34;' data-unicode-version='x'>abc</gl-emoji>",
+    );
+
+    await waitForPromises();
+
+    expect(glEmojiElement.outerHTML).toBe(
+      '<gl-emoji data-name="&quot;x=&quot;y&quot; onload=&quot;alert(document.location.href)&quot;" data-unicode-version="x"><img class="emoji" title=":&quot;x=&quot;y&quot; onload=&quot;alert(document.location.href)&quot;:" alt=":&quot;x=&quot;y&quot; onload=&quot;alert(document.location.href)&quot;:" src="/-/emojis/2/grey_question.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+    );
+  });
+
   it('Adds sprite CSS if emojis are not supported', async () => {
     const testPath = '/test-path.css';
     jest.spyOn(EmojiUnicodeSupport, 'default').mockReturnValue(false);