|
| 1 | +// An upload form with four mistakes made on purpose, each one a mistake real |
| 2 | +// upload forms have. playwright.config.ts starts it. FIXED=1 corrects all four, |
| 3 | +// which is how check.mjs shows that the red tests come from the mistakes and |
| 4 | +// not from the tests. |
| 5 | +// |
| 6 | +// It uses nothing outside Node, so the example has no server dependency. |
| 7 | + |
| 8 | +import { readFileSync } from 'node:fs'; |
| 9 | +import http from 'node:http'; |
| 10 | +import { Readable } from 'node:stream'; |
| 11 | + |
| 12 | +const limit = Number(process.env.UPLOAD_LIMIT_BYTES); |
| 13 | +const port = Number(process.env.PORT); |
| 14 | +const fixed = process.env.FIXED === '1'; |
| 15 | +const allowed = ['jpg', 'png', 'pdf']; |
| 16 | + |
| 17 | +if (!Number.isInteger(limit) || !Number.isInteger(port)) { |
| 18 | + throw new Error('Set UPLOAD_LIMIT_BYTES and PORT. playwright.config.ts sets both.'); |
| 19 | +} |
| 20 | + |
| 21 | +// What a file holds, read from its first bytes rather than from its name. |
| 22 | +function sniff(bytes) { |
| 23 | + if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) { |
| 24 | + return 'jpg'; |
| 25 | + } |
| 26 | + if (bytes.subarray(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))) { |
| 27 | + return 'png'; |
| 28 | + } |
| 29 | + if (bytes.subarray(0, 5).toString('latin1') === '%PDF-') { |
| 30 | + return 'pdf'; |
| 31 | + } |
| 32 | + return ''; |
| 33 | +} |
| 34 | + |
| 35 | +function extensionOf(name) { |
| 36 | + const lower = name.toLowerCase(); |
| 37 | + if (fixed) { |
| 38 | + const dot = lower.lastIndexOf('.'); |
| 39 | + return dot > 0 ? lower.slice(dot + 1) : ''; |
| 40 | + } |
| 41 | + // Mistake 3: an allowed extension anywhere in the name counts, so |
| 42 | + // invoice.jpg.exe is taken for a picture. |
| 43 | + return allowed.find((ext) => lower.includes(`.${ext}`)) ?? ''; |
| 44 | +} |
| 45 | + |
| 46 | +function verdict(name, bytes) { |
| 47 | + // Mistake 1: the server never looks at the size. The page does, so a test |
| 48 | + // through the page sees a limit that a request straight to the server does not. |
| 49 | + if (fixed && bytes.length > limit) { |
| 50 | + return { status: 413, reason: 'size_limit' }; |
| 51 | + } |
| 52 | + const extension = extensionOf(name); |
| 53 | + if (!allowed.includes(extension)) { |
| 54 | + return { status: 422, reason: 'extension_rule' }; |
| 55 | + } |
| 56 | + const content = sniff(bytes); |
| 57 | + if (!allowed.includes(content)) { |
| 58 | + return { status: 415, reason: 'content_malformed' }; |
| 59 | + } |
| 60 | + // Mistake 2: the content and the extension are each checked against the |
| 61 | + // allowed list and never against each other, so a PDF named .jpg goes through. |
| 62 | + if (fixed && content !== extension) { |
| 63 | + return { status: 415, reason: 'mime_mismatch' }; |
| 64 | + } |
| 65 | + return { status: 201 }; |
| 66 | +} |
| 67 | + |
| 68 | +// The page carries the limit and the mode, and page.js reads them from it. |
| 69 | +const page = readFileSync(new URL('index.html', import.meta.url), 'utf8') |
| 70 | + .replace('{{limit}}', String(limit)) |
| 71 | + .replace('{{fixed}}', fixed ? '1' : ''); |
| 72 | +const script = readFileSync(new URL('page.js', import.meta.url), 'utf8'); |
| 73 | + |
| 74 | +async function upload(req, res) { |
| 75 | + const request = new Request(`http://localhost${req.url}`, { |
| 76 | + method: 'POST', headers: req.headers, body: Readable.toWeb(req), duplex: 'half', |
| 77 | + }); |
| 78 | + const file = (await request.formData()).get('file'); |
| 79 | + if (!file || typeof file === 'string') { |
| 80 | + return answer(res, 400, { reason: 'none' }); |
| 81 | + } |
| 82 | + const { status, reason } = verdict(file.name, Buffer.from(await file.arrayBuffer())); |
| 83 | + return answer(res, status, reason ? { reason } : { stored: file.name }); |
| 84 | +} |
| 85 | + |
| 86 | +function answer(res, status, body) { |
| 87 | + res.writeHead(status, { 'content-type': 'application/json' }); |
| 88 | + res.end(JSON.stringify(body)); |
| 89 | +} |
| 90 | + |
| 91 | +http.createServer((req, res) => { |
| 92 | + if (req.method === 'GET' && req.url === '/') { |
| 93 | + res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' }); |
| 94 | + res.end(page); |
| 95 | + return; |
| 96 | + } |
| 97 | + if (req.method === 'GET' && req.url === '/page.js') { |
| 98 | + res.writeHead(200, { 'content-type': 'text/javascript; charset=utf-8' }); |
| 99 | + res.end(script); |
| 100 | + return; |
| 101 | + } |
| 102 | + if (req.method === 'POST' && req.url === '/upload') { |
| 103 | + upload(req, res).catch((err) => answer(res, 500, { reason: 'none', error: String(err) })); |
| 104 | + return; |
| 105 | + } |
| 106 | + res.writeHead(404); |
| 107 | + res.end(); |
| 108 | +}).listen(port, () => console.log(`upload form on http://localhost:${port}${fixed ? ', mistakes fixed' : ''}`)); |
0 commit comments