diff --git a/.changelog/21711.txt b/.changelog/21711.txt
new file mode 100644
index 000000000000..b3ab185a2a3f
--- /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 91195d896281..ebfc1763e616 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, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+ );
+}
+
// '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(
- `${location.href}#${str}
Scenario`
- );
+ if (tab) {
+ const safeLocationHref = sanitizeString(location.href);
+ const safeStr = sanitizeString(str);
+ tab.document.write(`
+
+ ${safeLocationHref}#${safeStr}
+ Scenario
+
+ `);
+ }
}
};