fix(@vercel/blob): Disallow passing callbackUrl from clients (#875)

* fix(@vercel/blob): Disallow passing callbackUrl from clients

BREAKING CHANGE:
To continue receiving onUploadCompleted callback once a file is uploaded with
Client Uploads, you need to provide the callbackUrl at the onBeforeGenerateToken
step when using handleUpload.

Before:
await handleUpload({ body, request,
  onBeforeGenerateToken: async (pathname) => { /* options */ },
  onUploadCompleted: async ({ blob, tokenPayload }) => { /* code */ },
});

After:
await handleUpload({ body, request,
  onBeforeGenerateToken: async (pathname) => { callbackUrl: 'https://example.com/api/upload' },
  onUploadCompleted: async ({ blob, tokenPayload }) => { /* code */ },
});

See the updated documentation at
https://vercel.com/docs/vercel-blob/client-upload to know more.

Details:
Before this commit, during Client Uploads, we would infer the `callbackUrl` at
the client side level (browser) based on location.href (for convenience).
This is wrong and allows browsers to redirect the onUploadCompleted callback to
a different website.
While not a security risk because the blob urls are already public and the
browser already knows them, it still pose a risk of database drift if you're
relying on onUploadCompleted callback to update any system on your side.

* changeset

* update nodejs version

* update

* update

* fix

* update

* change minimum requirement

* update

* update

* update changeset

* update

* update

* update

* update

Author: vvo

.changeset/tiny-cups-push.md

@@ -0,0 +1,51 @@
+---
+'@vercel/blob': major
+---
+
+**BREAKING CHANGE:**
+
+To continue receiving `onUploadCompleted` callback once a file is uploaded with Client Uploads when **not hosted on Vercel**, you need to provide the `callbackUrl` at the `onBeforeGenerateToken` step when using `handleUpload`.
+
+**When hosted on Vercel:**
+No code changes required. The `callbackUrl` is inferred from [Vercel system environment variables](https://vercel.com/docs/environment-variables/system-environment-variables):
+
+- In preview environment: `VERCEL_BRANCH_URL` when available, otherwise `VERCEL_URL`
+- In production environment: `VERCEL_PROJECT_PRODUCTION_URL`
+
+If you're not hosted on Vercel or you're not using Vercel system environment variables, your will need to provide the `callbackUrl`:
+
+**Before:**
+
+```ts
+await handleUpload({ body, request,
+  onBeforeGenerateToken: async (pathname) => { /* options */ },
+  onUploadCompleted: async ({ blob, tokenPayload }) => { /* code */ },
+});
+```
+
+**After:**
+
+```ts
+await handleUpload({ body, request,
+  onBeforeGenerateToken: async (pathname) => { 
+    return { callbackUrl: 'https://example.com' }; // the path to call will be automatically computed
+  },
+  onUploadCompleted: async ({ blob, tokenPayload }) => { /* code */ },
+});
+```
+
+**For local development:**
+Set the `VERCEL_BLOB_CALLBACK_URL` environment variable to your tunnel URL:
+
+```bash
+VERCEL_BLOB_CALLBACK_URL=https://abc123.ngrok-free.app
+```
+
+See the updated documentation at https://vercel.com/docs/vercel-blob/client-upload to know more.
+
+**Details:**
+
+Before this commit, during Client Uploads, we would infer the `callbackUrl` at the client side level (browser) based on `location.href` (for convenience).
+This is wrong and allows browsers to redirect the onUploadCompleted callback to a different website.
+
+While not a security risk, because the blob urls are already public and the browser knows them, it still pose a risk of database drift if you're relying on onUploadCompleted callback to update any system on your side.

.github/workflows/unit-tests.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x]
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.node-version

@@ -1 +1 @@
-lts/hydrogen
+lts/iron

packages/blob/package.json

@@ -81,6 +81,6 @@
     "tsup": "8.4.0"
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=20.0.0"
   }
 }

packages/blob/src/client.browser.test.ts

@@ -78,7 +78,7 @@ describe('client', () => {
         1,
         'http://localhost:3000/api/upload',
         {
-          body: '{"type":"blob.generate-client-token","payload":{"pathname":"foo.txt","callbackUrl":"http://localhost:3000/api/upload","clientPayload":null,"multipart":false}}',
+          body: '{"type":"blob.generate-client-token","payload":{"pathname":"foo.txt","clientPayload":null,"multipart":false}}',
           headers: { 'content-type': 'application/json' },
           method: 'POST',
         },