From 88a01426c1f393192ba00d948137f820c17b2ac3 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Tue, 1 Oct 2024 09:56:32 +0200
Subject: [PATCH] fix referer for external images

---
 interface/src/app/main/Help.tsx | 183 ++++++++++++++++----------------
 1 file changed, 89 insertions(+), 94 deletions(-)

diff --git a/interface/src/app/main/Help.tsx b/interface/src/app/main/Help.tsx
index a592ddd02..da45a0f1b 100644
--- a/interface/src/app/main/Help.tsx
+++ b/interface/src/app/main/Help.tsx
@@ -76,114 +76,109 @@ const Help = () => {
     });
 
   return (
-    <>
-      <SectionContent>
-        <Stack
-          padding={1}
-          mb={2}
-          direction="row"
-          divider={<Divider orientation="vertical" flexItem />}
+    <SectionContent>
+      <Stack
+        padding={1}
+        mb={2}
+        direction="row"
+        divider={<Divider orientation="vertical" flexItem />}
+        sx={{
+          borderRadius: 3,
+          border: '2px solid grey',
+          justifyContent: 'space-evenly',
+          alignItems: 'center'
+        }}
+      >
+        <Typography variant="subtitle1">
+          {customSupportHTML ? (
+            <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
+          ) : (
+            LL.HELP_INFORMATION_5()
+          )}
+        </Typography>
+        <Box
+          component="img"
+          referrerPolicy="no-referrer"
           sx={{
-            borderRadius: 3,
-            border: '2px solid grey',
-            justifyContent: 'space-evenly',
-            alignItems: 'center'
+            maxHeight: { xs: 100, md: 250 }
           }}
-        >
-          <Typography variant="subtitle1">
-            {customSupportHTML ? (
-              <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
-            ) : (
-              LL.HELP_INFORMATION_5()
-            )}
-          </Typography>
-          <Box
-            component="img"
-            sx={{
-              maxHeight: { xs: 100, md: 250 }
-            }}
-            src={
-              customSupportIMG
-                ? customSupportIMG
-                : 'https://emsesp.org/_media/images/installer.jpeg'
-            }
-          />
-        </Stack>
+          src={customSupportIMG || 'https://emsesp.org/_media/images/installer.jpeg'}
+        />
+      </Stack>
 
-        {me.admin && (
-          <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-            <ListItem>
-              <ListItemButton component="a" href="https://emsesp.org">
-                <ListItemAvatar>
-                  <Avatar sx={{ bgcolor: '#72caf9' }}>
-                    <MenuBookIcon />
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText primary={LL.HELP_INFORMATION_1()} />
-              </ListItemButton>
-            </ListItem>
+      {me.admin && (
+        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+          <ListItem>
+            <ListItemButton component="a" href="https://emsesp.org">
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: '#72caf9' }}>
+                  <MenuBookIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.HELP_INFORMATION_1()} />
+            </ListItemButton>
+          </ListItem>
 
-            <ListItem>
-              <ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
-                <ListItemAvatar>
-                  <Avatar sx={{ bgcolor: '#72caf9' }}>
-                    <CommentIcon />
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText primary={LL.HELP_INFORMATION_2()} />
-              </ListItemButton>
-            </ListItem>
+          <ListItem>
+            <ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: '#72caf9' }}>
+                  <CommentIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.HELP_INFORMATION_2()} />
+            </ListItemButton>
+          </ListItem>
 
-            <ListItem>
-              <ListItemButton
-                component="a"
-                href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
-              >
-                <ListItemAvatar>
-                  <Avatar sx={{ bgcolor: '#72caf9' }}>
-                    <GitHubIcon />
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText primary={LL.HELP_INFORMATION_3()} />
-              </ListItemButton>
-            </ListItem>
-          </List>
-        )}
-
-        <Box p={2} color="warning.main">
-          <Typography mb={1} variant="body2">
-            {LL.HELP_INFORMATION_4()}
-          </Typography>
-          <Button
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
-          >
-            {LL.DOWNLOAD(1)}&nbsp;{LL.SUPPORT_INFORMATION(0)}
-          </Button>
-        </Box>
+          <ListItem>
+            <ListItemButton
+              component="a"
+              href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
+            >
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: '#72caf9' }}>
+                  <GitHubIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.HELP_INFORMATION_3()} />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      )}
 
+      <Box p={2} color="warning.main">
+        <Typography mb={1} variant="body2">
+          {LL.HELP_INFORMATION_4()}
+        </Typography>
         <Button
-          sx={{ ml: 2 }}
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={() => sendExportAllValues()}
+          onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
         >
-          {LL.DOWNLOAD(1)}&nbsp;{LL.ALLVALUES()}
+          {LL.DOWNLOAD(1)}&nbsp;{LL.SUPPORT_INFORMATION(0)}
         </Button>
+      </Box>
 
-        <Divider sx={{ mt: 4 }} />
+      <Button
+        sx={{ ml: 2 }}
+        startIcon={<DownloadIcon />}
+        variant="outlined"
+        color="primary"
+        onClick={() => sendExportAllValues()}
+      >
+        {LL.DOWNLOAD(1)}&nbsp;{LL.ALLVALUES()}
+      </Button>
 
-        <Typography color="white" variant="subtitle1" align="center" mt={1}>
-          &copy;&nbsp;
-          <Link target="_blank" href="https://emsesp.org" color="primary">
-            {'emsesp.org'}
-          </Link>
-        </Typography>
-      </SectionContent>
-    </>
+      <Divider sx={{ mt: 4 }} />
+
+      <Typography color="white" variant="subtitle1" align="center" mt={1}>
+        &copy;&nbsp;
+        <Link target="_blank" href="https://emsesp.org" color="primary">
+          {'emsesp.org'}
+        </Link>
+      </Typography>
+    </SectionContent>
   );
 };