diff --git a/js/loader.js b/js/loader.js index 01bd37c2cb..35c430196a 100644 --- a/js/loader.js +++ b/js/loader.js @@ -239,7 +239,7 @@ const loadFile = (fileName) => { resolve(); }; stylesheet.onerror = () => { - Log.error("Error on loading stylesheet:", fileName); + Log.error(`Could not load stylesheet '${fileName}'.`); stylesheet.remove(); resolve(); }; diff --git a/js/server.js b/js/server.js index 9ca6667a4c..38b0c83e08 100644 --- a/js/server.js +++ b/js/server.js @@ -164,6 +164,17 @@ class Server { res.status(200).send("OK"); }); + // Run after express.static: missing CSS gets a CSS-typed 404 instead of + // Express's default HTML 404, which browsers report as a MIME mismatch. + const handleMissingStylesheet = (req, res, next) => { + if (path.extname(req.path).toLowerCase() !== ".css") { + return next(); + } + + res.status(404).type("text/css").send(""); + }; + app.use(handleMissingStylesheet); + this.#server.on("listening", () => { resolve({ app, diff --git a/tests/e2e/serveronly_spec.js b/tests/e2e/serveronly_spec.js index b793543966..8fe9563742 100644 --- a/tests/e2e/serveronly_spec.js +++ b/tests/e2e/serveronly_spec.js @@ -34,6 +34,12 @@ describe("App environment", () => { const res = await fetch("http://localhost:8080/nothing"); expect(res.status).toBe(404); }); + + it("missing stylesheets should return 404 with a CSS content type", async () => { + const res = await fetch("http://localhost:8080/config/missing.css"); + expect(res.status).toBe(404); + expect(res.headers.get("content-type")).toMatch(/^text\/css/); + }); }); describe("Check config", () => {