Merge pull request #494 from isymchych/escape-nicknames

Escape nicknames before displaying them

conference.js

@@ -860,7 +860,13 @@ export default {
             APP.UI.setUserAvatar(data.attributes.id, data.value);
         });
 
-        APP.UI.addListener(UIEvents.NICKNAME_CHANGED, (nickname) => {
+        APP.UI.addListener(UIEvents.NICKNAME_CHANGED, (nickname = '') => {
+            nickname = nickname.trim();
+
+            if (nickname === APP.settings.getDisplayName()) {
+                return;
+            }
+
             APP.settings.setDisplayName(nickname);
             room.setDisplayName(nickname);
             APP.UI.changeDisplayName(APP.conference.localId, nickname);

css/chat.css

@@ -22,6 +22,9 @@
     overflow-x: hidden;
     word-wrap: break-word;
 }
+#chatspace.is-conversation-mode #chatconversation {
+    visibility: visible;
+}
 
 .localuser {
     color: #087dba;
@@ -61,6 +64,10 @@
     box-shadow: none;
 }
 
+#chatspace.is-conversation-mode #usermsg {
+    visibility: visible;
+}
+
 #nickname {
     position: absolute;
     text-align: center;
@@ -72,6 +79,10 @@
     width: 95%;
 }
 
+#chatspace.is-conversation-mode #nickname {
+    visibility: hidden;
+}
+
 #nickinput {
     margin-top: 20px;
     font-size: 14px;
@@ -168,6 +179,10 @@
     visibility: hidden;
 }
 
+#chatspace.is-conversation-mode #smileysarea {
+    visibility: visible;
+}
+
 #smileysContainer {
     display: none;
     position: absolute;

modules/UI/UI.js

@@ -223,12 +223,13 @@ UI.changeDisplayName = function (id, displayName) {
  * 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);
@@ -236,14 +237,14 @@ UI.initConference = function () {
     // 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) {
@@ -559,7 +560,7 @@ UI.updateUserRole = function (user) {
         messageHandler.notify(
             displayName, 'notify.somebody',
             'connected', 'notify.grantedTo', {
-                to: displayName
+                to: UIUtil.escapeHtml(displayName)
             }
         );
     } else {
@@ -607,8 +608,11 @@ UI.toggleContactList = function () {
     PanelToggler.toggleContactList();
 };
 
-UI.inputDisplayNameHandler = function (value) {
-    VideoLayout.inputDisplayNameHandler(value);
+/**
+ * Handle new user display name.
+ */
+UI.inputDisplayNameHandler = function (newDisplayName) {
+    eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
 };
 
 /**
@@ -888,7 +892,7 @@ UI.inviteParticipants = function (roomUrl, conferenceName, key, nick) {
     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

@@ -148,9 +148,8 @@ var PanelToggler = {
             '#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

@@ -179,7 +179,7 @@ var Chat = {
         $('#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);
             }
@@ -292,13 +292,12 @@ var Chat = {
 
     /**
      * Sets the chat conversation mode.
+     * @param {boolean} isConversationMode if chat should be in
+     * conversation mode or not.
      */
     setChatConversationMode (isConversationMode) {
+        $('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
         if (isConversationMode) {
-            $('#nickname').css({visibility: 'hidden'});
-            $('#chatconversation').css({visibility: 'visible'});
-            $('#usermsg').css({visibility: 'visible'});
-            $('#smileysarea').css({visibility: 'visible'});
             $('#usermsg').focus();
         }
     },

modules/UI/side_pannels/contactlist/ContactList.js

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

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -40,11 +40,9 @@ function generateDevicesOptions(items, selectedId) {
 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);
-            }
+            emitter.emit(UIEvents.NICKNAME_CHANGED, displayName);
 
             let language = $("#languages_selectbox").val();
             if (language !== Settings.getLanguage()) {

modules/UI/util/MessageHandler.js

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

modules/UI/util/UIUtil.js

@@ -72,6 +72,16 @@
         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

@@ -65,7 +65,9 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
         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);
             }
@@ -81,7 +83,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
 
         if (displayName && displayName.length > 0) {
             meHTML = APP.translation.generateTranslationHTML("me");
-            nameSpan.innerHTML = displayName + meHTML;
+            nameSpan.innerHTML = UIUtil.escapeHtml(displayName) + meHTML;
         }
         else {
             nameSpan.innerHTML = defaultLocalDisplayName;
@@ -126,7 +128,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
                 editDisplayName.select();
 
                 editDisplayName.one("focusout", function (e) {
-                    self.VideoLayout.inputDisplayNameHandler(this.value);
+                    self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
                     $('#editDisplayName').hide();
                 });
 
@@ -141,10 +143,6 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
     }
 };
 
-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

@@ -359,7 +359,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
     // 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);
@@ -374,10 +374,10 @@ RemoteVideo.prototype.setDisplayName = function(displayName, 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

@@ -347,11 +347,6 @@ var VideoLayout = {
         }
     },
 
-
-    inputDisplayNameHandler (name) {
-        localVideoThumbnail.inputDisplayNameHandler(name);
-    },
-
     videoactive (videoelem, resourceJid) {
 
         console.info(resourceJid + " video is now active", videoelem);

modules/settings/Settings.js

@@ -1,4 +1,5 @@
 import {generateUsername} from '../util/UsernameGenerator';
+import UIUtil from '../UI/util/UIUtil';
 
 let email = '';
 let displayName = '';
@@ -32,7 +33,7 @@ if (supportsLocalStorage()) {
 
     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 || '';
@@ -46,26 +47,29 @@ export default {
     /**
      * 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;