From 2570434c230a61d3ebe52198a7ce734c551b47bf Mon Sep 17 00:00:00 2001
From: WGH <wgh@torlan.ru>
Date: Tue, 9 Sep 2025 00:45:22 +0300
Subject: [PATCH] fix(frontend): origin address info leak

Currently, frontend loads device images from third-party domain
https://www.zigbee2mqtt.io/, leaking potentially sensitive information,
as the address might be externally routable IPv6 address, etc.

We need to remove crossorigin="anonymous" to stop sending Origin header,
and add referer="no-referer" referrer policy to stop sending Origin
header. Note that as <image> elements don't support refererpolicy
attribute, we have to add document-wide policy. Which is a good idea,
as it also prevents leaks when following links.
---
 src/components/device-image/DeviceImage.tsx | 2 +-
 src/components/device-image/LazyImage.tsx   | 4 ++--
 src/components/settings-page/index.tsx      | 2 --
 src/index.html                              | 1 +
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/device-image/DeviceImage.tsx b/src/components/device-image/DeviceImage.tsx
index 4984050f4..a19bbb9fc 100644
--- a/src/components/device-image/DeviceImage.tsx
+++ b/src/components/device-image/DeviceImage.tsx
@@ -21,7 +21,7 @@ export function DeviceImage(props: Readonly<DeviceImageProps>) {
 
     if (type === 'svg') {
         return (
-            <Suspense fallback={<image crossOrigin={'anonymous'} {...rest} href={genericDevice} />}>
+            <Suspense fallback={<image {...rest} href={genericDevice} />}>
                 <ErrorBoundary>
                     <LazyImage type="svg" device={device} {...rest} />
                 </ErrorBoundary>
diff --git a/src/components/device-image/LazyImage.tsx b/src/components/device-image/LazyImage.tsx
index 27e5e44a7..8f3afe6e3 100644
--- a/src/components/device-image/LazyImage.tsx
+++ b/src/components/device-image/LazyImage.tsx
@@ -15,7 +15,7 @@ export function LazyImage(props: Readonly<LazyImageProps>) {
         srcList: AVAILABLE_GENERATORS.map((fn) => fn(device)).filter(Boolean) as string[],
     });
     if (type === 'svg') {
-        return <image crossOrigin={'anonymous'} {...rest} href={src} />;
+        return <image {...rest} href={src} />;
     }
-    return <img alt="" crossOrigin={'anonymous'} src={src} />;
+    return <img alt="" src={src} />;
 }
diff --git a/src/components/settings-page/index.tsx b/src/components/settings-page/index.tsx
index 095ab8d29..7a0a9a051 100644
--- a/src/components/settings-page/index.tsx
+++ b/src/components/settings-page/index.tsx
@@ -65,7 +65,6 @@ const rows = [
         <div className="col">
             <a target="_blank" rel="noopener noreferrer" href="https://www.buymeacoffee.com/nurikk">
                 <img
-                    crossOrigin="anonymous"
                     src="https://img.buymeacoffee.com/button-api/?text=Thanks for frontend&emoji=🍺&slug=nurikk&button_colour=FFDD00&font_colour=000000&font_family=Arial&outline_colour=000000&coffee_colour=ffffff"
                 />
             </a>
@@ -75,7 +74,6 @@ const rows = [
         <div className="col">
             <a target="_blank" rel="noopener noreferrer" href="https://www.buymeacoffee.com/koenkk">
                 <img
-                    crossOrigin="anonymous"
                     src="https://img.buymeacoffee.com/button-api/?text=Thanks for zigbee2mqtt&emoji=☕&slug=koenkk&button_colour=FFDD00&font_colour=000000&font_family=Arial&outline_colour=000000&coffee_colour=ffffff"
                 />
             </a>
diff --git a/src/index.html b/src/index.html
index e57b1bb4b..dfacd9ea9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="robots" content="noindex">
+    <meta name="referrer" content="no-referrer">
 
     <title>Zigbee2MQTT</title>