fix: Disables Markdown for user messages and adds sanitization for se…

…rver description

package.json

@@ -1,6 +1,6 @@
 {
   "name": "net64plus",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "compatVersion": "1.0.0",
   "description": "Net64+ client",
   "main": "index.js",

src/models/State.model.ts

@@ -36,6 +36,7 @@ export interface ChatMessage {
   time: string
   message: string
   username: string
+  isTrusted: boolean
 }
 
 export interface ChatStateDraft {

src/renderer/Connector.ts

@@ -53,7 +53,7 @@ export class Connector {
   }
 
   private onSetPlayerId = (event: Electron.Event, playerId: number) => {
-    addGlobalMessage('Connected', '[SERVER]')
+    addGlobalMessage('Connected', '[SERVER]', true)
   }
 
   private onSetGameMode = (event: Electron.Event, gameMode: number) => {
@@ -76,11 +76,11 @@ export class Connector {
     const server = store.getState().connection.server
     if (!server || !server.players) return
     const username = server.players[senderId] && server.players[senderId].username
-    addGlobalMessage(message, username || '?')
+    addGlobalMessage(message, username || '?', false)
   }
 
   private onCommandMessage = (event: Electron.Event, { message }: { message: string }) => {
-    addGlobalMessage(message, '[SERVER]')
+    addGlobalMessage(message, '[SERVER]', true)
   }
 
   private onConnectionError = (event: Electron.Event, message: string) => {

src/renderer/components/areas/ChatArea.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 
 import { connector } from '../..'
 import { SMMButton } from '../buttons/SMMButton'
+import { ChatMessagePanel } from '../panels/ChatMessagePanel'
 import { State, ChatMessage } from '../../../models/State.model'
 
 interface ChatAreaProps {
@@ -63,18 +64,19 @@ class Area extends React.PureComponent<ChatAreaProps, ChatAreaState> {
   }
   renderChatMessages (chat: ChatMessage[]) {
     return chat.map(
-      message => {
-        const html = `[${message.time}] ${message.username}: ${message.message}`
-          .replace('<p>', '<p class="header">')
-        return (
-          <div
+      message =>
+        message.isTrusted
+          ? <div
             key={message.key}
             dangerouslySetInnerHTML={{
-              __html: html
+              __html: `[${message.time}] ${message.username}: ${message.message}`
+              .replace('<p>', '<p class="header">')
             }}
           />
-        )
-      }
+          : <ChatMessagePanel
+            key={message.key}
+            message={message}
+          />
     )
   }
   render () {

src/renderer/components/panels/ChatMessagePanel.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { ChatMessage } from '../../../models/State.model'
+
+interface ChatMessagePanelProps {
+  message: ChatMessage
+}
+
+export class ChatMessagePanel extends React.PureComponent<ChatMessagePanelProps> {
+  public render (): JSX.Element {
+    const { message } = this.props
+    return (
+      <div>
+        {
+          `[${message.time}] ${message.username}: ${message.message}`
+        }
+      </div>
+    )
+  }
+}

src/renderer/components/panels/ServerPanel.tsx

@@ -15,6 +15,8 @@ import { State } from '../../../models/State.model'
 import { Server } from '../../../models/Server.model'
 import { IPlayer, GameModeType } from '../../../../proto/ServerClientMessage'
 
+const { sanitize } = require('dompurify').default
+
 interface ServerPanelProps {
   dispatch: Dispatch<State>
   server: Server
@@ -62,7 +64,7 @@ class Panel extends React.PureComponent<ServerPanelProps, ServerPanelState> {
         shell.openExternal(href)
       }
     }
-    description = document.body.outerHTML
+    description = sanitize(document.body.outerHTML)
     return description
   }
   onToggle () {

src/renderer/utils/chat.util.ts

@@ -8,14 +8,18 @@ import { ChatMessage } from '../../models/State.model'
 
 const { sanitize } = require('dompurify').default
 
-export function addGlobalMessage (message: string, username: string) {
+export function addGlobalMessage (message: string, username: string, isTrusted = false) {
   const date = new Date()
-  const sanitizedMessage = sanitize(emojify(marked(message.replace(/<.*>/g, ''))))
+  const sanitizedMessage = isTrusted
+    ? sanitize(emojify(marked(message)))
+    : emojify(message)
+  console.log('MSG', message, sanitizedMessage)
   const chatMessage: ChatMessage = {
     key: date.getUTCMilliseconds(),
     time: `${String(date.getHours()).padStart(2, '00')}:${String(date.getMinutes()).padStart(2, '00')}:${String(date.getSeconds()).padStart(2, '00')}`,
     message: sanitizedMessage,
-    username: sanitize(username).substr(0, MAX_LENGTH_USERNAME)
+    username: sanitize(username).substr(0, MAX_LENGTH_USERNAME),
+    isTrusted
   }
   store.dispatch(addGlobalChatMessage(chatMessage))
 }