From 197022102f3ad08836e28e858c7be12fa0c6b5c0 Mon Sep 17 00:00:00 2001
From: tpluscode <tpluscode@users.noreply.github.com>
Date: Mon, 1 May 2023 12:43:53 +0200
Subject: [PATCH] fix: sanitise endpoint selection

---
 packages/yasgui/package.json          |  1 +
 packages/yasgui/src/endpointSelect.ts | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/yasgui/package.json b/packages/yasgui/package.json
index 6f2143a..555b3bb 100644
--- a/packages/yasgui/package.json
+++ b/packages/yasgui/package.json
@@ -34,6 +34,7 @@
     "autosuggest-highlight": "^3.1.1",
     "blueimp-md5": "^2.12.0",
     "choices.js": "^9.0.1",
+    "dompurify": "^2.0.7",
     "es6-object-assign": "^1.1.0",
     "jsuri": "^1.3.1",
     "lodash-es": "^4.17.15",
diff --git a/packages/yasgui/src/endpointSelect.ts b/packages/yasgui/src/endpointSelect.ts
index 73e8592..7a72b6f 100644
--- a/packages/yasgui/src/endpointSelect.ts
+++ b/packages/yasgui/src/endpointSelect.ts
@@ -4,6 +4,7 @@ import { pick } from "lodash-es";
 import { addClass } from "@triply/yasgui-utils";
 require("./endpointSelect.scss");
 import parse from "autosuggest-highlight/parse";
+import { sanitize } from "dompurify";
 
 //Export this here instead of from our custom-types folder of autocomplete-js
 //as this interface is exported via the yasgui config. The custom typings are
@@ -128,15 +129,14 @@ export class EndpointSelect extends EventEmitter {
       },
       resultItem: {
         content: (data, source) => {
+          const endpoint = sanitize(data.value.endpoint);
+
           // Custom handling of items with history, these are able to be removed
           if (data.value.type && data.value.type === "history") {
             // Add a container to make folding work correctly
             const resultsContainer = document.createElement("div");
             // Match is highlighted text
-            resultsContainer.innerHTML = parse(
-              data.value.endpoint,
-              createHighlights(data.value.endpoint, this.inputField.value)
-            ).reduce(
+            resultsContainer.innerHTML = parse(endpoint, createHighlights(endpoint, this.inputField.value)).reduce(
               (current, object) => (object.highlight ? current + object.text.bold() : current + object.text),
               ""
             );
@@ -147,7 +147,7 @@ export class EndpointSelect extends EventEmitter {
             removeBtn.textContent = "✖";
             addClass(removeBtn, "removeItem");
             removeBtn.addEventListener("mousedown", (event) => {
-              this.history = this.history.filter((item) => item.endpoint !== data.value.endpoint);
+              this.history = this.history.filter((item) => item.endpoint !== endpoint);
               this.emit(
                 "remove",
                 this.value,