From cdd8073bf478c59b471a164a95a630e625f0d4b5 Mon Sep 17 00:00:00 2001
From: MeechaPooch <powchm@catlin.edu>
Date: Thu, 27 Jun 2024 14:16:04 -0700
Subject: [PATCH] fix: proxy images through cluck dash to evade 403 error

---
 src/frontend/dash/chiefdelphi.ts |  3 ++-
 src/router.ts                    | 39 ++++++++++++++++++++++++++++++++
 www/dash/index.html              |  2 +-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/frontend/dash/chiefdelphi.ts b/src/frontend/dash/chiefdelphi.ts
index 3cd0f9c..5f139ce 100644
--- a/src/frontend/dash/chiefdelphi.ts
+++ b/src/frontend/dash/chiefdelphi.ts
@@ -101,7 +101,8 @@ async function refreshDelphi() {
 }
 async function refreshImage() {
     const url = await (await fetch(getResourceURL('/dash/image'))).text();
-    (document.querySelector('.theimage') as HTMLImageElement).src = url;
+    (document.querySelector('.theimage') as HTMLImageElement).src = 
+        `/dash/imageproxy?googleurl=${encodeURIComponent(url)}`;
 }
 
 export function setPanelType(type: PanelType) {
diff --git a/src/router.ts b/src/router.ts
index acd82a0..480928c 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -29,6 +29,45 @@ router.get('/dash/image', async (req, res, next) => {
         next(e)
     }
 })
+router.get('/dash/imageproxy', async (req, res, next) => {
+    try{
+        let url = req.query.googleurl as string;
+        let response = await fetch(url, {
+            "headers": {
+              "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
+              "accept-language": "en-US,en;q=0.9",
+              "cache-control": "no-cache",
+              "pragma": "no-cache",
+              "priority": "u=0, i",
+              "sec-ch-ua": "\"Not/A)Brand\";v=\"8\", \"Chromium\";v=\"126\", \"Google Chrome\";v=\"126\"",
+              "sec-ch-ua-arch": "\"arm\"",
+              "sec-ch-ua-bitness": "\"64\"",
+              "sec-ch-ua-full-version-list": "\"Not/A)Brand\";v=\"8.0.0.0\", \"Chromium\";v=\"126.0.6478.127\", \"Google Chrome\";v=\"126.0.6478.127\"",
+              "sec-ch-ua-mobile": "?0",
+              "sec-ch-ua-model": "\"\"",
+              "sec-ch-ua-platform": "\"macOS\"",
+              "sec-ch-ua-platform-version": "\"14.2.1\"",
+              "sec-ch-ua-wow64": "?0",
+              "sec-fetch-dest": "document",
+              "sec-fetch-mode": "navigate",
+              "sec-fetch-site": "none",
+              "sec-fetch-user": "?1",
+              "upgrade-insecure-requests": "1",
+            },
+            "referrerPolicy": "strict-origin-when-cross-origin",
+            "body": null,
+            "method": "GET"
+        });
+        let blob = await response.blob();
+        // source https://stackoverflow.com/questions/52665103/using-express-how-to-send-blob-object-as-response
+        blob.arrayBuffer().then((buf) => {
+            res.send(Buffer.from(buf))
+        })
+    } catch (e) {
+        console.error(e)
+        next(e)
+    }
+})
 router.get('/dash/delphi', async (req, res) => {
     delphiPost++; delphiPost %= 20; // switch to next post
     
diff --git a/www/dash/index.html b/www/dash/index.html
index 8d8acce..2081c4d 100644
--- a/www/dash/index.html
+++ b/www/dash/index.html
@@ -19,7 +19,7 @@
                 <a><h1 id="delphiTitle"></h1></a>
                 <h3 id="delphiBody"></h3>
                 <div id="bottom_fade"></div>
-                <img class="theimage" src="https://drive.google.com/uc?id=19ysfpPy6dT3m2SD24Cz6A-OuGN89nAkv">
+                <img class="theimage" src="/dash/imageproxy?googleurl=https://drive.google.com/uc?id=19ysfpPy6dT3m2SD24Cz6A-OuGN89nAkv">
             </div>
         </div>
     </div>