Protect against unknown emojis in frequently used listfix-unknown-emojis-in-frequently-used-awards

See https://gitlab.slack.com/archives/frontend/p1489690607738864

5 files changed, 89 insertions, 9 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 8a077f0081a..9349918f7a0 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -3,6 +3,7 @@
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
 import { glEmojiTag } from './behaviors/gl_emoji';
+import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const requestAnimationFrame = window.requestAnimationFrame ||
@@ -454,14 +455,21 @@ AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji)
 AwardsHandler
   .prototype
   .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
-    const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-    frequentlyUsedEmojis.push(emoji);
-    Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });
+    if (isEmojiNameValid(emoji)) {
+      this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
+      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+    }
   };
 
 AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
-  const frequentlyUsedEmojis = (Cookies.get('frequently_used_emojis') || '').split(',');
-  return _.compact(_.uniq(frequentlyUsedEmojis));
+  return this.frequentlyUsedEmojis || (() => {
+    const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+    this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
+      inputName => isEmojiNameValid(inputName),
+    );
+
+    return this.frequentlyUsedEmojis;
+  })();
 };
 
 AwardsHandler.prototype.setupSearch = function setupSearch() {
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 59741cc9b1a..19a607309e4 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -13,9 +13,14 @@ function emojiImageTag(name, src) {
 }
 
 function assembleFallbackImageSrc(inputName) {
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
   const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
 
   return fallbackImageSrc;
@@ -26,9 +31,15 @@ const glEmojiTagDefaults = {
 };
 function glEmojiTag(inputName, options) {
   const opts = Object.assign({}, glEmojiTagDefaults, options);
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
   const fallbackImageSrc = assembleFallbackImageSrc(name);
   const fallbackSpriteClass = `emoji-${name}`;
 
diff --git a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
new file mode 100644
index 00000000000..be4aeb32c46
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
@@ -0,0 +1,11 @@
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+function isEmojiNameValid(inputName) {
+  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+
+  return name && emojiMap[name];
+}
+
+export default isEmojiNameValid;
diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index 0a6e042b700..ea7753c7a1d 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -287,6 +287,20 @@ import AwardsHandler from '~/awards_handler';
             done.fail(`Failed to open and build emoji menu: ${err.message}`);
           });
       });
+
+      it('should disregard invalid frequently used emoji that are being attempted to be added', function() {
+        awardsHandler.addEmojiToFrequentlyUsedList('8ball');
+        awardsHandler.addEmojiToFrequentlyUsedList('invalid_emoji');
+        awardsHandler.addEmojiToFrequentlyUsedList('grinning');
+
+        expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
+      });
+
+      it('should disregard invalid frequently used emoji already set in cookie', function() {
+        Cookies.set('frequently_used_emojis', '8ball,invalid_emoji,grinning');
+
+        expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']);
+      });
     });
   });
 }).call(window);
diff --git a/spec/javascripts/gl_emoji_spec.js b/spec/javascripts/gl_emoji_spec.js
index 9b44b25980c..b2b46640e5b 100644
--- a/spec/javascripts/gl_emoji_spec.js
+++ b/spec/javascripts/gl_emoji_spec.js
@@ -43,6 +43,11 @@ const emojiFixtureMap = {
     moji: '5️⃣',
     unicodeVersion: '3.0',
   },
+  grey_question: {
+    name: 'grey_question',
+    moji: '❔',
+    unicodeVersion: '6.0',
+  },
 };
 
 function markupToDomElement(markup) {
@@ -153,6 +158,37 @@ describe('gl_emoji', () => {
         },
       );
     });
+
+    it('question mark when invalid emoji name given', () => {
+      const name = 'invalid_emoji';
+      const emojiKey = 'grey_question';
+      const markup = glEmojiTag(name);
+      const glEmojiElement = markupToDomElement(markup);
+      testGlEmojiElement(
+        glEmojiElement,
+        emojiFixtureMap[emojiKey].name,
+        emojiFixtureMap[emojiKey].unicodeVersion,
+        emojiFixtureMap[emojiKey].moji,
+      );
+    });
+
+    it('question mark with image fallback when invalid emoji name given', () => {
+      const name = 'invalid_emoji';
+      const emojiKey = 'grey_question';
+      const markup = glEmojiTag(name, {
+        forceFallback: true,
+      });
+      const glEmojiElement = markupToDomElement(markup);
+      testGlEmojiElement(
+        glEmojiElement,
+        emojiFixtureMap[emojiKey].name,
+        emojiFixtureMap[emojiKey].unicodeVersion,
+        emojiFixtureMap[emojiKey].moji,
+        {
+          forceFallback: true,
+        },
+      );
+    });
   });
 
   describe('isFlagEmoji', () => {