diff --git a/.changelog/21711.txt b/.changelog/21711.txt
new file mode 100644
index 0000000000..b3ab185a2a
--- /dev/null
+++ b/.changelog/21711.txt
@@ -0,0 +1,3 @@
+```release-note:security
+Implement HTML sanitization for user-generated content to prevent XSS attacks in the UI.
+```
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index 91195d8962..ebfc1763e6 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -4,6 +4,19 @@
  */
 
 import { runInDebug } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
+
+function sanitizeString(str) {
+  return htmlSafe(
+    String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+  );
+}
+
 // 'environment' getter
 // there are currently 3 levels of environment variables:
 // 1. Those that can be set by the user by setting localStorage values
@@ -58,9 +71,16 @@ export default function (config = {}, win = window, doc = document) {
       } else {
         str = cookies(doc.cookie).join(';');
         const tab = win.open('', '_blank');
-        tab.document.write(
-          `<body><pre>${location.href}#${str}</pre><br /><a href="javascript:Scenario('${str}')">Scenario</a></body>`
-        );
+        if (tab) {
+          const safeLocationHref = sanitizeString(location.href);
+          const safeStr = sanitizeString(str);
+          tab.document.write(`
+            <body>
+              <pre>${safeLocationHref}#${safeStr}</pre><br />
+              <a href="#" onclick="window.opener.Scenario('${safeStr}');window.close();return false;">Scenario</a>
+            </body>
+          `);
+        }
       }
     };
 
