Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Base64 decoder: detect AVIF, SVGs with a prolog, real BMPs and long JSON

Chiusa
  • Qualcosa non va?
#205 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, typescript
Ambito
tooling

Direzione di ricerca

Start with getMimeFromMagicBytes in lib/base64-utils.ts and the “magic bytes” tests in lib/__tests__/base64-utils.test.ts; the issue identifies the BMP, ftyp, XML/HTML, JSON, and SVG checks to inspect. Add byte-built tests for each listed case, then run npm run lint, npm run test, and npm run build. Done means all acceptance criteria pass, including preserving other ftyp brand detection.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug good first issue hacktoberfest

The Base64 tool's decoder guesses the type of the decoded bytes with getMimeFromMagicBytes (lib/base64-utils.ts, line 103). The guess sets the "Detected type", MIME and extension, the name of the downloaded file, and whether an image preview is shown. Five cases come out wrong:

Decoded bytes Detected now Should be
An AVIF image (ftyp box with the brand avif or avis) MP4 video AVIF image, image/avif, with a preview
An SVG that starts with <?xml ...?> XML document SVG image
An SVG with a <!DOCTYPE svg ...> HTML document SVG image
Text that starts with "BM", like "BMW is a car maker" BMP image, with a broken preview Plain text
JSON longer than 4096 bytes Plain text JSON document

The "BM" one happens because the BMP check only looks at two bytes (line 112). The JSON one because only the first 4096 bytes are parsed (line 151), so a longer document never parses.

Where to look

  • lib/base64-utils.ts, getMimeFromMagicBytes: BMP at line 112, the ftyp brands at lines 124 to 129, XML and HTML at lines 145 to 148, JSON at lines 149 to 156, SVG at lines 157 and 158
  • app/(tools)/base64/components/DecodeTab.tsx (lines 36 to 50 and 143 to 152) shows how the result is used
  • lib/__tests__/base64-utils.test.ts: the "magic bytes" block at line 266

Acceptance criteria

  • AVIF (brands avif and avis) is detected as image/avif with isImage: true, and other ftyp brands work as before
  • SVG is detected when <svg comes after an XML declaration, a doctype, comments or whitespace at the start
  • "BM" only counts as BMP when the header looks like a real bitmap, for example when the header size at bytes 14 to 17 is one of the known sizes (12, 16, 40, 52, 56, 64, 108 or 124)
  • JSON longer than 4096 bytes is detected as JSON, with a size cap so huge inputs stay fast (for example 1 MB)
  • Tests in lib/__tests__/base64-utils.test.ts for each case above, with the bytes built in the test
  • npm run lint, npm run test and npm run build pass

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #205 in the description.

Lingua principale
TypeScript
Stelle
1
Fork
9
Merge medio
10h 24m
PR unite (30g)
93

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/toolbelt

Tutte le issue di codercops/toolbelt

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.