Alat pembangun · Pengekod & penyahkod Base64
URI data menerangkan: cara data:image/png;base64 berfungsi dan dari mana asalnya
· Latar belakang
asas64 pengekodan
Data: Skim URL telah ditentukan dalam 1998 sebagai cara untuk membenamkan sumber kecil secara langsung dalam halaman. Siaran ini menerangkan tatabahasanya, sebab Base64 adalah pilihan dan tempat pelayar membuat had.
Favicon yang merupakan watak 1,300 URL — bertemu dengan data: URI di alam liar dan membaca bahagiannya
Data: URI membenamkan sumber kecil secara langsung dalam URL, mengelakkan permintaan HTTP yang berasingan. Format dinyatakan dalam RFC 2397 (ditakrifkan dalam 1998) dan menggunakan tatabahasa dengan skema, jenis media pilihan, bendera pengekodan pilihan dan muatan itu sendiri. Contohnya, data:text/plain,hello ialah data teks biasa URI yang mengandungi perkataan hello. Pelayar memproses ini dengan cara yang sama ia memproses permintaan HTTP, tetapi bukannya mengambil kandungan melalui rangkaian, ia menyahkodnya daripada URL itu sendiri.
URI data adalah yang paling biasa untuk imej kecil, ikon CSS dan lekapan ujian. Data: URI dengan pengekodan Base64 kelihatan seperti ini: data:image/png;base64,iVBORw0K.... Pecahan ialah: data: ialah skema; image/png ialah jenis media; ;base64 ialah bendera pengekodan; rentetan panjang ialah bait imej berkod Base64. Apabila pelayar melihat URL ini, ia menyahkod Base64 untuk memulihkan bait asal, kemudian memaparkan imej menggunakan bait tersebut.
Membaca data URI daripada tatabahasa yang boleh dilihat — jenis media, penanda Base64 pilihan dan muatan
Jika bendera pengekodan diabaikan (data:text/html,<p>hello</p>), muatan adalah peratusan dikodkan UTF-8 teks, bukan base64. Kehadiran ;base64 memberitahu pelayar peraturan penyahkodan yang hendak digunakan. Jenis media dalam data: URI ialah jenis MIME, rentetan jenis yang sama digunakan dalam pengepala Jenis Kandungan HTTP. image/png, text/plain, application/json dan image/svg+xml ialah contoh biasa. Jika tiada jenis media dinyatakan, lalai ialah teks/plain;charset=US-ASCII.
Pelayar mesti menentukan cara untuk memaparkan bait berdasarkan jenis media: jika ia menyatakan imej/png, bait ialah PNG; jika tertera teks/html, kandungannya ialah HTML. Menentukan jenis media yang salah boleh menghasilkan hasil yang mengelirukan; fail PNG yang dilabelkan sebagai teks/plain akan dipaparkan sebagai aksara sampah dan bukannya imej. Base64 adalah pilihan dalam data: URI. Untuk kandungan teks, pengekodan peratus (pengekodan yang sama digunakan dalam rentetan pertanyaan URL) selalunya lebih padat daripada base64. Pengguna data URI memutuskan cara mentafsir muatan daripada jenis media dan penanda sebelum koma. Pengekod Base64 sahaja membekalkan aksara muatan. Ia tidak menambah jenis MIME, pilih sama ada bait menerangkan PNG atau SVG atau mengesahkan alamat yang dipasang.
Mengapa Base64 adalah pilihan — muatan teks yang dikodkan peratus untuk SVG dan teks biasa berbanding Base64 untuk binari
URI data:text/html,<p>Hello</p> mengandungi HTML sebagai aksara literal (dengan pengekodan peratus untuk sebarang aksara khas seperti petikan atau kurungan sudut). Base64 berguna untuk data binari yang tidak boleh diwakili sebagai teks dan untuk kes di mana muatan mengandungi banyak aksara khas yang pengekodan peratus akan meningkat. SVG kecil atau fail teks mungkin dikodkan peratus yang lebih kecil; fail binari mestilah base64. Membina data: URI dengan tangan memerlukan mengetahui jenis media dan pengekodan.
Untuk ikon SVG, anda boleh menggunakan data:image/svg+xml diikuti dengan sama ada penanda SVG yang dikodkan peratus atau ;base64 dan bait yang dikodkan base64. Untuk pengekodan peratus, bungkus SVG dalam data:image/svg+xml, kemudian peratus-kodkan mana-mana kurungan sudut, petikan dan aksara khas yang lain. Hasilnya panjang tetapi boleh dibaca oleh manusia. Untuk base64, ambil SVG bait, kodkannya ke base64 dan hasilkan data:image/svg+xml;base64, kemudian tambahkan rentetan base64. Base64 biasanya lebih padat untuk binari, tetapi untuk teks SVG, bentuk peratusan yang dikodkan mungkin lebih pendek.
Contoh yang berjaya: membina data: URI untuk SVG kecil dengan tangan — mengekodkan penanda sebagai teks dan memasang rentetan
Pelayar dan aplikasi yang menggunakan boleh mengenakan had atau sekatan dasar pada URI data, tetapi repositori ini tidak mewujudkan siling berangka mudah alih. Penggunaan memori, tingkah laku penghurai dan dasar keselamatan juga bergantung pada tempat nilai itu muncul, jadi uji pelayar sasaran yang tepat dan konteks benam dan bukannya bergantung pada had yang diingati.
Imej terbenam 5 MB dalam setiap fail HTML akan mengembang saiz halaman. URI data adalah yang terbaik untuk sumber kecil: CSS ikon, imej kecil atau data ujian. Untuk fail besar, permintaan luaran adalah lebih pantas kerana pelayar boleh cache respons dan menggunakannya semula merentas berbilang halaman; data: URI diselaraskan setiap kali halaman dimuatkan.
Sempadan pelayar dan keselamatan untuk mengesahkan dalam aplikasi yang digunakan dan bukannya menganggap
Ambang biasa ialah beberapa kilobait; di bawah itu, data: URI adalah cekap; di atas itu, fail luaran biasanya lebih pantas. Dasar keselamatan dan pelayar mengehadkan data: URI penggunaan dalam konteks tertentu. Navigasi peringkat atas (mengklik pautan yang menghala ke data: URI dengan kandungan HTML) sering disekat untuk mengelakkan pancingan data. Data: URI dalam atribut src skrip boleh melaksanakan JavaScript sewenang-wenangnya, mewujudkan risiko keselamatan.
Pelayar menggunakan peraturan Dasar Keselamatan Kandungan (CSP) pada data: URI; CSP yang ketat mungkin melarangnya sepenuhnya. Data: URI dalam img src atau iframe src biasanya dibenarkan, tetapi dibenamkan dalam konteks gaya atau skrip mungkin dihadkan. Sentiasa semak keserasian pelayar dan dasar keselamatan persekitaran sasaran anda. URI data dalam CSS adalah perkara biasa untuk imej latar belakang yang kecil. Sintaks adalah sama: url(data:image/png;base64,...).
Di mana data: URI masih merupakan alat yang betul — CSS ikon, imej sebaris selamat e-mel dan lekapan ujian
Fail CSS dengan data terbenam: URI boleh dihantar sebagai satu fail dengan semua imej disertakan, mengurangkan permintaan HTTP. Ini berguna untuk set ikon kecil atau grafik ringkas. Imej besar yang dibenamkan dalam CSS mengembang fail dan memperlahankan penghuraiannya. Alat binaan moden (seperti pek web) boleh menukar imej kecil kepada data secara automatik: URI dalam CSS dan imej luaran kepada URL biasa, mengimbangi prestasi.
Format data: URI ditakrifkan oleh RFC 2397, dokumen ringkas yang menentukan tatabahasa tetapi tidak menentukan tempat data: URI boleh atau tidak boleh digunakan. Vendor pelayar telah menambah sekatan mereka sendiri berdasarkan kebimbangan keselamatan dan prestasi.
Perkara yang tidak dilindungi ini — gumpalan: URL, URL objek dan akses sistem fail
Sesetengah sistem telah menghentikan penggunaan data: URI sokongan dalam konteks tertentu (seperti tindakan bentuk dalam CSP tahap 3) untuk mengelakkan penyalahgunaan. Apabila menggunakan data: URI, ujinya dalam pelayar sasaran anda; RFC mengatakan format itu sah, tetapi dasar keselamatan pelayar mungkin menyekatnya.
Mencipta data: URI secara manual adalah luar biasa dalam pengeluaran; kebanyakan alat binaan dan perpustakaan mengendalikan penukaran. Tetapi memahami format berguna untuk penyahpepijatan. Jika anda melihat data yang panjang:image/... URL dalam CSS atau HTML anda, anda boleh menyahkodnya dengan alat pengekod & penyahkod Base64: alih keluar data:image/...;base64, awalan ke dalam alat itu, tampalkan rentetan yang tinggal.
Bawa pulang: format kecil dengan tatabahasa yang ketat — cara pengekod & penyahkod Base64 mengendalikan langkah pengekodan teks supaya anda boleh memasang URI yang sah
Untuk data SVG: URI, anda boleh menyahkod peratus bentuk teks dan membaca penanda XML. Memahami anatomi data: URI memudahkan untuk menyelesaikan masalah sumber terbenam. URI data ialah standard Web (RFC 2397) yang membenarkan membenamkan sumber secara langsung sebagai URL. Ia paling cekap untuk sumber yang kecil dan stabil yang tidak mendapat manfaat daripada caching berasingan. Format ini termasuk spesifikasi jenis media pilihan dan bendera pengekodan (base64 atau pengekodan peratus tersirat).
Pengekodan Base64 diperlukan untuk data binari tetapi pilihan untuk teks; SVG yang dikodkan peratus boleh lebih mudah dibaca. Dasar keselamatan pelayar mengehadkan tempat data: URI boleh digunakan, jadi memahami sekatan dalam persekitaran sasaran anda adalah penting. Alat pengekod & penyahkod Base64 boleh membantu anda mengekod sumber secara manual atau menyahkod URI terbenam untuk memeriksa kandungannya.