From 92ef228af9ea44d7781dd3f2948ccd8e3b3a54a5 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 20 May 2025 10:16:14 +0200
Subject: [PATCH] UI: add custom CSS support (#21263)

---
 assets/index.html                      |  1 +
 assets/js/app.js                       |  7 +++++++
 assets/js/components/Footer/Footer.vue |  2 +-
 assets/js/components/Site/Site.vue     |  5 ++++-
 assets/js/components/Top/Header.vue    |  5 ++++-
 cmd/flags.go                           |  3 +++
 cmd/root.go                            | 17 +++++++++--------
 server/http.go                         | 20 ++++++++++++++++++--
 server/http_site_handler.go            |  3 ++-
 tests/basics.spec.js                   | 12 ++++++++++++
 tests/custom-css.css                   | 12 ++++++++++++
 tests/custom-css.spec.js               | 23 +++++++++++++++++++++++
 12 files changed, 96 insertions(+), 14 deletions(-)
 create mode 100644 tests/custom-css.css
 create mode 100644 tests/custom-css.spec.js

diff --git a/assets/index.html b/assets/index.html
index 7e4f2f4d5..1d1e63fce 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -30,6 +30,7 @@
         version: "[[.Version]]",
         configured: "[[.Configured]]",
         commit: "[[.Commit]]",
+        customCss: [[.CustomCss]],
       };
     </script>
 
diff --git a/assets/js/app.js b/assets/js/app.js
index 5b08260fc..93476be6a 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -75,3 +75,10 @@ window.app = app.mount("#app");
 
 watchThemeChanges();
 appDetection();
+
+if (window.evcc.customCss) {
+  const link = document.createElement("link");
+  link.href = `./custom.css`;
+  link.rel = "stylesheet";
+  document.head.appendChild(link);
+}
diff --git a/assets/js/components/Footer/Footer.vue b/assets/js/components/Footer/Footer.vue
index af84b8924..a7b9df52a 100644
--- a/assets/js/components/Footer/Footer.vue
+++ b/assets/js/components/Footer/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-	<footer class="footer">
+	<footer class="footer" data-testid="footer">
 		<div class="container py-2">
 			<div class="d-flex justify-content-between">
 				<Version v-bind="version" />
diff --git a/assets/js/components/Site/Site.vue b/assets/js/components/Site/Site.vue
index 7786df566..726dc6e8f 100644
--- a/assets/js/components/Site/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="d-flex flex-column site safe-area-inset">
 		<div class="container px-4 top-area">
-			<div class="d-flex justify-content-between align-items-center my-3 my-md-4">
+			<div
+				class="d-flex justify-content-between align-items-center my-3 my-md-4"
+				data-testid="header"
+			>
 				<h1 class="d-block my-0">
 					<span v-if="!isInitialSetup">
 						{{ siteTitle || "evcc" }}
diff --git a/assets/js/components/Top/Header.vue b/assets/js/components/Top/Header.vue
index 552057178..7d2344d72 100644
--- a/assets/js/components/Top/Header.vue
+++ b/assets/js/components/Top/Header.vue
@@ -1,5 +1,8 @@
 <template>
-	<header class="d-flex justify-content-between align-items-center py-3 py-md-4">
+	<header
+		class="d-flex justify-content-between align-items-center py-3 py-md-4"
+		data-testid="header"
+	>
 		<h1 class="mb-1 pt-1 d-flex text-nowrap text-truncate">
 			<router-link class="evcc-default-text" to="/" data-testid="home-link">
 				<shopicon-regular-home size="s" class="icon"></shopicon-regular-home>
diff --git a/cmd/flags.go b/cmd/flags.go
index 62e4489d2..fc9dacf64 100644
--- a/cmd/flags.go
+++ b/cmd/flags.go
@@ -22,6 +22,9 @@ const (
 	flagDisableAuth            = "disable-auth"
 	flagDisableAuthDescription = "Disable authentication (dangerous)"
 
+	flagCustomCss            = "custom-css"
+	flagCustomCssDescription = "Additional user-defined CSS file for custom styling. No compatibility guarantees."
+
 	flagBatteryMode                = "battery-mode"
 	flagBatteryModeDescription     = "Set battery mode (normal, hold, charge)"
 	flagBatteryModeWait            = "battery-mode-wait"
diff --git a/cmd/root.go b/cmd/root.go
index 881ab96b3..7af4be40f 100644
--- a/cmd/root.go
+++ b/cmd/root.go
@@ -36,13 +36,13 @@ const (
 )
 
 var (
-	log         = util.NewLogger("main")
-	cfgFile     string
-	cfgDatabase string
-
-	ignoreEmpty = ""                                      // ignore empty keys
-	ignoreLogs  = []string{"log"}                         // ignore log messages, including warn/error
-	ignoreMqtt  = []string{"log", "auth", "releaseNotes"} // excessive size may crash certain brokers
+	log           = util.NewLogger("main")
+	cfgFile       string
+	cfgDatabase   string
+	customCssFile string
+	ignoreEmpty   = ""                                      // ignore empty keys
+	ignoreLogs    = []string{"log"}                         // ignore log messages, including warn/error
+	ignoreMqtt    = []string{"log", "auth", "releaseNotes"} // excessive size may crash certain brokers
 
 	viper *vpr.Viper
 
@@ -70,6 +70,7 @@ func init() {
 	rootCmd.PersistentFlags().Bool(flagIgnoreDatabase, false, flagIgnoreDatabaseDescription)
 	rootCmd.PersistentFlags().String(flagTemplate, "", flagTemplateDescription)
 	rootCmd.PersistentFlags().String(flagTemplateType, "", flagTemplateTypeDescription)
+	rootCmd.PersistentFlags().StringVar(&customCssFile, flagCustomCss, "", flagCustomCssDescription)
 
 	// config file options
 	rootCmd.PersistentFlags().StringP("log", "l", "info", "Log level (fatal, error, warn, info, debug, trace)")
@@ -159,7 +160,7 @@ func runRoot(cmd *cobra.Command, args []string) {
 
 	// create web server
 	socketHub := server.NewSocketHub()
-	httpd := server.NewHTTPd(fmt.Sprintf(":%d", conf.Network.Port), socketHub)
+	httpd := server.NewHTTPd(fmt.Sprintf(":%d", conf.Network.Port), socketHub, customCssFile)
 
 	// metrics
 	if viper.GetBool("metrics") {
diff --git a/server/http.go b/server/http.go
index 90ee3ce20..77302f9d3 100644
--- a/server/http.go
+++ b/server/http.go
@@ -3,6 +3,7 @@ package server
 import (
 	"fmt"
 	"net/http"
+	"os"
 	"time"
 
 	eapi "github.com/evcc-io/evcc/api"
@@ -40,7 +41,7 @@ type HTTPd struct {
 }
 
 // NewHTTPd creates HTTP server with configured routes for loadpoint
-func NewHTTPd(addr string, hub *SocketHub) *HTTPd {
+func NewHTTPd(addr string, hub *SocketHub, customCssFile string) *HTTPd {
 	router := mux.NewRouter().StrictSlash(true)
 
 	log := util.NewLogger("httpd")
@@ -72,10 +73,25 @@ func NewHTTPd(addr string, hub *SocketHub) *HTTPd {
 		})
 	})
 
-	static.HandleFunc("/", indexHandler())
+	if customCssFile != "" {
+		log.WARN.Printf("❗ using custom CSS: %s", customCssFile)
+		if _, err := os.Stat(customCssFile); os.IsNotExist(err) {
+			log.FATAL.Fatalf("custom CSS file does not exist: %s", customCssFile)
+		}
+		static.HandleFunc("/custom.css", func(w http.ResponseWriter, r *http.Request) {
+			// disable caching
+			w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0")
+			w.Header().Set("Pragma", "no-cache")
+			w.Header().Set("Expires", "0")
+			http.ServeFile(w, r, customCssFile)
+		})
+	}
+
+	static.HandleFunc("/", indexHandler(customCssFile != ""))
 	for _, dir := range []string{"assets", "meta"} {
 		static.PathPrefix("/" + dir).Handler(http.FileServer(http.FS(assets.Web)))
 	}
+
 	static.PathPrefix("/i18n").Handler(http.StripPrefix("/i18n", http.FileServer(http.FS(assets.I18n))))
 
 	srv := &HTTPd{
diff --git a/server/http_site_handler.go b/server/http_site_handler.go
index 022190d2a..c650fbb37 100644
--- a/server/http_site_handler.go
+++ b/server/http_site_handler.go
@@ -37,7 +37,7 @@ func getPreferredLanguage(header string) string {
 	return base.String()
 }
 
-func indexHandler() http.HandlerFunc {
+func indexHandler(customCss bool) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", "text/html; charset=UTF-8")
 
@@ -60,6 +60,7 @@ func indexHandler() http.HandlerFunc {
 			"Version":     util.Version,
 			"Commit":      util.Commit,
 			"DefaultLang": defaultLang,
+			"CustomCss":   customCss,
 		}); err != nil {
 			log.ERROR.Println("httpd: failed to render main page:", err.Error())
 		}
diff --git a/tests/basics.spec.js b/tests/basics.spec.js
index e09d31e20..6b67a567c 100644
--- a/tests/basics.spec.js
+++ b/tests/basics.spec.js
@@ -81,3 +81,15 @@ test.describe("loadpoint settings", async () => {
     await expect(page.getByText("~ 1.4 kW")).toBeVisible();
   });
 });
+
+test.describe("network requests", async () => {
+  test("no failed requests", async ({ page }) => {
+    const failedRequests = [];
+    page.on("requestfailed", (request) => failedRequests.push(request.url()));
+
+    await page.reload();
+    await page.waitForLoadState("networkidle");
+
+    expect(failedRequests).toHaveLength(0);
+  });
+});
diff --git a/tests/custom-css.css b/tests/custom-css.css
new file mode 100644
index 000000000..68ec9d6e4
--- /dev/null
+++ b/tests/custom-css.css
@@ -0,0 +1,12 @@
+:root {
+	--evcc-dark-green: rebeccapurple;
+	--evcc-yellow: hotpink;
+}
+
+[data-testid="header"],
+[data-testid="footer"] {
+	display: none !important;
+}
+
+/* test against markup injection */
+</style><script>alert("hello");</script><style>
\ No newline at end of file
diff --git a/tests/custom-css.spec.js b/tests/custom-css.spec.js
new file mode 100644
index 000000000..61c274adb
--- /dev/null
+++ b/tests/custom-css.spec.js
@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { start, stop, baseUrl } from "./evcc";
+
+test.use({ baseURL: baseUrl() });
+
+test.beforeAll(async () => {
+  await start("basics.evcc.yaml", null, ["--disable-auth", "--custom-css", "tests/custom-css.css"]);
+});
+
+test.afterAll(async () => {
+  await stop();
+});
+
+test.describe("custom-css", async () => {
+  test("header and footer are hidden", async ({ page }) => {
+    page.on("dialog", () => {
+      throw new Error("XSS: inline script detected");
+    });
+    await page.goto("/");
+    await expect(page.getByTestId("header")).toBeHidden();
+    await expect(page.getByTestId("footer")).toBeHidden();
+  });
+});