Alat pengembang · HTML WYSIWYG editor
Dari DOM hingga Markup: Bagaimana Serialisasi innerHTML Membentuk HTML yang Anda Dapatkan
· Cara kerjanya
html entitas-html alur kerja pengembang
Menjelaskan aturan yang diikuti browser saat mengubah pohon DOM kembali menjadi string HTML, mulai dari pelolosan dan entitas hingga elemen batal dan kutipan atribut, dan mengapa keluaran editor terlihat seperti itu.
Mengapa <br> muncul kembali sebagai <br /> dalam pembersih ini
Fragmen sumber yang berisi `<br>` menjadikan pembersih ini sebagai `<br />`. Hasil tersebut bukanlah bukti bahwa setiap browser membuat serial HTML dengan garis miring. Ini adalah pilihan yang disengaja dalam penulis ulang string ToolAcre, yang cabang elemen kosongnya mengeluarkan spasi dan garis miring untuk elemen br dan hr yang diizinkan.
Perbedaan ini mencegah penjelasan umum yang salah. Permukaan visual dibaca melalui innerHTML, tetapi sumber yang disalin kemudian diberi token dan dibangun kembali dengan kode aplikasi. Apa yang diterima pengguna mencerminkan string DOM yang dibuat browser dan konvensi keluaran ToolAcre yang lebih sempit, termasuk alias, atribut yang difilter, dan tag seimbang.
Tokenisasi masuk, penulisan ulang daftar yang diizinkan — ini bukan serialisasi innerHTML browser
Tokenizer memindai karakter tanpa membuat node DOM atau memanggil DOMParser. Ia mengenali teks, komentar, deklarasi, tag awal, tag akhir, dan badan elemen teks mentah. Sanitasi mengulangi urutan datar tersebut, menjaga struktur yang diperbolehkan, membuka bungkus biasa yang tidak diketahui, dan menekan wadah berbahaya beserta isinya.
Akibatnya, ejaan aslinya tidak dipertahankan. Nama dengan huruf campuran menjadi huruf kecil; b menjadi kuat, i menjadi em, strike dan del menjadi s, dan ins menjadi u. Outputnya dibuat ulang dari token yang diterima, bukan dikembalikan sebagai substring asli, sehingga pemformatan sumber dan detail yang tidak didukung akan hilang sesuai desain.
Melarikan diri dari teks dan atribut sambil menormalkan entitas yang diketahui
Teks didekodekan oleh entitas terlebih dahulu dan di-escape lagi. Tanda ampersand menjadi `&`, tanda kurang dari dan lebih besar dari menjadi `<` dan `>`, dan karakter kontrol yang dilarang dihilangkan. Urutan ini menjaga `&` yang ada tetap stabil di lintasan berulang alih-alih mengubahnya menjadi `&amp;`.
Nilai atribut mengikuti jalur keluar yang lebih ketat yang juga mengutip tanda kutip ganda, tanda kutip tunggal, tanda kurung sudut, dan ampersand. Entitas yang diketahui didekodekan sebelum atribut yang diterima dipancarkan. Tes ini menyematkan idempotensi untuk kueri teks dan tautan, tetapi kode tersebut tidak menjanjikan pelestarian setiap ejaan entitas penulis seperti referensi bernama versus referensi numerik.
Batalkan elemen dan tag penutup yang seimbang di penulis ulang khusus
Hanya br dan hr yang diperbolehkan dan diklasifikasikan sebagai batal dalam kumpulan keluaran. Mereka tidak pernah menerima tag penutup. Untuk elemen non-void yang diizinkan, tumpukan rekaman terbuka bersarang. Penutupan yang bersilangan seperti strong around em menyebabkan elemen dalam menutup terlebih dahulu, menghasilkan markup yang seimbang daripada mempertahankan tatanan yang salah.
Elemen yang tidak tertutup ditutup pada bagian akhir, sedangkan tag penutup yang menyimpang diabaikan. Ini adalah kebijakan penyeimbangan penulis ulang, bukan implementasi lengkap dari pemulihan kesalahan HTML5 browser. Sumbernya sendiri memperingatkan tentang perbedaan parser, itulah sebabnya keluarannya tidak boleh dipasarkan sebagai pembersih masukan musuh yang universal.
Atribut diizinkan dan dikutip; pesanan sumber saja bukanlah kontrak
Tidak ada tas atribut umum yang bertahan. Paragraf dan judul tidak mengizinkan apa pun; tautan mengizinkan href dan judul; singkatan mengizinkan judul; kutipan mengizinkan kutipan; daftar yang dipesan memungkinkan mulai dan mengetik. Setiap nilai yang dipancarkan diberi tanda kutip ganda, dan tautan yang diterima juga mendapatkan `rel="noopener noreferrer nofollow"`.
Urutan atribut mengikuti token yang diterima dan bidang rel yang ditambahkan, tetapi mengandalkan pesanan akan menjadi hal yang rapuh. Makna terletak pada nama dan nilai yang diperbolehkan. Bentuk awal bilangan bulat yang salah dihilangkan, skema href atau kutipan yang tidak aman ditolak, dan atribut yang tidak diketahui menghasilkan alasan penghapusan alih-alih secara diam-diam menjadi bagian dari markup yang dipublikasikan.
Contoh praktis: memindahkan cuplikan melalui pembersih ToolAcre
Coba `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. Kelas dihapus, B dipetakan ke kuat, ampersand yang ada tetap menjadi ampersand yang lolos, br menjadi tertutup sendiri, dan tautan tidak aman kehilangan hrefnya sambil tetap mempertahankan teks tautan yang terlihat.
Mode sumber cantik kemudian menempatkan elemen blok yang didukung pada garis dan indentasi daftar anak. Itu menyatukan konten sebaris dan mempertahankan teks di dalam sebelumnya. Pemformatan adalah penerusan keterbacaan dari keluaran yang sudah ditulis ulang; ini bukan parser keamanan kedua dan tidak memulihkan spasi yang telah dihapus oleh normalisasi sebelumnya.
Apa yang tidak tercakup di sini — browser, serialisasi XML atau XHTML
Artikel ini tidak menjelaskan jaminan serialisasi browser asli, XMLSerializer, sintaksis XHTML atau aturan tag penutup HTML opsional secara umum. Ini mendokumentasikan konvensi yang dapat diamati dalam repositori ini. Klaim tentang ` ` secara khusus dihilangkan karena tabel entitas lokal, bukan serializer browser umum, yang menentukan referensi bernama yang dikenali.
Pembuat pratinjau membersihkan sekali lagi dan membungkus fragmen dalam dokumen lengkap bertema ringan. Salin HTML mengembalikan fragmen; Unduh HTML mengembalikan dokumen itu. Itu adalah artefak yang sengaja dibuat berbeda. Baca label tindakan sebelum berasumsi bahwa file yang diunduh identik dengan byte sumber yang disalin.
Kesimpulan: serialisnya konsisten, masukan Anda tidak — merangkum cara memprediksi keluaran editor dan caranya ToolAcre'S HTML WYSIWYG editor menunjukkan apa yang sebenarnya dihasilkan browser
Prediksi ToolAcre dengan mengikuti tahapannya: memberi token pada string, mendekode entitas yang didukung, menerapkan alias elemen dan daftar yang diizinkan, memeriksa URL, menyeimbangkan tag yang diterima, keluar dari keluaran, dan secara opsional mencetaknya dengan cantik. Urutan tersebut menjelaskan hasil sebenarnya dengan lebih akurat daripada mengatakan innerHTML hanya mempertahankan atau membuat serial sumber penulis.
Gunakan mode sumber untuk mengamati penulisan ulang dengan perlengkapan kecil sebelum memproses draf yang panjang. Pembersih menolak dokumen di atas 500,000 karakter, jadi input yang terlalu besar akan gagal daripada membekukan tab. Pisahkan kebijakan HTML milik tujuan dari subset yang sengaja dipadatkan oleh editor ini.