start using asset proxy for item thumbnails

we're HTTPS now, baby!!

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);
+};

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}