MIME Type dan Content-Type

Bayangkan kamu menerima sebuah amplop tertutup yang sama sekali tidak ada tulisannya. Kamu tidak tahu isinya surat, foto, cek, atau tiket konser. Mau tidak mau kamu harus merobeknya dulu lalu menebak. Komputer menghadapi masalah yang persis sama saat data berjalan di internet: sebuah respons itu cuma deretan byte, dan byte saja tidak mengumumkan dirinya itu apa. Sebuah gambar dan satu paragraf teks sama-sama tiba dalam bentuk angka nol dan satu.

Inilah masalah yang dipecahkan oleh MIME type. MIME type adalah label singkat yang berkata, “Ini gambar,” atau “Ini halaman web,” atau “Ini data JSON.” Browser membaca label itu lalu memutuskan harus diapakan isi yang baru saja diterimanya. Di artikel ini kamu akan belajar apa itu MIME type, bagaimana header Content-Type membawanya, kenapa label yang tepat benar-benar penting, dan tipe apa saja yang paling sering kamu temui.

Apa itu MIME type?

MIME adalah singkatan dari Multipurpose Internet Mail Extensions. Namanya berasal dari dunia email, tempat sistem pelabelan ini pertama kali dibuat agar pesan bisa membawa lampiran seperti gambar dan dokumen. Web meminjam ide yang sama, jadi sekarang MIME type juga sering disebut media type atau content type. Semuanya merujuk pada hal yang sama.

MIME type selalu ditulis dalam dua bagian yang dipisahkan oleh garis miring:

type/subtype

Bagian pertama, yaitu type, adalah keluarga besar: text, image, audio, video, atau application (dipakai untuk apa pun yang tidak masuk keluarga lain, termasuk sebagian besar format data). Bagian kedua, yaitu subtype, adalah format spesifik di dalam keluarga itu. Jadi image/png berarti “sebuah gambar, tepatnya format PNG,” dan text/html berarti “teks, tepatnya dokumen HTML.”

Berikut beberapa contoh yang dibaca dalam bahasa sehari-hari:

text/html -> halaman web HTML
application/json -> data JSON
image/png -> gambar PNG
text/css -> berkas stylesheet
application/javascript -> berkas JavaScript

Itulah seluruh tata bahasanya. Begitu kamu bisa membaca garis miring tadi, kamu bisa membaca MIME type apa pun yang kamu temui.

Header Content-Type yang membawa label

MIME type yang berdiri sendiri hanyalah sebuah teks. Ia butuh tempat untuk ikut menumpang bersama datanya, dan tempat itu adalah sebuah header HTTP bernama Content-Type. Setiap kali server mengirimkan sesuatu kepadamu, ia bisa menyertakan header ini untuk menyatakan isinya apa.

Beginilah kira-kira tampilan respons server saat mengirim sebuah halaman web:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1270

<!DOCTYPE html>
<html>
  <head><title>Halo</title></head>
  <body><h1>Selamat datang</h1></body>
</html>

Perhatikan baris Content-Type: text/html; charset=utf-8. Bagian awalnya adalah MIME type. Bagian setelah titik koma, yaitu charset=utf-8, adalah parameter opsional yang memberi tahu browser pengkodean karakter mana yang dipakai teks tersebut, supaya huruf beraksen dan karakter lain tampil dengan benar. Parameter selalu ditulis setelah titik koma, dan tidak semua tipe memakainya.

Alurnya kira-kira seperti ini:

  Browser                          Server
     |   GET /halaman.html            |
     |  ----------------------------> |
     |                                |
     |   200 OK                       |
     |   Content-Type: text/html      |
     |   <html>...</html>             |
     |  <---------------------------- |
     |                                |
   "Ini HTML — tampilkan sebagai halaman"

Header yang sama juga bekerja ke arah sebaliknya. Saat browser kamu (atau sebuah program) mengirim data ke server, misalnya mengirim formulir atau mengunggah JSON ke sebuah API, ia memasang Content-Type pada request supaya server tahu cara membaca isi yang diserahkan kepadanya.

Header, bukan ekstensi berkas

Browser lebih memercayai header Content-Type ketimbang nama berkas. Sebuah berkas bernama data.json yang dikirim dengan Content-Type: text/html akan diperlakukan sebagai HTML, bukan JSON. Di web, headerlah yang jadi sumber kebenaran.

Kenapa tipe yang benar itu penting

Gampang sekali menganggap label ini cuma formalitas sopan-santun. Padahal bukan. MIME type mengubah perilaku browser sepenuhnya, dan tipe yang salah merusak banyak hal dengan cara yang membingungkan.

Ambil contoh sebuah API yang mengembalikan data. Kalau server mengirimnya dengan benar sebagai Content-Type: application/json, sebuah alat di browser atau program JavaScript tahu bahwa itu JSON dan bisa menguraikannya menjadi nilai yang siap dipakai. Tetapi kalau respons yang sama dikirim sebagai Content-Type: text/html, browser bisa saja mencoba menafsirkan kurung kurawal dan tanda kutipnya sebagai markup, atau kodemu menolak menguraikannya. Byte-nya sama sekali tidak berubah; yang berubah cuma labelnya, dan itu sudah cukup untuk merusak segalanya.

Byte sama, label beda:

  {"user":"Jane Doe","active":true}

  dengan  Content-Type: application/json   ->  diuraikan sebagai data, jalan
  dengan  Content-Type: text/html          ->  dianggap halaman web, rusak

Beberapa akibat nyata dari tipe yang salah atau hilang:

Stylesheet yang dikirim sebagai text/plain sering diabaikan, sehingga halamanmu termuat tanpa tampilan apa pun.
Berkas JavaScript dengan tipe keliru bisa ditolak browser demi alasan keamanan, sehingga skripmu tidak pernah jalan.
Gambar yang dikirim sebagai text/html muncul sebagai tumpukan karakter aneh, bukan sebuah gambar.
PDF yang dikirim sebagai application/octet-stream bisa memaksa unduhan alih-alih terbuka di penampil browser.

Jangan andalkan browser menebak

Saat sebuah tipe hilang atau jelas salah, sebagian browser mencoba mengendus isinya lalu menebak sebenarnya itu apa. Tebakan ini tidak konsisten dan bahkan bisa menimbulkan risiko keamanan, makanya banyak server mengirim header X-Content-Type-Options: nosniff untuk mematikan tebakan tersebut. Pelajarannya: pasang Content-Type yang benar sendiri, bukan berharap browser menebaknya.

Tabel MIME type yang umum

Kamu tidak perlu menghafal ratusan tipe ini. Segelintir saja sudah mencakup sebagian besar pekerjaan web sehari-hari. Simpan tabel ini di dekatmu sampai semuanya jadi otomatis.

MIME type	Artinya	Pemakaian umum
`text/html`	Dokumen HTML	Halaman web
`text/css`	Stylesheet	Tampilan halaman
`text/plain`	Teks polos	Log, berkas teks mentah
`text/csv`	Nilai berpemisah koma	Data ala spreadsheet
`application/json`	Data JSON	API, berkas konfigurasi
`application/javascript`	Kode JavaScript	Skrip (juga ditemui sebagai `text/javascript`)
`application/xml`	Data XML	Feed, API lawas
`application/pdf`	Dokumen PDF	Dokumen, faktur
`application/octet-stream`	Biner umum “tak dikenal”	Unduhan, berkas tanpa tipe khusus
`multipart/form-data`	Formulir dengan unggahan berkas	Mengirim formulir berisi berkas
`image/png`	Gambar PNG	Logo, tangkapan layar
`image/jpeg`	Gambar JPEG	Foto
`image/svg+xml`	Gambar vektor SVG	Ikon, ilustrasi
`image/webp`	Gambar WebP	Gambar modern yang lebih kecil
`audio/mpeg`	Berkas audio MP3	Musik, podcast
`video/mp4`	Berkas video MP4	Pemutaran video

Ada beberapa pola yang patut diperhatikan. Apa pun yang berbentuk biner dan tidak teridentifikasi cenderung menjadi application/octet-stream, yang ibarat kotak digital tanpa label. Sementara sebagian format meminjam akhiran +xml atau +json (seperti image/svg+xml) untuk berkata “pada dasarnya ini XML atau JSON, tetapi dipakai untuk tujuan tertentu.”

Menyetel tipe dalam praktik

Kamu jarang menulis MIME type secara manual untuk berkas statis. Server web menyimpan pemetaan bawaan dari ekstensi berkas ke MIME type, jadi berkas berakhiran .css otomatis disajikan sebagai text/css. Kasus saat kamu benar-benar memikirkannya biasanya ada dua.

Pertama, ketika kamu membangun sebuah API atau mengirim respons dari kodemu sendiri, kamu memasang headernya secara eksplisit. Pada server kecil, kamu mungkin menulis seperti ini:

// Contoh singkat: membalas dengan JSON
response.setHeader("Content-Type", "application/json");
response.end(JSON.stringify({ user: "John Doe", active: true }));

Kedua, ketika kamu mengirim request yang punya isi, misalnya mengirim data ke sebuah API, kamu memberi tahu server apa yang sedang kamu kirim:

POST /api/users HTTP/1.1
Host: blog.acy-partner.com
Content-Type: application/json

{"name":"John Doe","role":"editor"}

Server membaca Content-Type itu dan tahu harus menguraikan isinya sebagai JSON, bukan sebagai field formulir atau teks polos.

Saat menelusuri masalah, cek headernya dulu

Kalau sebuah halaman tampak tanpa gaya, sebuah skrip tidak pernah jalan, atau respons API tidak mau terurai, buka developer tools di browsermu, lihat tab Network, klik request-nya, lalu baca Content-Type-nya. Banyak sekali bug “misterius” yang ternyata cuma soal media type yang salah atau hilang.

Rangkuman

MIME type adalah label singkat dua bagian, ditulis sebagai type/subtype, yang memberi tahu perangkat lunak jenis data yang sedang dihadapinya. Header HTTP Content-Type adalah cara label itu ikut berjalan bersama respons maupun request, dan browser memakainya untuk memutuskan apakah harus menampilkan halaman, menampilkan gambar, menjalankan skrip, atau menyodorkan unduhan. Karena label inilah yang menggerakkan perilaku, salah memasangnya diam-diam merusak tampilan, skrip, API, dan banyak hal lain, makanya kamu menyetelnya dengan sengaja alih-alih membiarkan browser menebak.

Sekarang kamu sudah punya kosakata untuk membaca media type apa pun yang kamu temui, plus tabel umum yang bisa diandalkan. Dari sini, langkah lanjutan yang wajar adalah menengok header HTTP secara umum lebih dalam, serta bagaimana status code, caching, dan content negotiation bekerja sama membentuk apa yang sebenarnya dilakukan browser terhadap byte yang diterimanya.