fix(blob): enforce content-type on fetch requests (#491)

* fix(blob): enforce content-type on fetch requests

Before this commit, we would not specify the type of body we were sending to the
customer routes handling token generation. On the app router example this is not
an issue because you have to express await req.json(). But on the pages router
situations, this is an issue because req.body is automatically filled/parsed
using the content-type.

We're fixing another place where we have this issue in our internal API
triggering upload completed.

* Create tender-planes-fail.md

* chore(blob): bump internal API version to 5 to enforce JSON content type
callbacks

.changeset/tender-planes-fail.md

@@ -0,0 +1,9 @@
+---
+"@vercel/blob": patch
+---
+
+fix(blob): Enforce content-type on fetch requests during token generation
+
+Before this change, we would not send the content-type header on fetch requests sent to your server during client uploads. We consider this a bugfix as it should have been sent before.
+
+⚠️ If you upgrade to this version, and you're using any smart request body parser (like Next.js Pages API routes) then: You need to remove any `JSON.parse(request.body)` at the `handleUpload` step, as the body will be JSON by default now. This is valid for the `onBeforeGenerateToken` and `onUploadCompleted` steps.

packages/blob/jest/setup.js

@@ -1,3 +1,6 @@
+// TextEncoder and TextDecoder are not defined in Jest dom environment,
+// but they are available everywhere else.
+// See https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest
 const { TextEncoder, TextDecoder } = require('node:util');
 
 Object.assign(global, { TextDecoder, TextEncoder });

packages/blob/package.json

@@ -53,7 +53,10 @@
   },
   "jest": {
     "preset": "ts-jest",
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "testEnvironmentOptions": {
+      "url": "http://localhost:3000"
+    }
   },
   "dependencies": {
     "jest-environment-jsdom": "29.7.0",

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

@@ -0,0 +1,77 @@
+import undici from 'undici';
+import { upload } from './client';
+
+// can't use undici mocking utilities because jsdom does not support performance.markResourceTiming
+jest.mock('undici', () => ({
+  fetch: jest
+    .fn()
+    .mockResolvedValueOnce({
+      status: 200,
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          type: 'blob.generate-client-token',
+          clientToken: 'fake-token-for-test',
+        }),
+    })
+    .mockResolvedValueOnce({
+      status: 200,
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          url: `https://storeId.public.blob.vercel-storage.com/superfoo.txt`,
+          pathname: 'foo.txt',
+          contentType: 'text/plain',
+          contentDisposition: 'attachment; filename="foo.txt"',
+        }),
+    }),
+}));
+
+describe('upload()', () => {
+  beforeEach(() => {
+    process.env.BLOB_READ_WRITE_TOKEN =
+      'vercel_blob_rw_12345fakeStoreId_30FakeRandomCharacters12345678';
+    jest.clearAllMocks();
+  });
+
+  it('should upload a file from the client', async () => {
+    await expect(
+      upload('foo.txt', 'Test file data', {
+        access: 'public',
+        handleUploadUrl: '/api/upload',
+      }),
+    ).resolves.toMatchInlineSnapshot(`
+      {
+        "contentDisposition": "attachment; filename="foo.txt"",
+        "contentType": "text/plain",
+        "pathname": "foo.txt",
+        "url": "https://storeId.public.blob.vercel-storage.com/superfoo.txt",
+      }
+    `);
+
+    const fetchMock = undici.fetch as jest.Mock;
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      'http://localhost:3000/api/upload',
+      {
+        body: '{"type":"blob.generate-client-token","payload":{"pathname":"foo.txt","callbackUrl":"http://localhost:3000/api/upload"}}',
+        headers: { 'content-type': 'application/json' },
+        method: 'POST',
+      },
+    );
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      'https://blob.vercel-storage.com/foo.txt',
+      {
+        body: 'Test file data',
+        duplex: 'half',
+        headers: {
+          authorization: 'Bearer fake-token-for-test',
+          'x-api-version': '5',
+        },
+        method: 'PUT',
+      },
+    );
+  });
+});

packages/blob/src/client.ts

@@ -328,10 +328,15 @@ async function retrieveClientToken(options: {
   const res = await fetch(url, {
     method: 'POST',
     body: JSON.stringify(event),
+    headers: {
+      'content-type': 'application/json',
+    },
   });
+
   if (!res.ok) {
     throw new BlobError('Failed to  retrieve the client token');
   }
+
   try {
     const { clientToken } = (await res.json()) as { clientToken: string };
     return clientToken;

packages/blob/src/helpers.ts

@@ -135,7 +135,7 @@ export async function validateBlobApiResponse(
 // This version is used to ensure that the client and server are compatible
 // The server (Vercel Blob API) uses this information to change its behavior like the
 // response format
-const BLOB_API_VERSION = 4;
+const BLOB_API_VERSION = 5;
 
 export function getApiVersionHeader(): { 'x-api-version'?: string } {
   let versionOverride = null;

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

@@ -2,6 +2,7 @@ import { put } from './index';
 
 const BLOB_STORE_BASE_URL = 'https://storeId.public.blob.vercel-storage.com';
 
+// Can't use the usual undici mocking utilities because they don't work with jsdom environment
 jest.mock('undici', () => ({
   fetch: (): unknown =>
     Promise.resolve({

test/next/src/pages/api/vercel/blob/pages/handle-blob-upload-serverless.ts

@@ -15,10 +15,10 @@ export default async function handleBody(
     return;
   }
 
-  const body = request.body as string;
+  const body = request.body as HandleUploadBody;
   try {
     const jsonResponse = await handleUpload({
-      body: JSON.parse(body) as HandleUploadBody,
+      body,
       request,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/require-await -- [@vercel/style-guide@5 migration]
       onBeforeGenerateToken: async (pathname) => {