Bina HFZ Viewer — Tool Preview HTML/Markdown/JSON Tanpa Server

Project kecil tapi berguna — HFZ Viewer, tool untuk preview & edit HTML, Markdown, dan JSON terus dalam browser.

Idea dia simple: ada banyak kali aku kena check markup/JSON yang aku tak pasti punca (contoh dari API response, scratch file, atau copy-paste dari tempat lain), dan malas nak buka VS Code atau upload ke tool online yang entah simpan data kat mana.

Jadi HFZ Viewer ni 100% client-side — tiada upload, tiada server process, tiada account. Semua jalan dalam browser kau sendiri.

Ada 3 module: HTML Viewer, Markdown Viewer, dan JSON Viewer — boleh switch guna sidebar atau shortcut Alt+1/2/3. Auto-detect format fail, atau boleh set manual kalau auto-detect tersasar. Ada button beautify, load sample, clear, dan terus buka fail dari komputer.

Live preview support 3 saiz viewport (Desktop/Tablet/Mobile) dengan manual refresh — senang nak check macam mana markup render dekat skrin lain-lain saiz.

Bahagian yang aku paling fokus sebenarnya security — sebab nama dia "viewer untuk markup yang tak dipercayai", so kena betul-betul pastikan tak boleh jadi self-XSS kat diri sendiri. Lapisan yang dipakai:

- DOMPurify untuk sanitize markup sebelum render.

- Preview jalan dalam sandboxed iframe — tiada script, same-origin access, popup, atau form yang boleh execute.

- Content Security Policy block semua network request dari dalam preview (so takde fetch/XHR senyap-senyap ke luar).

- Had input 512 KB dan cap 5,000 node untuk tree JSON (elak browser freeze bila load JSON besar/dalam nested).

Boleh export dua jenis — source asal, atau versi "safe preview" yang dah disanitize. Ada juga option simpan draft local (localStorage), tapi default OFF dan memang tak di-encrypt — jadi guna untuk draft biasa je, bukan data sensitif.

Overall simple tool, tapi exercise yang bagus dalam handle untrusted content dengan betul — bukan sekadar "pass je terus render", tapi betul-betul layer defense dari sanitize sampai sandbox sampai CSP.

🔗Link: https://viewer.hfzml.my/