From 17d72310bb3c078081779c7ee9ecb6c43f38a50c Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 30 Apr 2020 00:02:00 -0700
Subject: [PATCH] start using asset proxy for item thumbnails

we're HTTPS now, baby!!
---
 api/assetProxy.js | 37 +++++++++++++++++++++++++++++++++++++
 src/app/Item.js   |  5 ++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 api/assetProxy.js

diff --git a/api/assetProxy.js b/api/assetProxy.js
new file mode 100644
index 0000000..21a33f6
--- /dev/null
+++ b/api/assetProxy.js
@@ -0,0 +1,37 @@
+import util from "util";
+import stream from "stream";
+import fetch from "node-fetch";
+
+const streamPipeline = util.promisify(stream.pipeline);
+
+const VALID_URL_PATTERNS = [
+  /^http:\/\/images\.neopets\.com\/items\/[a-zA-Z0-9_ -]+\.gif$/,
+];
+
+export default async (req, res) => {
+  const urlToProxy = req.query.url;
+  if (!urlToProxy) {
+    return res
+      .status(400)
+      .send("Bad request: Must provide `?url` in the query string");
+  }
+
+  if (!VALID_URL_PATTERNS.some((p) => urlToProxy.match(p))) {
+    return res
+      .status(400)
+      .send("Bad request: URL did not match any valid patterns");
+  }
+
+  console.debug("[assetProxy] 💌 Sending: %s", urlToProxy);
+
+  const proxyRes = await fetch(urlToProxy);
+  console.debug(
+    `[assetProxy] %s %s: %s`,
+    proxyRes.ok ? "✅" : "🛑",
+    `${proxyRes.status} ${proxyRes.statusText}`.padStart(7, " "),
+    urlToProxy
+  );
+
+  res.status(proxyRes.status);
+  streamPipeline(proxyRes.body, res);
+};
diff --git a/src/app/Item.js b/src/app/Item.js
index 80e68c9..d5dec02 100644
--- a/src/app/Item.js
+++ b/src/app/Item.js
@@ -28,7 +28,10 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
 
   return (
     <ItemContainer>
-      <ItemThumbnail src={item.thumbnailUrl} isWorn={isWorn} />
+      <ItemThumbnail
+        src={`/api/assetProxy?url=${encodeURIComponent(item.thumbnailUrl)}`}
+        isWorn={isWorn}
+      />
       <Box width="3" />
       <ItemName id={itemNameId} isWorn={isWorn}>
         {item.name}