feat(backend): accept only real images in the inventory upload (#95)

The upload bounded size and count and nothing else: POST /api/admin/items would take a PDF, a zip or an executable and store it as an item image, under an extension copied from whatever the caller named their file. Those files are served by express.static from the application's own origin, so a stored .html came back as text/html and a .svg as image/svg+xml — both able to run script as the site. Three types are accepted: JPEG, PNG and WebP. SVG is excluded deliberately even though it is an image, because it executes script when navigated to directly, which is the exposure #103 describes; a photograph of a one-of-a-kind item is never a vector drawing, so nothing real is lost. GIF is excluded as simply not wanted for product stills. Validation happens twice, because once is not enough. The declared content type is checked in multer's fileFilter, before a byte is written — that catches picking a PDF by accident, which is most of what goes wrong. But file.mimetype is whatever the caller wrote in the multipart headers, so the bytes are checked too: each stored file's leading bytes must match the format it claimed. That is what stops evil.html renamed to photo.jpg and declared image/jpeg, which an allowlist on the declared type alone waves straight through. The byte check cannot live in fileFilter — that runs before multer has read the stream, so there is nothing to look at yet. It runs after the write instead, and a failure removes every file from the request rather than only the offending one: accepting the good half of a refused upload would leave files on the volume that nothing references. Handles are closed before anything is unlinked, because an open handle makes the unlink fail on Windows. The stored name now takes its extension from the validated type rather than from path.extname(file.originalname), so the name on disk cannot disagree with what the file is. The random UUID is unchanged — that was already right, and its comment explains why. The picker offers exactly those three types rather than image/*, so a choice the API will refuse is not on the menu in the first place. That is a convenience, not a control: the operating system's All files option remains, drag-and-drop ignores accept, and anything calling the API directly never sees it. The server is the control. Nine integration tests, and they are the first in this project to upload real file content — which is why none of this was noticed. They cover a genuine PNG accepted, a PDF refused, SVG refused, HTML wearing image/jpeg refused, nothing left on the volume after a refusal, a mixed request discarding its valid file too, and no item created when the upload fails. Plus 21 unit tests on the pure signature checks, including a RIFF container that is not WebP. Verified: 162 unit, 178 integration, 94 end-to-end on a fresh container. Backend lint holds at 4 warnings — it caught the now-unused path import, which is exactly what it is for. Refs #95 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-21 16:39:43 -05:00
parent eda62cf354
commit 35b242a66f
5 changed files with 463 additions and 4 deletions
@@ -0,0 +1,155 @@
+import request from 'supertest';
+import { promises as fs } from 'fs';
+import path from 'path';
+import app from '../../src/app';
+import { pool } from '../../src/db';
+import { resetDb, closeDb } from './setup/testDb';
+
+const UPLOADS_DIR = process.env.UPLOADS_DIR as string;
+
+// A genuine 1x1 PNG, so the accepted case exercises the whole path rather than
+// a buffer that merely starts with the right bytes.
+const REAL_PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+  'base64'
+);
+const HTML_BYTES = Buffer.from('<!doctype html><script>alert(1)</script>', 'utf8');
+const PDF_BYTES = Buffer.from('%PDF-1.4\n%����\n', 'binary');
+
+// No test has ever attached a file before this one, so the uploads directory
+// has never had to exist. multer.diskStorage does not create its destination.
+beforeAll(async () => {
+  await fs.mkdir(UPLOADS_DIR, { recursive: true });
+});
+
+beforeEach(async () => {
+  await resetDb();
+});
+
+afterAll(async () => {
+  await pool.end();
+  await closeDb();
+});
+
+async function storedFiles(): Promise<string[]> {
+  return fs.readdir(UPLOADS_DIR);
+}
+
+function createItem() {
+  return request(app)
+    .post('/api/admin/items')
+    .field('name', 'Photographed thing')
+    .field('description', '')
+    .field('price', '30');
+}
+
+describe('what the inventory upload accepts', () => {
+  it('accepts a real PNG and stores it', async () => {
+    const res = await createItem().attach('images', REAL_PNG, {
+      filename: 'photo.png',
+      contentType: 'image/png'
+    });
+
+    expect(res.status).toBe(200);
+    expect(res.body.images).toHaveLength(1);
+    expect(res.body.images[0].image_path).toMatch(/^\/uploads\/[0-9a-f-]+\.png$/);
+  });
+
+  // The stored name is derived from the validated type, so a caller cannot put
+  // a .html path onto a volume that express.static serves from the app's own
+  // origin just by naming their file that way. See #103.
+  it('names the stored file from its type, not from the submitted filename', async () => {
+    const res = await createItem().attach('images', REAL_PNG, {
+      filename: 'evil.html',
+      contentType: 'image/png'
+    });
+
+    expect(res.status).toBe(200);
+    expect(res.body.images[0].image_path).toMatch(/\.png$/);
+    expect(res.body.images[0].image_path).not.toContain('html');
+  });
+});
+
+describe('what it refuses', () => {
+  it('refuses a type that is not an accepted image, naming what is', async () => {
+    const res = await createItem().attach('images', PDF_BYTES, {
+      filename: 'brochure.pdf',
+      contentType: 'application/pdf'
+    });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toContain('application/pdf');
+    expect(res.body.error).toContain('image/png');
+  });
+
+  // SVG is an image and is deliberately not accepted, because it executes
+  // script when navigated to directly.
+  it('refuses SVG even though it is an image', async () => {
+    const res = await createItem().attach('images', Buffer.from('<svg xmlns="..."/>'), {
+      filename: 'logo.svg',
+      contentType: 'image/svg+xml'
+    });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toContain('image/svg+xml');
+  });
+
+  // The case an allowlist on the declared type alone waves straight through.
+  it('refuses a document wearing an image content type', async () => {
+    const res = await createItem().attach('images', HTML_BYTES, {
+      filename: 'photo.jpg',
+      contentType: 'image/jpeg'
+    });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toContain('does not contain');
+  });
+
+  it('leaves nothing on the volume when it refuses the content', async () => {
+    const before = await storedFiles();
+
+    await createItem().attach('images', HTML_BYTES, {
+      filename: 'photo.jpg',
+      contentType: 'image/jpeg'
+    });
+
+    expect(await storedFiles()).toHaveLength(before.length);
+  });
+
+  // A rejection must take the whole request with it. Accepting the good file
+  // from a refused upload would leave a file behind that nothing references.
+  it('discards the valid files from a request that also carried an invalid one', async () => {
+    const before = await storedFiles();
+
+    const res = await createItem()
+      .attach('images', REAL_PNG, { filename: 'good.png', contentType: 'image/png' })
+      .attach('images', HTML_BYTES, { filename: 'bad.jpg', contentType: 'image/jpeg' });
+
+    expect(res.status).toBe(400);
+    expect(await storedFiles()).toHaveLength(before.length);
+  });
+
+  it('does not create the item when the upload is refused', async () => {
+    await createItem().attach('images', HTML_BYTES, {
+      filename: 'photo.jpg',
+      contentType: 'image/jpeg'
+    });
+
+    const { rows } = await pool.query(`SELECT COUNT(*)::int AS n FROM items`);
+    expect(rows[0].n).toBe(0);
+  });
+});
+
+describe('the uploads directory', () => {
+  it('only ever gains files with an extension the allowlist produced', async () => {
+    await createItem().attach('images', REAL_PNG, {
+      filename: 'whatever.jpeg',
+      contentType: 'image/png'
+    });
+
+    const files = await storedFiles();
+    for (const file of files) {
+      expect(['.jpg', '.png', '.webp']).toContain(path.extname(file));
+    }
+  });
+});