Added Utils class and removed XSS issue

.github/workflows/build.yml

@@ -7,6 +7,9 @@ on:
 
 jobs:
   build:
+    permissions:
+      contents: write
+    
     runs-on: ubuntu-latest
 
     steps:

docs/README.md

@@ -34,8 +34,8 @@
 <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank"><img alt="Latest Release" src="https://img.shields.io/github/v/release/SwingTheVine/Wplace-BlueMarble?sort=date&style=flat&label=Latest%20Release&color=blue"></a>
 <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/LICENSE.txt" target="_blank"><img alt="Software License: MPL-2.0" src="https://img.shields.io/badge/Software_License-MPL--2.0-brightgreen?style=flat"></a>
 <a href="https://discord.gg/tpeBPy46hf" target="_blank"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
-<a href="" target="_blank"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-10hrs_0mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
-<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-148-black?style=flat"></a>
+<a href="" target="_blank"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-35hrs_30mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-152-black?style=flat"></a>
 <a href="" target="_blank"><img alt="Total Lines of Code" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=code"></a>
 <a href="" target="_blank"><img alt="Total Comments" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=comments"></a>
 <a href="" target="_blank"><img alt="Build" src="https://github.com/SwingTheVine/Wplace-BlueMarble/actions/workflows/build.yml/badge.svg"></a>

package-lock.json

@@ -7,7 +7,7 @@
       "devDependencies": {
         "esbuild": "^0.25.0"
       },
-      "version": "0.43.40"
+      "version": "0.44.4"
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
@@ -467,5 +467,5 @@
       }
     }
   },
-  "version": "0.43.40"
+  "version": "0.44.4"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.44.0",
+  "version": "0.44.4",
   "type": "module",
   "scripts": {
     "build": "node build/build.js",

src/BlueMarble.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Blue Marble
 // @namespace    https://github.com/SwingTheVine/
-// @version      0.44.0
+// @version      0.44.4
 // @description  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author       SwingTheVine
 // @license      MPL-2.0

src/apiHandler.js

@@ -2,7 +2,10 @@
  * Note: Fetch spying is done in main.js, not here.
  * @since 0.11.1
  */
-export class ApiHandler {
+
+import Utils from "./utils";
+
+export default class ApiHandler {
 
   /** Constructor for ApiHandler class
    * @param {CoordsHandler} coordsHandler - The CoordsHandler instance
@@ -51,7 +54,7 @@ export class ApiHandler {
 
           const nextLevelPixels = Math.ceil(Math.pow(Math.floor(data.jsonData?.level) * Math.pow(30, 0.65), (1/0.65)) - data.jsonData?.pixelsPainted); // Calculates pixels to the next level
 
-          overlay.updateInnerHTML('bm-user-name', `Username: <b>${data.jsonData?.name}</b>`); // Updates the text content of the username field
+          overlay.updateInnerHTML('bm-user-name', `Username: <b>${Utils.escapeHTML(data.jsonData?.name)}</b>`); // Updates the text content of the username field
           overlay.updateInnerHTML('bm-user-droplets', `Droplets: <b>${new Intl.NumberFormat().format(data.jsonData?.droplets)}</b>`); // Updates the text content of the droplets field
           overlay.updateInnerHTML('bm-user-nextlevel', `Next level in <b>${new Intl.NumberFormat().format(nextLevelPixels)}</b> pixel${nextLevelPixels == 1 ? '' : 's'}`); // Updates the text content of the next level field
           break;

src/coordsHandler.js

@@ -1,7 +1,7 @@
 /** Handles translation of coordinate systems.
  * @since 0.42.4
  */
-export class CoordsHandler {
+export default class CoordsHandler {
 
   /** Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.
    * @param {string[]} tile - The tile to convert (as an array like ["12", "124"])

src/main.js

@@ -1,7 +1,7 @@
-import { Overlay } from './overlay.js';
-import { Observers } from './observers.js';
-import { CoordsHandler } from './coordsHandler.js';
-import { ApiHandler } from './apiHandler.js';
+import Overlay from './overlay.js';
+import Observers from './observers.js';
+import CoordsHandler from './coordsHandler.js';
+import ApiHandler from './apiHandler.js';
 
 const name = GM_info.script.name.toString();
 const version = GM_info.script.version.toString();

src/observers.js

@@ -2,7 +2,7 @@
  * This is not an object, but rather a "collection" of functions (in a class).
  * @since 0.43.2
  */
-export class Observers {
+export default class Observers {
 
   /** The constructor for the observer class
    * @since 0.43.2
@@ -29,7 +29,7 @@ export class Observers {
           if (!(node instanceof HTMLElement)) {continue;} // Does not track non-HTMLElements
           
           if (node.matches?.(this.targetDisplayCoords)) {
-            
+
           }
         }
       }

src/overlay.js

@@ -17,7 +17,7 @@
  *   </div>
  * </body>
 */
-export class Overlay {
+export default class Overlay {
 
   /** Constructor for the Overlay class.
    * @param {string} name - The name of the userscript

src/utils.js

@@ -0,0 +1,21 @@
+/** Contains miscellaneous helper functions.
+ * @since 0.44.2
+ */
+export default class Utils {
+
+  /** Sanitizes HTML to display as plain-text.
+   * This prevents some Cross Site Scripting (XSS).
+   * This is handy when you are displaying user-made data, and you *must* use innerHTML.
+   * @param {string} text - The text to sanitize
+   * @returns {string} HTML escaped string
+   * @since 0.44.2
+   * @example
+   * const paragraph = document.createElement('p');
+   * paragraph.innerHTML = escapeHTML('<u>Foobar.</u>');
+   */
+  static escapeHTML(text) {
+    const div = document.createElement('div'); // Creates a div
+    div.textContent = text; // Puts the text in a PLAIN-TEXT property
+    return div.innerHTML; // Returns the HTML property of the div
+  }
+}