serve the webinterfaces statically when available

Author: ffreddow

backend/Cargo.lock

@@ -14,6 +14,7 @@ path = "src/api_docs.rs"
 actix-web = "4.10.2"
 actix-web-validator = {git = "https://github.com/Tinkerforge/actix-web-validator", rev = "a001926b1a51ff07daa134abcc2d8855455f0604"}
 actix = "0.13.3"
+actix-files = "0.6"
 
 dotenvy = "0.15.7"
 db_connector = { path = "../db_connector" }

backend/Cargo.toml

@@ -23,6 +23,7 @@ pub mod check_expiration;
 pub mod management;
 pub mod selfdestruct;
 pub mod state;
+pub mod static_files;
 pub mod user;
 
 use actix_web::web::{self, scope};
@@ -33,6 +34,7 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
     cfg.configure(user::configure);
     cfg.configure(auth::configure);
     cfg.configure(charger::configure);
+    cfg.configure(static_files::configure);
 
     cfg.service(management::management);
     cfg.service(selfdestruct::selfdestruct);

backend/src/routes/mod.rs

@@ -0,0 +1,52 @@
+/* esp32-remote-access
+ * Copyright (C) 2025 Frederic Henrichs <[email protected]>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the
+ * Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+ * Boston, MA 02111-1307, USA.
+ */
+
+use actix_web::{web, HttpRequest, Result};
+use actix_files::NamedFile;
+use std::path::PathBuf;
+
+// Define static file serving path based on build configuration
+
+#[cfg(not(debug_assertions))]
+const STATIC_SERVE_FROM: &str = "/static/";
+
+async fn serve_gzip_static(req: HttpRequest) -> Result<NamedFile> {
+    let path: PathBuf = req.match_info().query("filename").parse().unwrap();
+
+    #[cfg(debug_assertions)]
+    let static_serve_from = {
+        let env = std::env::var("WARP_CHARGER_GIT_URL").unwrap_or_else(|_| "warp-charger".to_string());
+        format!("{}/firmwares/static_html/", env)
+    };
+    #[cfg(not(debug_assertions))]
+    let static_serve_from = "/static/";
+
+    let base_path = PathBuf::from(static_serve_from);
+    let full_path = base_path.join(&path);
+
+    let file = NamedFile::open(full_path)?;
+    Ok(file)
+}
+
+pub fn configure(cfg: &mut web::ServiceConfig) {
+    cfg.service(
+        web::resource("/static/{filename:.*}")
+            .route(web::get().to(serve_gzip_static))
+    );
+}

backend/src/routes/static_files.rs

@@ -43,6 +43,7 @@ services:
     working_dir: /app
     volumes:
       - ../backend/target/release:/app
+      - ../../warp-charger/firmwares/static_html:/static
     environment:
       - DATABASE_URL=${DATABASE_URL}
       - JWT_SECRET=${JWT_SECRET}

docker/docker-compose.yml

@@ -86,6 +86,12 @@ export function App() {
     }, [connected.value, t]);
 
     useEffect(() => {
+        if (window.parent !== window) {
+            console.warn("Warp Charger is running in an iframe, closing window");
+            const errorMessage = t("iframe.error_message");
+            window.parent.postMessage({ type: "error", message: errorMessage }, "*");
+            return;
+        }
         refresh_access_token();
         startVersionChecking(10);
     }, []);

frontend/src/index.tsx

@@ -169,5 +169,8 @@ export const de ={
         "new_version_available": "Eine neue Version der Anwendung ist verfügbar. Jetzt neu laden, um die neuesten Funktionen und Fehlerbehebungen zu erhalten?",
         "already_latest": "Du verwendest bereits die neueste Version.",
         "new_version_confirm": "Eine neue Version ist verfügbar. Jetzt neu laden?"
+    },
+    "iframe": {
+        "error_message": "Fernzugriff kann nicht in einem iframe ausgeführt werden"
     }
 };

frontend/src/locales/de.ts

@@ -173,5 +173,8 @@ export const en = {
         "new_version_available": "A new version of the application is available. Reload now to get the latest features and bug fixes?",
         "already_latest": "You are already using the latest version.",
         "new_version_confirm": "A new version is available. Reload now?"
+    },
+    "iframe": {
+        "error_message": "Remote Access cannot run in an iframe"
     }
 };

frontend/src/locales/en.ts

@@ -86,6 +86,11 @@ class VirtualNetworkInterface {
     // This handles Messages from the iframe/ Device-Webinterface
     iframeMessageHandler(e: MessageEvent) {
         const iframe = document.getElementById("interface") as HTMLIFrameElement;
+        if (typeof e.data !== "string") {
+            const data = e.data as Message;
+            this.handleErrorMessage(data);
+            return;
+        }
         switch (e.data) {
             case "initIFrame":
                 this.worker.postMessage("connect");
@@ -149,8 +154,9 @@ class VirtualNetworkInterface {
             switch (e.data) {
                 case "ready":
                     this.setParentState.parentState({connection_state: ConnectionState.LoadingWebinterface});
+                    const firmware_version = this.chargerInfo.firmware_version;
                     const iframe = document.getElementById("interface") as HTMLIFrameElement;
-                    iframe.src = `/wg-${this.id}/${this.path}`;
+                    iframe.src = `/wg-${this.id}/${this.path}?firmware_version=${encodeURIComponent(firmware_version)}`;
                     iframe.addEventListener("load", () => {
                         clearTimeout(this.timeout);
                         this.setParentState.parentState({show_spinner: false});

frontend/src/pages/Frame.tsx

@@ -29,22 +29,44 @@ function handleWGRequest(event: FetchEvent) {
     });
     if (event.request.headers.has("X-Connection-Id") || url.startsWith("/wg-")) {
         let receiver_id = "";
+        let firmware_version: string | null = null;
         if (url.startsWith("/wg-")) {
             url = url.replace("/wg-", "");
             const first = url.indexOf("/");
             receiver_id = url.substring(0, first);
             url = url.replace(receiver_id, "");
+            const parsedUrl = new URL(url, self.location.origin);
+            firmware_version = parsedUrl.searchParams.get("firmware_version");
+            firmware_version = firmware_version?.replace("+", "_") || null;
+            firmware_version = firmware_version?.replaceAll(".", "_") || null;
         } else {
             receiver_id = event.request.headers.get("X-Connection-Id") as string;
         }
         const promise: Promise<Response> = new Promise(async (resolve) => {
+            if (firmware_version) {
+                const response = await fetch(`/api/static/${firmware_version}_index.html`);
+                if (response.status === 200) {
+                    const ds = new DecompressionStream("gzip");
+                    const stream = response.body?.pipeThrough(ds);
+                    if (stream) {
+                        const decompressedResponse = new Response(stream, {
+                            status: response.status,
+                            statusText: response.statusText,
+                            headers: response.headers
+                        });
+                        resolve(decompressedResponse);
+                        return;
+                    }
+                }
+            }
+
             const id = crypto.randomUUID();
             const body = await event.request.arrayBuffer();
             const headers: [string, string][] = [];
             event.request.headers.forEach((val, key) => {
                 headers.push([key, val]);
             });
-            const fetch: FetchMessage = {
+            const message: FetchMessage = {
                 method: event.request.method,
                 headers,
                 body: body.byteLength === 0 ? undefined : body,
@@ -54,7 +76,7 @@ function handleWGRequest(event: FetchEvent) {
                 receiver_id,
                 id,
                 type: MessageType.Fetch,
-                data: fetch
+                data: message
             };
             self.addEventListener(id, (e: Event) => {
                 const event = e as CustomEvent;