Alat pengembang · Encoder & decoder Base64
URI Data menjelaskan: cara kerja data:image/png;base64 dan dari mana asalnya
· Latar belakang
base64 pengkodean
Skema data: URL ditentukan di 1998 sebagai cara untuk menyematkan sumber daya kecil secara langsung di halaman. Posting ini menjelaskan tata bahasanya, mengapa Base64 bersifat opsional dan di mana browser membatasi.
Favicon yang merupakan karakter 1,300 URL — bertemu dengan data: URI di alam liar dan membaca bagian-bagiannya
Data: URI menyematkan sumber daya kecil secara langsung di URL, menghindari permintaan HTTP terpisah. Formatnya ditentukan dalam RFC 2397 (didefinisikan dalam 1998) dan menggunakan tata bahasa dengan skema, jenis media opsional, tanda pengkodean opsional, dan payload itu sendiri. Misalnya, data:text/plain,hello adalah data teks biasa URI yang berisi kata hello. Browser memprosesnya dengan cara yang sama saat memproses permintaan HTTP, namun alih-alih mengambil konten melalui jaringan, browser menerjemahkannya dari URL itu sendiri.
URI data paling umum digunakan untuk gambar kecil, ikon CSS, dan perlengkapan pengujian. Data: URI dengan pengkodean Base64 terlihat seperti ini: data:image/png;base64,iVBORw0K.... Rinciannya adalah: data: adalah skemanya; image/png adalah jenis media; ;base64 adalah tanda pengkodean; string panjang adalah byte gambar yang dikodekan Base64. Saat browser melihat URL ini, browser akan mendekode Base64 untuk memulihkan byte asli, lalu merender gambar menggunakan byte tersebut.
Membaca data URI dari tata bahasanya yang terlihat — jenis media, penanda Base64 opsional, dan muatan
Jika tanda pengkodean dihilangkan (data:text/html,<p>hello</p>), payloadnya adalah teks UTF-8 yang dikodekan persen, bukan base64. Kehadiran ;base64 memberi tahu browser aturan decoding mana yang harus diterapkan. Tipe media dalam data: URI adalah tipe MIME, tipe string yang sama yang digunakan di HTTP header Tipe Konten. image/png, text/plain, application/json dan image/svg+xml adalah contoh umum. Jika tidak ada jenis media yang ditentukan, defaultnya adalah text/plain;charset=US-ASCII.
Browser harus menentukan cara merender byte berdasarkan jenis media: jika dikatakan image/png, byte-nya adalah PNG; jika tertulis text/html, isinya HTML. Menentukan jenis media yang salah dapat memberikan hasil yang membingungkan; file PNG berlabel text/plain akan ditampilkan sebagai karakter sampah, bukan gambar. Base64 bersifat opsional dalam data: URI. Untuk konten teks, pengkodean persen (pengkodean yang sama yang digunakan dalam string kueri URL) seringkali lebih ringkas daripada base64. Konsumen data URI memutuskan bagaimana menafsirkan muatan dari jenis media dan penanda sebelum koma. Encoder Base64 hanya menyediakan karakter payload. Itu tidak menambahkan tipe MIME, memilih apakah byte menggambarkan PNG atau SVG, atau memvalidasi alamat yang dirakit.
Mengapa Base64 bersifat opsional — muatan teks berkode persen untuk SVG dan teks biasa versus Base64 untuk biner
URI data:text/html,<p>Hello</p> berisi HTML sebagai karakter literal (dengan pengkodean persen untuk karakter khusus seperti tanda kutip atau tanda kurung siku). Base64 berguna untuk data biner yang tidak dapat direpresentasikan sebagai teks, dan untuk kasus di mana payload berisi banyak karakter khusus sehingga pengkodean persen akan membengkak. SVG kecil atau file teks mungkin memiliki persen yang lebih kecil; file biner harus base64. Membuat data: URI dengan tangan memerlukan pengetahuan tentang jenis media dan pengkodeannya.
Untuk ikon SVG, Anda dapat menggunakan data:image/svg+xml diikuti dengan markup SVG yang dikodekan persen atau byte yang dikodekan ;base64 dan base64. Untuk pengkodean persen, bungkus SVG dalam data:image/svg+xml, lalu enkodekan persen tanda kurung sudut, tanda kutip, dan karakter khusus lainnya. Hasilnya panjang tapi bisa dibaca manusia. Untuk base64, ambil SVG byte, enkodekan ke base64, dan hasilkan data:image/svg+xml;base64, lalu tambahkan string base64. Base64 biasanya lebih kompak untuk biner, tetapi untuk teks SVG, bentuk persen yang dikodekan mungkin lebih pendek.
Contoh praktis: membuat data: URI untuk SVG kecil dengan tangan — menyandikan markup sebagai teks dan merakit string
Browser dan aplikasi yang menggunakan dapat menerapkan batasan atau pembatasan kebijakan pada URI data, namun repositori ini tidak menetapkan batas atas numerik portabel. Penggunaan memori, perilaku parser, dan kebijakan keamanan juga bergantung pada tempat munculnya nilai, jadi ujilah browser target yang tepat dan sematkan konteks alih-alih mengandalkan batas yang diingat.
Gambar 5 MB yang tersemat di setiap file HTML akan memperbesar ukuran halaman. URI data paling cocok untuk sumber daya kecil: CSS ikon, gambar kecil, atau data pengujian. Untuk file besar, permintaan eksternal lebih cepat karena browser dapat menyimpan respons dalam cache dan menggunakannya kembali di beberapa halaman; data: URI disisipkan setiap kali halaman dimuat.
Batasan browser dan keamanan harus diverifikasi dalam aplikasi yang dikonsumsi daripada berasumsi
Ambang batas yang umum adalah beberapa kilobyte; di bawahnya, data: URI efisien; di atas itu, file eksternal biasanya lebih cepat. Kebijakan keamanan dan browser membatasi penggunaan data: URI dalam konteks tertentu. Navigasi tingkat atas (mengklik tautan yang mengarah ke data: URI dengan konten HTML) sering kali diblokir untuk mencegah phishing. Data: URI dalam atribut src skrip dapat mengeksekusi JavaScript secara sewenang-wenang, sehingga menimbulkan risiko keamanan.
Browser menerapkan aturan Kebijakan Keamanan Konten (CSP) pada data: URI; CSP yang ketat mungkin melarangnya sepenuhnya. Data: URI dalam img src atau iframe src biasanya diperbolehkan, namun disematkan dalam konteks gaya atau skrip mungkin dibatasi. Selalu periksa kompatibilitas browser dan kebijakan keamanan lingkungan target Anda. URI data di CSS umum digunakan untuk gambar latar kecil. Sintaksnya sama: url(data:image/png;base64,...).
Dimana data: URI masih merupakan alat yang tepat — ikon CSS, gambar sebaris yang aman untuk email, dan perlengkapan pengujian
File CSS dengan data tersemat: URI dapat dikirimkan sebagai satu file dengan semua gambar disertakan, sehingga mengurangi permintaan HTTP. Ini berguna untuk kumpulan ikon kecil atau grafik sederhana. Gambar besar yang tertanam di CSS akan membuat file menjadi besar dan memperlambat penguraiannya. Alat pembangunan modern (seperti webpack) dapat secara otomatis mengonversi gambar kecil menjadi data: URI di CSS, dan gambar eksternal ke URL normal, sehingga menyeimbangkan kinerja.
Format data: URI ditentukan oleh RFC 2397, sebuah dokumen pendek yang menentukan tata bahasa tetapi tidak menentukan di mana data: URI dapat atau tidak dapat digunakan. Vendor browser telah menambahkan batasan mereka sendiri berdasarkan masalah keamanan dan kinerja.
Apa yang tidak tercakup di sini — blob: URL, URL objek, dan akses sistem file
Beberapa sistem tidak lagi menggunakan data: URI dukungan dalam konteks tertentu (seperti tindakan formulir di CSP level 3) untuk mencegah penyalahgunaan. Saat menggunakan data: URI, ujilah di browser target Anda; RFC menyatakan bahwa format tersebut valid, namun kebijakan keamanan browser mungkin memblokirnya.
Membuat data: URI secara manual jarang terjadi dalam produksi; sebagian besar alat pembangunan dan perpustakaan menangani konversi. Namun memahami formatnya berguna untuk debugging. Jika Anda melihat data:image/... URL yang panjang di CSS atau HTML, Anda dapat mendekodekannya dengan alat encoder & decoder Base64: hapus awalan data:image/...;base64,, tempelkan string yang tersisa ke dalam alat, dan dekode untuk melihat byte sebenarnya.
Kesimpulan: format kecil dengan tata bahasa yang ketat — cara encoder & decoder Base64 menangani langkah pengkodean teks sehingga Anda dapat menyusun URI yang valid
Untuk data SVG: URI, Anda dapat mendekode persen bentuk teks dan membaca markup XML. Memahami anatomi data: URI mempermudah pemecahan masalah sumber daya yang disematkan. URI Data adalah standar Web (RFC 2397) yang memungkinkan penyematan sumber daya secara langsung sebagai URL. Mereka paling efisien untuk sumber daya kecil dan stabil yang tidak mendapat manfaat dari cache terpisah. Formatnya mencakup spesifikasi jenis media opsional dan tanda pengkodean (base64 atau pengkodean persen tersirat).
Pengkodean Base64 diperlukan untuk data biner tetapi opsional untuk teks; SVG yang dikodekan persen dapat lebih mudah dibaca. Kebijakan keamanan browser membatasi penggunaan data: URI, jadi memahami batasan di lingkungan target Anda sangatlah penting. Alat encoder & decoder Base64 dapat membantu Anda mengkodekan sumber daya secara manual atau mendekode URI yang tertanam untuk memeriksa kontennya.