From 5ee98aaeab327aac659feaddad4e4dbdb3084188 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 1 Jan 2025 21:00:01 -0500
Subject: [PATCH] Use bypass secret for next/image server-side fetches

---
 src/photo/index.ts    |  5 ++++-
 src/photo/server.ts   |  5 +++--
 src/site/config.ts    |  4 ++++
 src/utility/vercel.ts | 12 ++++++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/utility/vercel.ts

diff --git a/src/photo/index.ts b/src/photo/index.ts
index 97c96b71..8c250dd8 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -13,6 +13,7 @@ import {
   formatExposureTime,
 } from '@/utility/exif';
 import { parameterize } from '@/utility/string';
+import { fetchBypass } from '@/utility/vercel';
 import camelcaseKeys from 'camelcase-keys';
 import { isBefore } from 'date-fns';
 import type { Metadata } from 'next';
@@ -308,7 +309,9 @@ export const getKeywordsForPhoto = (photo: Photo) =>
     .map(keyword => keyword.toLocaleLowerCase());
 
 export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
-  photos.length > 0 && fetch(getNextImageUrlForRequest(photos[0].url, 640))
+  photos.length > 0 && fetchBypass(
+    getNextImageUrlForRequest(photos[0].url, 640)
+  )
     .then(response => response.ok)
     .catch(() => false);
 
diff --git a/src/photo/server.ts b/src/photo/server.ts
index 5078b13c..0373522b 100644
--- a/src/photo/server.ts
+++ b/src/photo/server.ts
@@ -12,6 +12,7 @@ import { PhotoFormData } from './form';
 import { FilmSimulation } from '@/simulation';
 import sharp, { Sharp } from 'sharp';
 import { GEO_PRIVACY_ENABLED, PRO_MODE_ENABLED } from '@/site/config';
+import { fetchBypass } from '@/utility/vercel';
 
 const IMAGE_WIDTH_RESIZE = 200;
 const IMAGE_WIDTH_BLUR = 200;
@@ -128,7 +129,7 @@ const blurImage = async (image: ArrayBuffer) =>
   );
 
 export const resizeImageFromUrl = async (url: string) => 
-  fetch(decodeURIComponent(url))
+  fetchBypass(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => resizeImage(buffer))
     .catch(e => {
@@ -137,7 +138,7 @@ export const resizeImageFromUrl = async (url: string) =>
     });
 
 export const blurImageFromUrl = async (url: string) => 
-  fetch(decodeURIComponent(url))
+  fetchBypass(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => blurImage(buffer))
     .catch(e => {
diff --git a/src/site/config.ts b/src/site/config.ts
index 55961890..0f1ecce6 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -35,6 +35,10 @@ export const IS_PRODUCTION = process.env.NODE_ENV === 'production' && (
   !VERCEL_ENV
 );
 
+export const IS_PREVIEW = VERCEL_ENV === 'preview';
+
+export const VERCEL_BYPASS_SECRET = process.env.VERCEL_AUTOMATION_BYPASS_SECRET;
+
 // User-facing domain, potential site title
 const SITE_DOMAIN =
   process.env.NEXT_PUBLIC_SITE_DOMAIN ||
diff --git a/src/utility/vercel.ts b/src/utility/vercel.ts
new file mode 100644
index 00000000..7ab10dcd
--- /dev/null
+++ b/src/utility/vercel.ts
@@ -0,0 +1,12 @@
+import { IS_PREVIEW, VERCEL_BYPASS_SECRET } from "@/site/config";
+
+export const fetchBypass: typeof fetch = (url, options) =>
+  IS_PREVIEW && VERCEL_BYPASS_SECRET
+  ? fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      'x-vercel-protection-bypass': VERCEL_BYPASS_SECRET
+    },
+  })
+  : fetch(url, options);