이미지 업로드와 WebPush 응답의 자원 경계를 제한한다

2026-10-09 07:09:23 +09:00
parent c5716cf144
commit 5771701007
18 changed files with 879 additions and 183 deletions
@@ -1,3 +1,9 @@
+import {
+    ImageWorkBudget,
+    ImageWorkBusyError,
+    ImageUploadError,
+    isRasterImage,
+} from '@sammo-ts/common/images/imageUpload';
 import { TRPCError } from '@trpc/server';
 import { z } from 'zod';
 import { randomBytes } from 'crypto';
@@ -7,6 +13,9 @@ import { accessAuthedInputProcedure, authedProcedure, router } from '../../trpc.
 import { getMyGeneral } from '../shared/general.js';
 import { resolveSecretPermission } from '../shared/secretPermission.js';

+const boardImageBudget = new ImageWorkBudget();
+const MAX_IMAGE_PIXELS = 16 * 1024 * 1024;
+
 const MAX_UPLOAD_BYTES = 1024 * 1024;
 const MAX_LONG_EDGE = 2048;
 const WEBP_QUALITY = 80;
@@ -57,7 +66,7 @@ const buildWebpBuffer = async (
    buffer: Buffer,
    { animated, resize }: { animated: boolean; resize: boolean }
 ): Promise<Buffer> => {
-    let pipeline = sharp(buffer, { animated: true });
+    let pipeline = sharp(buffer, { animated: true, limitInputPixels: MAX_IMAGE_PIXELS }).timeout({ seconds: 10 });
    if (resize) {
        pipeline = pipeline.resize({
            width: MAX_LONG_EDGE,
@@ -74,11 +83,16 @@ const buildWebpBuffer = async (
        ...(animated ? { animated: true } : {}),
    };

-    return pipeline.webp(webpOptions).toBuffer();
+    return pipeline
+        .webp(webpOptions)
+        .toBuffer()
+        .catch(() => {
+            throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지를 변환할 수 없습니다.' });
+        });
 };

 const buildAvifBuffer = async (buffer: Buffer, resize: boolean): Promise<Buffer> => {
-    let pipeline = sharp(buffer, { animated: true });
+    let pipeline = sharp(buffer, { animated: true, limitInputPixels: MAX_IMAGE_PIXELS }).timeout({ seconds: 10 });
    if (resize) {
        pipeline = pipeline.resize({
            width: MAX_LONG_EDGE,
@@ -87,7 +101,12 @@ const buildAvifBuffer = async (buffer: Buffer, resize: boolean): Promise<Buffer>
            withoutEnlargement: true,
        });
    }
-    return pipeline.avif({ quality: 60, effort: 4 }).toBuffer();
+    return pipeline
+        .avif({ quality: 60, effort: 4 })
+        .toBuffer()
+        .catch(() => {
+            throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지를 변환할 수 없습니다.' });
+        });
 };

 export const boardRouter = router({
@@ -213,70 +232,116 @@ export const boardRouter = router({

        return { id: comment.id };
    }),
-    uploadImage: authedProcedure.input(z.object({ dataUrl: z.string().min(1) })).mutation(async ({ ctx, input }) => {
-        const { permission } = await getBoardActor(ctx);
-        assertBoardAccess(permission, true);
+    uploadImage: authedProcedure
+        .input(
+            z.object({
+                dataUrl: z
+                    .string()
+                    .min(1)
+                    .max(Math.ceil(MAX_UPLOAD_BYTES / 3) * 4 + 128),
+            })
+        )
+        .mutation(async ({ ctx, input }) => {
+            const { permission } = await getBoardActor(ctx);
+            assertBoardAccess(permission, true);

-        const buffer = parseDataUrl(input.dataUrl);
-        if (buffer.length > MAX_UPLOAD_BYTES) {
-            throw new TRPCError({ code: 'PAYLOAD_TOO_LARGE', message: '이미지 용량 제한(1MB)을 초과했습니다.' });
-        }
+            try {
+                return await boardImageBudget.run(async () => {
+                    const buffer = parseDataUrl(input.dataUrl);
+                    if (buffer.length > MAX_UPLOAD_BYTES) {
+                        throw new TRPCError({
+                            code: 'PAYLOAD_TOO_LARGE',
+                            message: '이미지 용량 제한(1MB)을 초과했습니다.',
+                        });
+                    }

-        const metadata = await sharp(buffer, { animated: true }).metadata();
-        if (!metadata.format || !metadata.width || !metadata.height) {
-            throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지 정보를 확인할 수 없습니다.' });
-        }
+                    if (!isRasterImage(buffer))
+                        throw new TRPCError({ code: 'BAD_REQUEST', message: '지원하지 않는 이미지 형식입니다.' });
+                    const metadata = await sharp(buffer, { animated: true, limitInputPixels: MAX_IMAGE_PIXELS })
+                        .timeout({ seconds: 10 })
+                        .metadata()
+                        .catch(() => {
+                            throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지 정보를 확인할 수 없습니다.' });
+                        });
+                    if ((metadata.pages ?? 1) > 256)
+                        throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지 프레임 제한을 초과했습니다.' });
+                    if (!metadata.format || !metadata.width || !metadata.height) {
+                        throw new TRPCError({ code: 'BAD_REQUEST', message: '이미지 정보를 확인할 수 없습니다.' });
+                    }

-        const format = metadata.format;
-        const isAvif = metadata.mediaType === 'image/avif';
-        const isAnimated = (metadata.pages ?? 1) > 1;
-        const needsResize = Math.max(metadata.width, metadata.height) > MAX_LONG_EDGE;
+                    const format = metadata.format;
+                    const isAvif = metadata.mediaType === 'image/avif';
+                    const isAnimated = (metadata.pages ?? 1) > 1;
+                    const needsResize = Math.max(metadata.width, metadata.height) > MAX_LONG_EDGE;

-        const allowed = new Set(['png', 'jpeg', 'jpg', 'gif', 'webp', 'avif', 'heif', 'tiff', 'bmp']);
-        if (!allowed.has(format)) {
-            throw new TRPCError({ code: 'BAD_REQUEST', message: '지원하지 않는 이미지 형식입니다.' });
-        }
+                    const allowed = new Set(['png', 'jpeg', 'jpg', 'gif', 'webp', 'avif', 'heif', 'tiff', 'bmp']);
+                    if (!allowed.has(format)) {
+                        throw new TRPCError({ code: 'BAD_REQUEST', message: '지원하지 않는 이미지 형식입니다.' });
+                    }

-        let outputBuffer = buffer;
-        let outputFormat = isAvif ? 'avif' : 'webp';
+                    let outputBuffer = buffer;
+                    let outputFormat = isAvif ? 'avif' : 'webp';

-        if (isAvif) {
-            if (needsResize) {
-                outputBuffer = await buildAvifBuffer(buffer, true);
+                    if (isAvif) {
+                        if (needsResize) {
+                            outputBuffer = await buildAvifBuffer(buffer, true);
+                        }
+                    } else {
+                        const webpBuffer = await buildWebpBuffer(buffer, {
+                            animated: isAnimated || format === 'gif',
+                            resize: needsResize,
+                        });
+                        if (
+                            format === 'webp' &&
+                            !needsResize &&
+                            webpBuffer.length >= buffer.length * WEBP_MIN_SAVING_RATIO
+                        ) {
+                            outputBuffer = buffer;
+                            outputFormat = 'webp';
+                        } else {
+                            outputBuffer = webpBuffer;
+                            outputFormat = 'webp';
+                        }
+                    }
+
+                    if (!ctx.contentImageUpload) {
+                        throw new TRPCError({
+                            code: 'INTERNAL_SERVER_ERROR',
+                            message: '이미지 저장소가 설정되지 않았습니다.',
+                        });
+                    }
+                    const filename = `${randomBytes(16).toString('hex')}.${outputFormat}`;
+                    const uploaded = await ctx.contentImageUpload.upload({
+                        filename,
+                        contentType: outputFormat === 'avif' ? 'image/avif' : 'image/webp',
+                        body: outputBuffer,
+                    });
+
+                    const outputMeta = await sharp(outputBuffer, { animated: true, limitInputPixels: MAX_IMAGE_PIXELS })
+                        .timeout({ seconds: 10 })
+                        .metadata();
+
+                    return {
+                        url: uploaded.publicUrl,
+                        width: outputMeta.width ?? metadata.width,
+                        height: outputMeta.height ?? metadata.height,
+                        format: outputFormat,
+                        animated: isAnimated,
+                        size: outputBuffer.length,
+                    };
+                });
+            } catch (error) {
+                if (error instanceof ImageWorkBusyError)
+                    throw new TRPCError({
+                        code: 'TOO_MANY_REQUESTS',
+                        message: '이미지 처리 중입니다. 잠시 후 다시 시도해주세요.',
+                    });
+                if (error instanceof ImageUploadError)
+                    throw new TRPCError({
+                        code: 'SERVICE_UNAVAILABLE',
+                        message: '이미지 저장소에 연결할 수 없습니다. 잠시 후 다시 시도해주세요.',
+                    });
+                throw error;
            }
-        } else {
-            const webpBuffer = await buildWebpBuffer(buffer, {
-                animated: isAnimated || format === 'gif',
-                resize: needsResize,
-            });
-            if (format === 'webp' && !needsResize && webpBuffer.length >= buffer.length * WEBP_MIN_SAVING_RATIO) {
-                outputBuffer = buffer;
-                outputFormat = 'webp';
-            } else {
-                outputBuffer = webpBuffer;
-                outputFormat = 'webp';
-            }
-        }
-
-        if (!ctx.contentImageUpload) {
-            throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: '이미지 저장소가 설정되지 않았습니다.' });
-        }
-        const filename = `${randomBytes(16).toString('hex')}.${outputFormat}`;
-        const uploaded = await ctx.contentImageUpload.upload({
-            filename,
-            contentType: outputFormat === 'avif' ? 'image/avif' : 'image/webp',
-            body: outputBuffer,
-        });
-
-        const outputMeta = await sharp(outputBuffer, { animated: true }).metadata();
-
-        return {
-            url: uploaded.publicUrl,
-            width: outputMeta.width ?? metadata.width,
-            height: outputMeta.height ?? metadata.height,
-            format: outputFormat,
-            animated: isAnimated,
-            size: outputBuffer.length,
-        };
-    }),
+        }),
 });
@@ -1,4 +1,4 @@
-import { createHash, createHmac, randomUUID } from 'node:crypto';
+import { performSignedImageUpload } from '@sammo-ts/common/images/imageUpload';

 export interface ContentImageUploadResult {
    publicUrl: string;
@@ -21,32 +21,16 @@ export class RemoteContentImageStore implements ContentImageUploadStore {
        if (!/^[a-f0-9]{32}\.(?:avif|webp|jpg|png|gif)$/.test(input.filename)) {
            throw new Error('Invalid content image filename.');
        }
-        const pathname = `/v1/uploads/content/core2026/${input.filename}`;
-        const expires = String(Math.floor(this.now() / 1000) + 60);
-        const requestId = randomUUID();
-        const digest = createHash('sha256').update(input.body).digest('hex');
-        const signature = createHmac('sha256', this.secret)
-            .update(`${expires}.${requestId}.${pathname}.${input.contentType}.${digest}`)
-            .digest('hex');
-        const response = await this.fetchImpl(`${this.baseUrl.replace(/\/$/, '')}${pathname}`, {
-            method: 'PUT',
-            headers: {
-                'content-type': input.contentType,
-                'x-image-client': 'core2026',
-                'x-image-expires': expires,
-                'x-image-request-id': requestId,
-                'x-image-signature': signature,
+        await performSignedImageUpload(
+            {
+                ...input,
+                kind: 'content',
+                baseUrl: this.baseUrl,
+                secret: this.secret,
            },
-            body: new Uint8Array(input.body),
-        });
-        if (!response.ok) {
-            throw new Error(`Image repository upload failed with HTTP ${response.status}.`);
-        }
-        const expectedPath = `uploads/core2026/${input.filename}`;
-        const payload: unknown = await response.json();
-        if (!payload || typeof payload !== 'object' || !('path' in payload) || payload.path !== expectedPath) {
-            throw new Error('Image repository returned an unexpected content path.');
-        }
+            this.fetchImpl,
+            this.now
+        );
        return { publicUrl: `${this.publicBaseUrl.replace(/\/$/, '')}/${input.filename}` };
    }
 }
@@ -288,6 +288,81 @@ describe('board router actor, nation, and secret permissions', () => {
        expect(result).toMatchObject({ width: 64, height: 48, format: 'webp', animated: false });
    });

+    it('rejects highly compressed images over the decoded pixel budget before upload', async () => {
+        const upload = vi.fn(async () => ({ publicUrl: 'https://image.example/image.webp' }));
+        const fixture = buildContext({ me: buildGeneral({ officerLevel: 5 }), contentImageUpload: { upload } });
+        const png = await sharp({ create: { width: 4096, height: 4097, channels: 3, background: '#224466' } })
+            .png()
+            .toBuffer();
+        expect(png.length).toBeLessThan(1024 * 1024);
+        await expect(
+            appRouter.createCaller(fixture.context).board.uploadImage({
+                dataUrl: `data:image/png;base64,${png.toString('base64')}`,
+            })
+        ).rejects.toMatchObject({ code: 'BAD_REQUEST' });
+        expect(upload).not.toHaveBeenCalled();
+    });
+
+    it('rejects excess concurrent image work and recovers when uploads settle', async () => {
+        const pending: Array<() => void> = [];
+        const upload = vi.fn(
+            () =>
+                new Promise<{ publicUrl: string }>((resolve) => {
+                    pending.push(() => resolve({ publicUrl: 'https://image.example/image.webp' }));
+                })
+        );
+        const fixture = buildContext({ me: buildGeneral({ officerLevel: 5 }), contentImageUpload: { upload } });
+        const png = await sharp({ create: { width: 64, height: 48, channels: 3, background: '#224466' } })
+            .png()
+            .toBuffer();
+        const caller = appRouter.createCaller(fixture.context);
+        const input = { dataUrl: `data:image/png;base64,${png.toString('base64')}` };
+        const admitted = Array.from({ length: 4 }, () => caller.board.uploadImage(input));
+        try {
+            await vi.waitFor(() => expect(upload).toHaveBeenCalledTimes(4));
+            await expect(caller.board.uploadImage(input)).rejects.toMatchObject({ code: 'TOO_MANY_REQUESTS' });
+        } finally {
+            pending.forEach((done) => done());
+            await Promise.all(admitted);
+        }
+        upload.mockImplementation(async () => ({ publicUrl: 'https://image.example/image.webp' }));
+        await expect(caller.board.uploadImage(input)).resolves.toMatchObject({ format: 'webp' });
+    });
+
+    it('rejects SVG before a native image parser or upload is used', async () => {
+        const upload = vi.fn();
+        const fixture = buildContext({ me: buildGeneral({ officerLevel: 5 }), contentImageUpload: { upload } });
+        await expect(
+            appRouter.createCaller(fixture.context).board.uploadImage({
+                dataUrl: Buffer.from('<svg width="64" height="64"><script>alert(1)</script></svg>').toString('base64'),
+            })
+        ).rejects.toMatchObject({ code: 'BAD_REQUEST' });
+        expect(upload).not.toHaveBeenCalled();
+    });
+
+    it('rejects excessive animation frames while preserving ordinary GIF animation', async () => {
+        const upload = vi.fn(async () => ({ publicUrl: 'https://image.example/image.webp' }));
+        const fixture = buildContext({ me: buildGeneral({ officerLevel: 5 }), contentImageUpload: { upload } });
+        const caller = appRouter.createCaller(fixture.context);
+        const makeGif = (pages: number) =>
+            sharp(Buffer.alloc(pages * 4, 255), {
+                raw: { width: 1, height: pages, channels: 4, pageHeight: 1 },
+            })
+                .gif({ keepDuplicateFrames: true, delay: Array(pages).fill(10) })
+                .toBuffer();
+        const excessive = await makeGif(257);
+        expect((await sharp(excessive, { animated: true }).metadata()).pages).toBe(257);
+        await expect(caller.board.uploadImage({ dataUrl: excessive.toString('base64') })).rejects.toMatchObject({
+            code: 'BAD_REQUEST',
+        });
+        expect(upload).not.toHaveBeenCalled();
+        const ordinary = await makeGif(3);
+        await expect(caller.board.uploadImage({ dataUrl: ordinary.toString('base64') })).resolves.toMatchObject({
+            animated: true,
+            format: 'webp',
+        });
+    });
+
    it('preserves an AVIF editor image when resizing is unnecessary', async () => {
        const upload = vi.fn(async ({ filename }: { filename: string }) => ({
            publicUrl: `https://sam-image.hided.net/uploads/core2026/${filename}`,
@@ -36,4 +36,15 @@ describe('remote content image store', () => {
        expect(String(captured?.input)).toBe(`https://sam-image.hided.net${pathname}`);
        expect(Object.values(headers)).not.toContain(secret);
    });
+    it('rejects oversized upload response JSON before trusting its path', async () => {
+        const filename = `${'d'.repeat(32)}.png`;
+        const store = new RemoteContentImageStore(
+            'https://image.example',
+            'https://image.example/public',
+            'synthetic-secret',
+            async () =>
+                new Response(JSON.stringify({ path: `uploads/core2026/${filename}`, extra: 'x'.repeat(20_000) }))
+        );
+        await expect(store.upload({ filename, contentType: 'image/png', body: Buffer.from('x') })).rejects.toThrow();
+    });
 });
@@ -1,3 +1,4 @@
+import sharp from 'sharp';
 import { buildGameEventChannel } from '@sammo-ts/common';
 import { createHash } from 'node:crypto';
 import { projectCurrentGeneral } from '../src/router/playAudit/projection.js';
@@ -821,6 +822,28 @@ integration('game API security over HTTP transport', () => {
        }
    });

+    it('image upload enforces real HTTP authentication, officer authority and decoded pixel limits', async () => {
+        const input = { dataUrl: 'data:image/png;base64,AA==' };
+        const unauthenticated = await requestTrpc('board.uploadImage', { method: 'POST', input });
+        expect(unauthenticated.response.status).toBe(401);
+        const ordinary = await createAccessToken('image-ordinary', {}, ordinaryUserId);
+        const denied = await requestTrpc('board.uploadImage', { method: 'POST', input, accessToken: ordinary });
+        expect(denied.response.status).toBe(403);
+        const officer = await createAccessToken('image-officer', {});
+        const malformed = await requestTrpc('board.uploadImage', { method: 'POST', input, accessToken: officer });
+        expect(malformed.response.status).toBe(400);
+        const png = await sharp({ create: { width: 4096, height: 4097, channels: 3, background: '#224466' } })
+            .png()
+            .toBuffer();
+        const oversized = await requestTrpc('board.uploadImage', {
+            method: 'POST',
+            accessToken: officer,
+            input: { dataUrl: `data:image/png;base64,${png.toString('base64')}` },
+        });
+        expect(oversized.response.status).toBe(400);
+        expect(oversized.body).toMatchObject({ error: { data: { code: 'BAD_REQUEST' } } });
+    });
+
    it('accepts an authenticated query from a POST JSON body', async () => {
        const accessToken = await createAccessToken('json-query-body', {});
        const general = await requestTrpc('general.me', {