diff --git a/client-src/overlay.js b/client-src/overlay.js
index 11fcc4a9a8..7dad85104b 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -2,6 +2,7 @@
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
const ansiHTML = require("ansi-html");
+const { encode } = require("html-entities");
const colors = {
reset: ["transparent", "transparent"],
@@ -135,8 +136,9 @@ function show(messages, type) {
// Make it look similar to our terminal.
const errorMessage = message.message || messages[0];
- const text = ansiHTML(errorMessage);
- const messageTextNode = document.createTextNode(text);
+ const text = ansiHTML(encode(errorMessage));
+ const messageTextNode = document.createElement("div");
+ messageTextNode.innerHTML = text;
entryElement.appendChild(typeElement);
entryElement.appendChild(document.createElement("br"));
@@ -144,7 +146,6 @@ function show(messages, type) {
entryElement.appendChild(messageTextNode);
entryElement.appendChild(document.createElement("br"));
entryElement.appendChild(document.createElement("br"));
- entryElement.appendChild(document.createElement("br"));
containerElement.appendChild(entryElement);
});
diff --git a/package-lock.json b/package-lock.json
index aa8f879973..d16958541c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"del": "^6.0.0",
"express": "^4.17.1",
"graceful-fs": "^4.2.6",
+ "html-entities": "^2.3.2",
"http-proxy-middleware": "^2.0.0",
"internal-ip": "^6.2.0",
"ipaddr.js": "^2.0.1",
@@ -8493,6 +8494,11 @@
"node": ">=10"
}
},
+ "node_modules/html-entities": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+ "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+ },
"node_modules/html-escaper": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -24191,6 +24197,11 @@
"whatwg-encoding": "^1.0.5"
}
},
+ "html-entities": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+ "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+ },
"html-escaper": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1bdaf7258f..200fe19985 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"del": "^6.0.0",
"express": "^4.17.1",
"graceful-fs": "^4.2.6",
+ "html-entities": "^2.3.2",
"http-proxy-middleware": "^2.0.0",
"internal-ip": "^6.2.0",
"ipaddr.js": "^2.0.1",
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index 931386b5a1..804589bc46 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -35,11 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c
X