test: add @payloadcms/storage-s3 clientUploads integration test suite (#15194)

This PR extends #15176 and
adds the following tests:

* should generate a signed upload URL
* should reject signed URL generation by access control when
'x-disallow-access' header is set
* should not allow bypassing with passing a smaller file size but
uploading a larger file - tests that were added by
#15176 did not account for
this and relied only on the passed `filesize`

Moves client-upload specific tests to its own file/payload config

Author: r1tsuu

test/storage-s3/clientUploads.config.ts

@@ -0,0 +1,64 @@
+import { s3Storage } from '@payloadcms/storage-s3'
+import dotenv from 'dotenv'
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { devUser } from '../credentials.js'
+import { Media } from './collections/Media.js'
+import { Users } from './collections/Users.js'
+import { mediaSlug } from './shared.js'
+import { MB } from './test-utils.js'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+// Load config to work with emulated services
+dotenv.config({
+  path: path.resolve(dirname, '../plugin-cloud-storage/.env.emulated'),
+})
+
+export default buildConfigWithDefaults({
+  admin: {
+    importMap: {
+      baseDir: path.resolve(dirname),
+    },
+  },
+  collections: [Media, Users],
+  onInit: async (payload) => {
+    await payload.create({
+      collection: 'users',
+      data: {
+        email: devUser.email,
+        password: devUser.password,
+      },
+    })
+  },
+  plugins: [
+    s3Storage({
+      collections: {
+        [mediaSlug]: true,
+      },
+      bucket: process.env.S3_BUCKET!,
+      clientUploads: {
+        access: ({ req }) => (req.headers.get('x-disallow-access') ? false : true),
+      },
+      config: {
+        credentials: {
+          accessKeyId: process.env.S3_ACCESS_KEY_ID!,
+          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
+        },
+        endpoint: process.env.S3_ENDPOINT,
+        forcePathStyle: process.env.S3_FORCE_PATH_STYLE === 'true',
+        region: process.env.S3_REGION,
+      },
+    }),
+  ],
+  upload: {
+    limits: {
+      fileSize: MB(10),
+    }, // 10 mb
+  },
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+})

test/storage-s3/clientUploads.int.spec.ts

@@ -0,0 +1,214 @@
+import type { Payload } from 'payload'
+
+import { readFileSync } from 'fs'
+import path from 'path'
+import { assert } from 'ts-essentials'
+import { fileURLToPath } from 'url'
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'
+
+import type { NextRESTClient } from '../helpers/NextRESTClient.js'
+
+import { initPayloadInt } from '../helpers/initPayloadInt.js'
+import {
+  clearTestBucket,
+  createTestBucket,
+  getAWSClient,
+  getTestBucketName,
+  MB,
+} from './test-utils.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+let restClient: NextRESTClient
+
+let payload: Payload
+
+const signedURLEndpoint = '/storage-s3-generate-signed-url'
+
+const signedURLBody = (
+  collectionSlug: string,
+  filename: string,
+  filesize: number,
+  mimeType: string,
+) =>
+  JSON.stringify({
+    collectionSlug,
+    filename,
+    filesize,
+    mimeType,
+  })
+
+describe('@payloadcms/storage-s3 clientUploads', () => {
+  beforeAll(async () => {
+    ;({ payload, restClient } = await initPayloadInt(
+      dirname,
+      undefined,
+      undefined,
+      path.resolve(dirname, 'clientUploads.config.ts'),
+    ))
+
+    await createTestBucket()
+    await clearTestBucket()
+  })
+
+  it('should generate a signed upload URL', async () => {
+    const file = readFileSync(path.resolve(dirname, '../uploads/image.png'))
+
+    const { url } = await restClient
+      .POST(signedURLEndpoint, {
+        body: signedURLBody('media', 'image.png', file.length, 'image/png'),
+      })
+      .then((res) => res.json<{ url: string }>())
+
+    expect(url).toBeDefined()
+
+    // Upload the file to S3 using the signed URL
+    const uploadResponse = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'image/png',
+        'Content-Length': String(file.length),
+      },
+      body: file,
+    })
+
+    expect(uploadResponse.ok).toBe(true)
+
+    const res = await getAWSClient()
+      .headObject({
+        Bucket: getTestBucketName(),
+        Key: 'image.png',
+      })
+      .catch((e) => {
+        console.error(e)
+        return null
+      })
+
+    expect(res).not.toBeNull()
+    assert(res)
+    expect(res.ContentLength).toBe(file.length)
+    expect(res.ContentType).toBe('image/png')
+  })
+
+  it("should reject signed URL generation by access control when 'x-disallow-access' header is set", async () => {
+    const response = await restClient.POST(signedURLEndpoint, {
+      headers: {
+        'x-disallow-access': 'true',
+      },
+      body: signedURLBody('media', 'image.png', MB(1), 'image/png'),
+    })
+
+    expect(response.status).toBe(403)
+  })
+
+  it('should generate signed URL for file within size limit', async () => {
+    const filename = 'small-file.png'
+    const filesize = 500_000 // 500KB (within 1MB limit)
+    const mimeType = 'image/png'
+
+    const response = await restClient.POST(signedURLEndpoint, {
+      body: signedURLBody('media', filename, filesize, mimeType),
+    })
+
+    expect(response.status).toBe(200)
+    const { url } = (await response.json()) as any
+    expect(url).toBeDefined()
+    expect(url).toContain(getTestBucketName())
+    expect(url).toContain(filename)
+  })
+
+  it('should reject file exceeding size limit', async () => {
+    const filename = 'large-file.png'
+    const filesize = MB(11) // exceeds 10MB limit
+    const mimeType = 'image/png'
+
+    const response = await restClient.POST(signedURLEndpoint, {
+      body: signedURLBody('media', filename, filesize, mimeType),
+    })
+
+    expect(response.status).toBe(400)
+    const { errors } = (await response.json()) as any
+    expect(errors).toBeDefined()
+    expect(errors[0].message).toContain('Exceeded file size limit')
+    expect(errors[0].message).toMatch(/Limit: 10\.0\dMB/) // 10,000,000 bytes = 10.0MB
+    expect(errors[0].message).toMatch(/got: 11\.0\dMB/) // 11,000,000 bytes = 11.0MB
+  })
+
+  it('should reject file exactly at limit boundary', async () => {
+    const filename = 'boundary-file.png'
+    const filesize = MB(10.1) // Just over 10MB limit
+    const mimeType = 'image/png'
+
+    const response = await restClient.POST(signedURLEndpoint, {
+      body: signedURLBody('media', filename, filesize, mimeType),
+    })
+
+    expect(response.status).toBe(400)
+    const { errors } = (await response.json()) as any
+    expect(errors).toBeDefined()
+    expect(errors[0].message).toContain('Exceeded file size limit')
+  })
+
+  it('should accept file exactly at limit', async () => {
+    const filename = 'exact-limit.png'
+    const filesize = MB(10) // Exactly 10MB
+    const mimeType = 'image/png'
+
+    const response = await restClient.POST(signedURLEndpoint, {
+      body: signedURLBody('media', filename, filesize, mimeType),
+    })
+
+    expect(response.status).toBe(200)
+    const { url } = (await response.json()) as any
+    expect(url).toBeDefined()
+  })
+
+  it('should not allow bypassing with passing a smaller file size but uploading a larger file', async () => {
+    const filename = 'bypass-file.png'
+    const declaredFilesize = MB(5) // Declare 5MB
+    const actualFilesize = MB(15) // But actually upload 15MB
+    const mimeType = 'text/plain'
+
+    const buffer = Buffer.alloc(actualFilesize, 0)
+    const file = new Blob([buffer], { type: mimeType })
+
+    const { url } = await restClient
+      .POST(signedURLEndpoint, {
+        body: signedURLBody('media', filename, declaredFilesize, mimeType),
+      })
+      .then((res) => res.json<{ url: string }>())
+
+    expect(url).toBeDefined()
+
+    // Attempt to upload the larger file to S3 using the signed URL
+    const uploadResponse = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': mimeType,
+        'Content-Length': String(actualFilesize),
+      },
+      body: file,
+    })
+
+    if (process.env.S3_ENDPOINT?.includes('localhost')) {
+      // localstack does not enforce content-length limits on signed URLs
+      console.warn(
+        'Skipping assertion for localstack local S3 endpoint, which does not enforce content-length limits on signed URLs',
+      )
+      return
+    }
+
+    // Expect the upload to be rejected, works with AWS S3 / Cloudflare R2
+    expect(uploadResponse.ok).toBe(false)
+    expect(uploadResponse.status).toBe(403) // S3 should reject the upload
+  })
+
+  afterAll(async () => {
+    await payload.destroy()
+  })
+
+  afterEach(async () => {
+    await clearTestBucket()
+  })
+})

test/storage-s3/collections/MediaWithClientUploads.ts

@@ -7,7 +7,6 @@ import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
 import { Media } from './collections/Media.js'
 import { MediaWithAlwaysInsertFields } from './collections/MediaWithAlwaysInsertFields.js'
-import { MediaWithClientUploads } from './collections/MediaWithClientUploads.js'
 import { MediaWithDirectAccess } from './collections/MediaWithDirectAccess.js'
 import { MediaWithDynamicPrefix } from './collections/MediaWithDynamicPrefix.js'
 import { MediaWithPrefix } from './collections/MediaWithPrefix.js'
@@ -16,7 +15,6 @@ import { Users } from './collections/Users.js'
 import {
   mediaSlug,
   mediaWithAlwaysInsertFieldsSlug,
-  mediaWithClientUploadsSlug,
   mediaWithDirectAccessSlug,
   mediaWithDynamicPrefixSlug,
   mediaWithPrefixSlug,
@@ -40,7 +38,6 @@ export default buildConfigWithDefaults({
   collections: [
     Media,
     MediaWithAlwaysInsertFields,
-    MediaWithClientUploads,
     MediaWithDirectAccess,
     MediaWithDynamicPrefix,
     MediaWithPrefix,
@@ -58,10 +55,8 @@ export default buildConfigWithDefaults({
   },
   plugins: [
     s3Storage({
-      clientUploads: true,
       collections: {
         [mediaSlug]: true,
-        [mediaWithClientUploadsSlug]: true,
         [mediaWithDirectAccessSlug]: {
           disablePayloadAccessControl: true,
         },