Allpw HTML in player names, sanitise it to be sure

package-lock.json

@@ -1115,6 +1115,16 @@
         }
       }
     },
+    "@esri/arcgis-html-sanitizer": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@esri/arcgis-html-sanitizer/-/arcgis-html-sanitizer-2.5.0.tgz",
+      "integrity": "sha512-axq4dGwm3bjY/iR1DoPxrnJOt2SKXD0Cy1QYihK4yZx25CEDpfdSUBE71oz77BSYFz+KQZvh6A3xxOgLnVEoWA==",
+      "dev": true,
+      "requires": {
+        "lodash.isplainobject": "^4.0.6",
+        "xss": "^1.0.8"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -4537,6 +4547,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
+      "dev": true
+    },
     "cssnano": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -7989,6 +8005,12 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -13378,6 +13400,16 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xss": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.8.tgz",
+      "integrity": "sha512-3MgPdaXV8rfQ/pNn16Eio6VXYPTkqwa0vc7GkiymmY/DqR1SE/7VPAAVZz1GJsJFrllMYO3RHfEaiUGjab6TNw==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@esri/arcgis-html-sanitizer": "^2.5.0",
     "@types/clipboard": "^2.0.1",
     "@types/leaflet": "^1.5.19",
     "@typescript-eslint/eslint-plugin": "^4.1.0",

src/api.ts

@@ -14,6 +14,9 @@ import {
 	DynmapUpdateResponse, DynmapUpdates,
 	DynmapWorld
 } from "@/dynmap";
+import { Sanitizer } from "@esri/arcgis-html-sanitizer";
+
+const sanitizer = new Sanitizer();
 
 function buildServerConfig(response: any): DynmapServerConfig {
 	return {
@@ -414,7 +417,7 @@ export default {
 					account: player.account || "",
 					health: player.health || 0,
 					armor: player.armor || 0,
-					name: player.name || "Steve",
+					name: player.name ? sanitizer.sanitize(player.name) : "Steve",
 					sort: player.sort || 0,
 					location: {
 						x: player.x || 0,

src/components/sidebar/PlayerListItem.vue

@@ -4,7 +4,7 @@
 		<button class="player__name" type="button" title="Click to center on player&#10;Double-click to follow player"
 				@click.prevent="pan"
 				@keydown="onKeydown"
-				@dblclick.prevent="follow">{{ player.name }}</button>
+				@dblclick.prevent="follow" v-html="player.name"></button>
 	</li>
 </template>
 

src/leaflet/icon/PlayerIcon.ts

@@ -122,7 +122,7 @@ export class PlayerIcon extends DivIcon {
 			return;
 		}
 
-		this._playerName!.innerText = this._player!.name;
+		this._playerName!.innerHTML = this._player!.name;
 
 		if(this.options.showHealth) {
 			if (this._player.health !== undefined && this._player.armor !== undefined) {