escape nicknames before displaying them

modules/UI/UI.js

  * Intitialize conference UI.
  */
 UI.initConference = function () {
-    var id = APP.conference.localId;
+    let id = APP.conference.localId;
     Toolbar.updateRoomUrl(window.location.href);
-    var meHTML = APP.translation.generateTranslationHTML("me");
-    var settings = Settings.getSettings();
+    let meHTML = APP.translation.generateTranslationHTML("me");
 
-    $("#localNick").html(settings.email || settings.uid + " (" + meHTML + ")");
+    let email = Settings.getEmail();
+    let uid = Settings.getUserId();
+    $("#localNick").html(email || `${uid} (${meHTML})`);
 
     // Add myself to the contact list.
     ContactList.addContact(id);
     // Once we've joined the muc show the toolbar
     ToolbarToggler.showToolbar();
 
-    var displayName = config.displayJids ? id : settings.displayName;
+    let displayName = config.displayJids ? id : Settings.getDisplayName();
 
     if (displayName) {
         UI.changeDisplayName('localVideoContainer', displayName);
     }
 
     // Make sure we configure our avatar id, before creating avatar for us
-    UI.setUserAvatar(id, settings.email);
+    UI.setUserAvatar(id, email);
 
     Toolbar.checkAutoEnableDesktopSharing();
     if(!interfaceConfig.filmStripOnly) {
     PanelToggler.toggleContactList();
 };
 
-UI.inputDisplayNameHandler = function (value) {
-    VideoLayout.inputDisplayNameHandler(value);
+/**
+ * Handle new user display name.
+ */
+UI.inputDisplayNameHandler = function (newDisplayName) {
+    eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
 };
 
 /**
     body = body.replace(/\n/g, "%0D%0A");
 
     if (nick) {
-        body += "%0D%0A%0D%0A" + nick;
+        body += "%0D%0A%0D%0A" + UIUtil.escapeHtml(nick);
     }
 
     if (interfaceConfig.INVITATION_POWERED_BY) {

modules/UI/side_pannels/SidePanelToggler.js

             '#settingsmenu',
             null,
             function() {
-                var settings = Settings.getSettings();
-                $('#setDisplayName').get(0).value = settings.displayName;
-                $('#setEmail').get(0).value = settings.email;
+                $('#setDisplayName').val(Settings.getDisplayName());
+                $('#setEmail').val(Settings.getEmail());
             },
             null);
     },

modules/UI/side_pannels/chat/Chat.js

         $('#nickinput').keydown(function (event) {
             if (event.keyCode === 13) {
                 event.preventDefault();
-                var val = UIUtil.escapeHtml(this.value);
+                let val = this.value;
                 this.value = '';
                 eventEmitter.emit(UIEvents.NICKNAME_CHANGED, val);
             }

modules/UI/side_pannels/contactlist/ContactList.js

         let contactName = $(`#contacts #${id}>p`);
 
         if (displayName) {
-            contactName.html(displayName);
+            contactName.text(displayName);
         }
     },
 

modules/UI/side_pannels/settings/SettingsMenu.js

 export default {
     init (emitter) {
         function update() {
-            let displayName = UIUtil.escapeHtml($('#setDisplayName').val());
+            let displayName = $('#setDisplayName').val();
 
             if (displayName && Settings.getDisplayName() !== displayName) {
                 emitter.emit(UIEvents.NICKNAME_CHANGED, displayName);

modules/UI/util/MessageHandler.js

 /* global $, APP, jQuery, toastr, Impromptu */
 /* jshint -W101 */
 
+import UIUtil from './UIUtil';
+
 /**
  * Flag for enable/disable of the notifications.
  * @type {boolean}
             return;
         var displayNameSpan = '<span class="nickname" ';
         if (displayName) {
-            displayNameSpan += ">" + displayName;
+            displayNameSpan += ">" + UIUtil.escapeHtml(displayName);
         } else {
             displayNameSpan += "data-i18n='" + displayNameKey +
                 "'>" + APP.translation.translateString(displayNameKey);
 }(messageHandler || {}));
 
 module.exports = messageHandler;
-
-

modules/UI/util/UIUtil.js

         return $('<div/>').text(unsafeText).html();
     },
 
+    /**
+     * Unescapes the given text.
+     *
+     * @param {string} safe string which contains escaped html
+     * @returns {string} unescaped html string.
+     */
+    unescapeHtml: function (safe) {
+        return $('<div />').html(safe).text();
+    },
+
     imageToGrayScale: function (canvas) {
         var context = canvas.getContext('2d');
         var imgData = context.getImageData(0, 0, canvas.width, canvas.height);

modules/UI/videolayout/LocalVideo.js

         if (nameSpan.text() !== displayName) {
             if (displayName && displayName.length > 0) {
                 meHTML = APP.translation.generateTranslationHTML("me");
-                $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
+                $('#localDisplayName').html(
+                    UIUtil.escapeHtml(displayName) + ' (' + meHTML + ')'
+                );
             } else {
                 $('#localDisplayName').html(defaultLocalDisplayName);
             }
 
         if (displayName && displayName.length > 0) {
             meHTML = APP.translation.generateTranslationHTML("me");
-            nameSpan.innerHTML = displayName + meHTML;
+            nameSpan.innerHTML = UIUtil.escapeHtml(displayName) + meHTML;
         }
         else {
             nameSpan.innerHTML = defaultLocalDisplayName;
                 editDisplayName.select();
 
                 editDisplayName.one("focusout", function (e) {
-                    self.VideoLayout.inputDisplayNameHandler(this.value);
+                    self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
                     $('#editDisplayName').hide();
                 });
 
     }
 };
 
-LocalVideo.prototype.inputDisplayNameHandler = function (name) {
-    this.emitter.emit(UIEvents.NICKNAME_CHANGED, UIUtil.escapeHtml(name));
-};
-
 LocalVideo.prototype.createConnectionIndicator = function() {
     if(this.connectionIndicator)
         return;

modules/UI/videolayout/RemoteVideo.js

     // If we already have a display name for this video.
     if (nameSpan.length > 0) {
         if (displayName && displayName.length > 0) {
-            $('#' + this.videoSpanId + '_name').html(displayName);
+            $('#' + this.videoSpanId + '_name').text(displayName);
         }
         else if (key && key.length > 0) {
             var nameHtml = APP.translation.generateTranslationHTML(key);
         $('#' + this.videoSpanId)[0].appendChild(nameSpan);
 
         if (displayName && displayName.length > 0) {
-            nameSpan.innerHTML = displayName;
-        }
-        else
+            $(nameSpan).text(displayName);
+        } else {
             nameSpan.innerHTML = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
+        }
         nameSpan.id = this.videoSpanId + '_name';
     }
 };

modules/UI/videolayout/VideoLayout.js

         }
     },
 
-
-    inputDisplayNameHandler (name) {
-        localVideoThumbnail.inputDisplayNameHandler(name);
-    },
-
     videoactive (videoelem, resourceJid) {
 
         console.info(resourceJid + " video is now active", videoelem);

modules/settings/Settings.js

 import {generateUsername} from '../util/UsernameGenerator';
+import UIUtil from '../UI/util/UIUtil';
 
 let email = '';
 let displayName = '';
 
     userId = window.localStorage.jitsiMeetId || '';
     email = window.localStorage.email || '';
-    displayName = window.localStorage.displayname || '';
+    displayName = UIUtil.unescapeHtml(window.localStorage.displayname || '');
     language = window.localStorage.language;
     cameraDeviceId = window.localStorage.cameraDeviceId || '';
     micDeviceId = window.localStorage.micDeviceId || '';
     /**
      * Sets the local user display name and saves it to local storage
      *
-     * @param newDisplayName the new display name for the local user
-     * @returns {string} the display name we just set
+     * @param {string} newDisplayName unescaped display name for the local user
      */
-    setDisplayName: function (newDisplayName) {
-        if (displayName === newDisplayName) {
-            return displayName;
-        }
+    setDisplayName (newDisplayName) {
         displayName = newDisplayName;
-        window.localStorage.displayname = displayName;
-        return displayName;
+        window.localStorage.displayname = UIUtil.escapeHtml(displayName);
     },
 
     /**
-     * Returns the currently used by the user
+     * Returns the escaped display name currently used by the user
      * @returns {string} currently valid user display name.
      */
     getDisplayName: function () {
         return displayName;
     },
 
+    /**
+     * Returns id of the user.
+     * @returns {string} user id
+     */
+    getUserId () {
+        return userId;
+    },
+
     setEmail: function (newEmail) {
         email = newEmail;
         window.localStorage.email = newEmail;