Secure file uploads and downloads

// Six uploads to a profile-photo form, accepted by a weak handler that believes the file name and the Content-Type,
// and by a fixed one that reads the file's first bytes, keeps an allowlist, and names the stored file itself.
const bytes = (...parts) => new Uint8Array(parts.flatMap((p) => (typeof p === 'string' ? [...p].map((c) => c.charCodeAt(0)) : p)));

// Signatures from the WHATWG MIME Sniffing standard (the first bytes of each format).
const SIGNATURES = [
  { type: 'image/png', ext: 'png', magic: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a] },
  { type: 'image/jpeg', ext: 'jpg', magic: [0xff, 0xd8, 0xff] },
  { type: 'image/gif', ext: 'gif', magic: [0x47, 0x49, 0x46, 0x38] },
  { type: 'application/pdf', ext: 'pdf', magic: [0x25, 0x50, 0x44, 0x46, 0x2d] },
  { type: 'application/zip', ext: 'zip', magic: [0x50, 0x4b, 0x03, 0x04] },
];
function sniff(data) {
  const hit = SIGNATURES.find((s) => s.magic.every((b, i) => data[i] === b));
  return hit ?? { type: 'unknown', ext: null };
}

const UPLOADS = [
  { name: 'asha.png', contentType: 'image/png', data: bytes([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], 'rest of a PNG') },
  { name: 'ravi.jpg', contentType: 'text/html', data: bytes([0xff, 0xd8, 0xff, 0xe0], 'rest of a JPEG') },
  { name: 'neha.png', contentType: 'image/png', data: bytes('<!DOCTYPE html><p>a web page, not a photo</p>') },
  { name: 'kiran.svg', contentType: 'image/svg+xml', data: bytes('<svg xmlns="http://www.w3.org/2000/svg"><circle r="4"/></svg>') },
  { name: 'Meena Photo (1).PNG', contentType: 'image/png', data: bytes([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], 'rest of a PNG') },
  { name: 'arjun.png', contentType: 'image/png', data: bytes('%PDF-1.7 a document, not a photo') },
];

function weakAccept(upload) {
  const ext = upload.name.split('.').pop().toLowerCase();
  if (!['png', 'jpg', 'jpeg', 'gif', 'svg'].includes(ext)) return { ok: false, reason: `.${ext} not allowed` };
  return { ok: true, stored: `uploads/${upload.name}`, servedAs: upload.contentType };
}

const ALLOWED = new Set(['image/png', 'image/jpeg']);
function makeFixedAccept(newId) {
  return function fixedAccept(upload) {
    if (upload.data.length > 2 * 1024 * 1024) return { ok: false, reason: 'larger than 2 MB' };
    const found = sniff(upload.data);
    if (!ALLOWED.has(found.type)) return { ok: false, reason: `bytes are ${found.type}, not a PNG or JPEG` };
    const ext = upload.name.split('.').pop().toLowerCase();
    const named = ext === 'jpeg' ? 'jpg' : ext;
    if (named !== found.ext) return { ok: false, reason: `name says .${ext}, bytes say ${found.type}` };
    return { ok: true, stored: `avatars/${newId()}.${found.ext}`, servedAs: found.type };
  };
}

let n = 0;
const fixedAccept = makeFixedAccept(() => `f${String(++n).padStart(4, '0')}`); // production: crypto.randomUUID()
const show = (r) => (r.ok ? `kept as ${r.stored}, served as ${r.servedAs}` : `refused: ${r.reason}`);
for (const u of UPLOADS) {
  console.log(`${u.name} (sent as ${u.contentType}, bytes: ${sniff(u.data).type})`);
  console.log(`  weak : ${show(weakAccept(u))}`);
  console.log(`  fixed: ${show(fixedAccept(u))}`);
}

asha.png (sent as image/png, bytes: image/png)
  weak : kept as uploads/asha.png, served as image/png
  fixed: kept as avatars/f0001.png, served as image/png
ravi.jpg (sent as text/html, bytes: image/jpeg)
  weak : kept as uploads/ravi.jpg, served as text/html
  fixed: kept as avatars/f0002.jpg, served as image/jpeg
neha.png (sent as image/png, bytes: unknown)
  weak : kept as uploads/neha.png, served as image/png
  fixed: refused: bytes are unknown, not a PNG or JPEG
kiran.svg (sent as image/svg+xml, bytes: unknown)
  weak : kept as uploads/kiran.svg, served as image/svg+xml
  fixed: refused: bytes are unknown, not a PNG or JPEG
Meena Photo (1).PNG (sent as image/png, bytes: image/png)
  weak : kept as uploads/Meena Photo (1).PNG, served as image/png
  fixed: kept as avatars/f0003.png, served as image/png
arjun.png (sent as image/png, bytes: application/pdf)
  weak : kept as uploads/arjun.png, served as image/png
  fixed: refused: bytes are application/pdf, not a PNG or JPEG