✨ Site > Chat > Add HTML entities back again

lib/chat.js

@@ -2,6 +2,7 @@ const ids = require('./ids.js')
 const robotNames = require('./assets/data/robot-names.json')
 const nodeNotifier = require('node-notifier')
 const path = require('path')
+const HTMLEntities = require('html-entities')
 
 class Chat
 {
@@ -12,6 +13,7 @@ class Chat
         this.users = {}
         this.messages = []
         this.availableRobotNames = this.shuffle(robotNames.slice())
+        this.htmlEntities = new HTMLEntities.XmlEntities()
 
         this.setSocket()
 
@@ -58,7 +60,7 @@ class Chat
                 const broadcastMessage = {}
                 broadcastMessage.id = data.id
                 broadcastMessage.time = data.time
-                broadcastMessage.text = data.text
+                broadcastMessage.text = this.htmlEntities.encode(data.text)
                 broadcastMessage.file = data.file
                 broadcastMessage.version = data.version
                 broadcastMessage.line = data.line
@@ -86,7 +88,7 @@ class Chat
                 }
 
                 // Update name
-                user.name = data.name
+                user.name = this.htmlEntities.encode(data.name)
 
                 // Debug
                 if(this.config.debug >= 1)
@@ -199,7 +201,7 @@ class Chat
             const broadcastMessage = {}
             broadcastMessage.id = data.id
             broadcastMessage.time = data.time
-            broadcastMessage.text = data.text
+            broadcastMessage.text = this.htmlEntities.encode(data.text)
             broadcastMessage.file = data.file
             broadcastMessage.version = data.version
             broadcastMessage.line = data.line

package.json

@@ -62,6 +62,7 @@
     "extract-text-webpack-plugin": "^2.0.0",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
+    "html-entities": "^1.2.1",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "npm-run-all": "^4.0.2",

site/src/components/chat/template.html

@@ -20,7 +20,7 @@
             </div>
         </div>
         <div class="infos" v-if="user">
-            Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
+            Your nickname is <input maxlength="22" class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
         </div>
         <div class="question" v-if="question">
             Question: