KodelokaMengapa Peramban Tidak Mengandalkan Ekstensi Berkas .html atau .png?
Di sistem operasi desktop, komputer menebak jenis berkas dari akhiran namanya (.html, .jpg, .pdf). Namun di web, sebuah URL seperti https://kodeloka.asadinedu.com/unduh?id=42 sama sekali tidak memiliki ekstensi berkas!
Lalu bagaimana peramban tahu apakah balasan dari URL tersebut harus ditampilkan sebagai halaman web HTML, diputar sebagai video, atau diunduh sebagai PDF? Jawabannya adalah **MIME Type (Multipurpose Internet Mail Extensions) yang dikirim oleh server di dalam header HTTP Content-Type**.
1. Daftar MIME Type Penting yang Wajib Dikenali Pengembang Web
| Kategori | Nilai Header Content-Type | Perilaku Peramban |
|---|---|---|
| Dokumen Web | text/html; charset=utf-8 | Diurai oleh parser HTML5 menjadi pohon DOM. |
| Gaya & Skrip | text/css; charset=utf-8, text/javascript; charset=utf-8 | Diurai oleh mesin CSSOM dan mesin JIT JavaScript (catatan: standar resmi skrip adalah text/javascript, bukan application/javascript). |
| Data API | application/json; charset=utf-8 | Data teks terstruktur JSON. |
| Gambar Modern | image/avif, image/webp, image/svg+xml, image/png, image/jpeg | Dirender oleh dekoder citra; khusus SVG berbasis XML wajib dikirim sebagai image/svg+xml agar tampil di dalam <img>. |
| Fon Web | font/woff2, font/woff | Dimuat oleh aturan @font-face. |
| Formulir | application/x-www-form-urlencoded, multipart/form-data | Format pengiriman data dari elemen <form> ke server. |
| Biner Umum | application/octet-stream, application/pdf | Menginstruksikan peramban untuk mengunduh berkas biner atau membuka pembaca PDF. |
2. Mekanisme Content Negotiation (Accept, Accept-Language, Accept-Encoding)
Saat peramban meminta sebuah halaman atau gambar, peramban mengirimkan daftar format yang ia dukung melalui header permintaan (request headers):
GET /assets/sampul-kelas HTTP/2 Host: kodeloka.asadinedu.com Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5 Accept-Encoding: br, zstd, gzip, deflate Accept-Language: id-ID,id;q=0.9,en-US;q=0.8
Parameter **q= (quality factor, bernilai 0.0 hingga 1.0, bawaan 1.0)** menyatakan urutan prioritas: peramban di atas lebih menyukai image/avif (q=1.0) dibandingkan format gambar umum image/* (q=0.8).
3. Pengodean Persen pada URL (Percent-Encoding — RFC 3986)
URL hanya boleh memuat karakter ASCII yang aman (huruf A–Z, a–z, angka 0–9, dan simbol - _ . ~). Karakter lain seperti spasi, tanda & di dalam nilai parameter, atau karakter non-Latin harus dikodekan menjadi % diikuti dua digit heksadesimal byte UTF-8-nya (misalnya spasi menjadi %20 atau + di dalam query string, dan & menjadi %26):
<!-- SALAH: Spasi dan tanda '&' mentah di dalam nilai parameter query merusak pemisahan parameter! --> <a href="/cari?topik=HTML & CSS&tingkat=dasar">Cari HTML & CSS</a> <!-- BENAR: Karakter spasi (%20) dan '&' (%26) di dalam nilai parameter dikodekan dengan benar --> <a href="/cari?topik=HTML%20%26%20CSS&tingkat=dasar">Cari HTML & CSS</a>
**🚫 Bahaya Keamanan MIME Sniffing dan Solusi X-Content-Type-Options: nosniff Jika server mengirim berkas unggahan pengguna sebagai Content-Type: text/plain, peramban kuno terkadang mengintip isi byte pertamanya. Jika ditemukan tulisan <html><script>..., peramban nekat mengeksekusinya sebagai halaman HTML! Selalu pastikan server mengirim header X-Content-Type-Options: nosniff** agar peramban patuh 100% pada Content-Type yang dideklarasikan server.
Latihan Praktik: Memeriksa Negosiasi Konten di DevTools
- Buka tab Network di Browser DevTools pada halaman web yang menggunakan gambar
<picture>atau kompresi Brotli (br). - Bandingkan header Request (
Accept,Accept-Encoding) dengan header Response (Content-Type,Content-Encoding,Vary). - Buat berkas
tautan-query.htmlyang berisi 3 tautan pencarian dengan parameter yang mengandung karakter spasi, tanda tanya?, dan simbol&yang dikodekan persen secara benar.