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

- Error:

./foo.js - 1:1 Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See - https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -114,11 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on X

- Error:

./foo.js - 1:1 Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See - https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -193,11 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- Error:

./foo.js - 1:1 Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See - https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -239,11 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- Error:

./foo.js - 1:1 Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See - https://webpack.js.org/concepts#loaders > \`;a


+ Error:

+
+ ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See + https://webpack.js.org/concepts#loaders > \`;a +
+

@@ -365,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and X

- Warning:

<strong>strong</strong>


+ Warning:

+
<strong>strong</strong>
+

- Error:

<strong>strong</strong>


+ Error:

+
<strong>strong</strong>
+

@@ -431,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -509,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -571,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -633,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true" X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -695,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -722,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru " `; +exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = ` +" +
+ Compiled with problems:

+
+ Error:

+
+ + 18 | + Render + ansi formatted text +
+

+
+
+ +" +`; + +exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show on an error for initial compilation: overlay html 1`] = ` "


- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -819,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla X

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -881,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true": X

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -943,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 index 751f71ca66..6aac366d4c 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 @@ -35,10 +35,14 @@ exports[`overlay should not show initially, then show on an error and allow to c X

- Error:

Module - parse failed: Unterminated template (1:1) You may need an appropriate - loader to handle this file type, currently no loaders are configured to - process this file. See https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -113,10 +117,14 @@ exports[`overlay should not show initially, then show on an error, then hide on X

- Error:

Module - parse failed: Unterminated template (1:1) You may need an appropriate - loader to handle this file type, currently no loaders are configured to - process this file. See https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -191,10 +199,14 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- Error:

Module - parse failed: Unterminated template (1:1) You may need an appropriate - loader to handle this file type, currently no loaders are configured to - process this file. See https://webpack.js.org/concepts#loaders > \`;


+ Error:

+
+ Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See + https://webpack.js.org/concepts#loaders > \`; +
+

@@ -236,10 +248,14 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- Error:

Module - parse failed: Unterminated template (1:1) You may need an appropriate - loader to handle this file type, currently no loaders are configured to - process this file. See https://webpack.js.org/concepts#loaders > \`;a


+ Error:

+
+ Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See + https://webpack.js.org/concepts#loaders > \`;a +
+

@@ -361,12 +377,14 @@ exports[`overlay should show on a warning and error for initial compilation and X

- Warning:

<strong>strong</strong>


+ Warning:

+
<strong>strong</strong>
+

- Error:

<strong>strong</strong>


+ Error:

+
<strong>strong</strong>
+

@@ -427,24 +445,29 @@ exports[`overlay should show on a warning and error for initial compilation: ove X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -505,8 +528,9 @@ exports[`overlay should show on a warning for initial compilation: overlay html X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -567,8 +591,9 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -629,8 +654,9 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true" X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -691,8 +717,9 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

@@ -718,6 +745,82 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru " `; +exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = ` +" +
+ Compiled with problems:

+
+ Error:

+
+ + 18 | + Render + ansi formatted text +
+

+
+
+ +" +`; + +exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show on an error for initial compilation: overlay html 1`] = ` "


- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -815,8 +919,9 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla X

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -877,8 +982,9 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true": X

- Error:

Error from - compilation. Can't find 'test' module.


+ Error:

+
Error from compilation. Can't find 'test' module.
+

@@ -939,8 +1045,9 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true X

- Warning:

Warning - from compilation


+ Warning:

+
Warning from compilation
+

diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js index ca39ed3042..6cfdda9bf2 100644 --- a/test/e2e/overlay.test.js +++ b/test/e2e/overlay.test.js @@ -200,6 +200,59 @@ describe("overlay", () => { }); }); + it("should show on an ansi formatted error for initial compilation", async () => { + const compiler = webpack(config); + + new ErrorPlugin("  18 | Render ansi formatted text").apply( + compiler + ); + + const devServerOptions = { + host: "0.0.0.0", + port, + }; + const server = new Server(devServerOptions, compiler); + + await new Promise((resolve, reject) => { + server.listen(devServerOptions.port, devServerOptions.host, (error) => { + if (error) { + reject(error); + + return; + } + + resolve(); + }); + }); + + const { page, browser } = await runBrowser(); + + await page.goto(`http://localhost:${port}/main`, { + waitUntil: "networkidle0", + }); + + const pageHtml = await page.evaluate(() => document.body.outerHTML); + const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); + const overlayFrame = await overlayHandle.contentFrame(); + const overlayHtml = await overlayFrame.evaluate( + () => document.body.outerHTML + ); + + expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot( + "page html" + ); + expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot( + "overlay html" + ); + + await browser.close(); + await new Promise((resolve) => { + server.close(() => { + resolve(); + }); + }); + }); + it("should show on a warning and error for initial compilation and protects against xss", async () => { const compiler = webpack(config);