Alat pembangun · HTML WYSIWYG editor
Daripada DOM kepada Markup: Bagaimana Pensirian HTML dalaman Membentuk HTML yang Anda Dapat
· Bagaimana ia berfungsi
html html-entiti aliran kerja pembangun
Menerangkan peraturan yang dipatuhi oleh pelayar apabila menukar pokok DOM semula menjadi rentetan HTML, daripada pelepasan aksara dan entiti kepada membatalkan elemen dan petikan atribut, dan sebab output editor kelihatan seperti yang berlaku.
Mengapa <br> kembali sebagai <br /> dalam sanitizer ini
Serpihan sumber yang mengandungi `<br>` menjadikan sanitizer ini sebagai `<br />`. Keputusan itu bukan bukti bahawa setiap pelayar mensiri HTML dengan garis miring. Ia adalah pilihan yang disengajakan dalam penulis semula rentetan ToolAcre, yang cawangan elemen kosongnya memancarkan ruang dan garis miring untuk elemen br dan hr yang dibenarkan.
Perbezaan ini menghalang penjelasan palsu yang biasa. Permukaan visual dibaca melalui innerHTML, tetapi sumber yang disalin kemudiannya ditoken dan dibina semula oleh kod aplikasi. Perkara yang diterima pengguna mencerminkan kedua-dua rentetan DOM yang dibuat oleh pelayar dan konvensyen output yang lebih sempit ToolAcre, termasuk alias, atribut yang ditapis dan teg seimbang.
Masuk token, penulisan semula senarai dibenarkan — ini bukan siri HTML dalaman pelayar
Tokenizer mengimbas aksara tanpa membina DOM nod atau memanggil DOMParser. Ia mengiktiraf teks, ulasan, pengisytiharan, tag mula, tag akhir dan badan elemen teks mentah. Pembersihan mengulangi urutan rata itu, mengekalkan struktur yang dibenarkan, membuka pembalut biasa yang tidak diketahui dan menyekat bekas berbahaya dengan kandungannya.
Akibatnya, ejaan asal tidak dikekalkan. Nama huruf bercampur menjadi huruf kecil; b menjadi kuat, i menjadi em, strike dan del menjadi s, dan ins menjadi u. Output dijana semula daripada token yang diterima dan bukannya dikembalikan sebagai subrentetan asal, jadi pemformatan sumber dan butiran yang tidak disokong hilang mengikut reka bentuk.
Pelepasan aksara dari teks dan atribut sambil menormalkan entiti yang diketahui
Teks dinyahkodkan entiti dahulu dan dilepaskan semula. Ampersand menjadi `&`, tanda kurang daripada dan lebih besar daripada menjadi `<` dan `>`, dan aksara kawalan yang dilarang akan hilang. Pesanan ini memastikan `&` sedia ada stabil merentas hantaran berulang dan bukannya mengubahnya menjadi `&amp;`.
Nilai atribut mengikut laluan pelepasan aksara yang lebih ketat yang turut memetik petikan berganda, petikan tunggal, kurungan sudut dan ampersand. Entiti yang diketahui dinyahkod sebelum atribut yang diterima dikeluarkan. Ujian menyematkan idempotensi untuk pertanyaan teks dan pautan, tetapi kod itu tidak menjanjikan pemeliharaan setiap ejaan entiti pengarang seperti rujukan yang dinamakan berbanding angka.
Elemen tidak sah dan teg penutup yang seimbang dalam penulis semula tersuai
Sahaja br dan hr kedua-duanya dibenarkan dan diklasifikasikan sebagai tidak sah dalam set output. Mereka tidak pernah menerima tag penutup. Untuk elemen yang tidak dibenarkan, tindanan terbuka merekodkan sarang. Penutupan bersilang seperti kuat di sekelilingnya menyebabkan elemen dalaman ditutup terlebih dahulu, menghasilkan penanda yang seimbang dan bukannya mengekalkan susunan yang salah.
Elemen tidak tertutup ditutup pada penghujungnya, manakala tag penutup sesat diabaikan. Ini ialah dasar pengimbangan penulis semula, bukan pelaksanaan lengkap pemulihan ralat HTML5 pelayar. Sumber itu sendiri memberi amaran tentang perbezaan parser, itulah sebabnya output tidak boleh dipasarkan sebagai pembersih input bermusuhan sejagat.
Atribut disenaraikan dibenarkan dan disebut; pesanan sumber sahaja bukan kontrak
Tiada beg atribut generik bertahan. Perenggan dan tajuk tidak membenarkan apa-apa; pautan membenarkan href dan tajuk; singkatan membenarkan tajuk; petikan membenarkan petik; senarai tersusun membenarkan permulaan dan taip. Setiap nilai yang dipancarkan adalah disebut dua kali, dan pautan yang diterima juga mendapat `rel="noopener noreferrer nofollow"`.
Susunan atribut mengikut token yang diterima dan medan rel yang ditambahkan, tetapi bergantung pada pesanan akan menjadi rapuh. Makna terletak pada nama dan nilai yang dibenarkan. Permulaan integer yang cacat digugurkan, href tidak selamat atau skim petik ditolak dan atribut yang tidak diketahui menjana sebab penyingkiran dan bukannya menjadi sebahagian daripada penanda yang diterbitkan secara senyap.
Contoh yang berkesan: pergi balik coretan melalui sanitizer ToolAcre
Cuba `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. Kelas dialih keluar, B memetakan kepada kuat, ampersand sedia ada kekal sebagai ampersand terlepas, br menjadi tertutup sendiri dan pautan tidak selamat kehilangan hrefnya sambil mengekalkan teks pautan yang boleh dilihat.
Mod sumber cantik kemudian meletakkan elemen blok yang disokong pada baris dan anak senarai inden. Ia meninggalkan kandungan sebaris bersama-sama dan mengekalkan teks di dalam pra. Pemformatan ialah lulus kebolehbacaan ke atas output yang telah ditulis semula; ia bukan penghurai keselamatan kedua dan tidak memulihkan ruang kosong yang telah dialih keluar normalisasi sebelumnya.
Perkara ini tidak meliputi — pelayar, XML atau XHTML siri
Artikel ini tidak menerangkan jaminan pensirilan pelayar asli, XMLSerializer, sintaks XHTML atau peraturan teg penutup HTML pilihan secara umum. Ia mendokumenkan konvensyen yang boleh diperhatikan dalam repositori ini. Tuntutan mengenai ` ` secara khusus ditinggalkan kerana jadual entiti setempat, bukan penyeri pelayar umum, menentukan rujukan bernama yang diiktiraf.
Pembina pratonton membersihkan sekali lagi dan membungkus serpihan dalam dokumen bertema ringan yang lengkap. Salin HTML mengembalikan serpihan; Muat turun HTML mengembalikan dokumen itu. Itu adalah artifak yang sengaja berbeza. Baca label tindakan sebelum menganggap fail yang dimuat turun adalah sama bait dengan sumber yang disalin.
Bawa pulang: pembuat bersiri adalah konsisten, input anda tidak — meringkaskan cara meramalkan output editor dan cara editor ToolAcre HTML WYSIWYG menunjukkan perkara yang sebenarnya dihasilkan oleh pelayar
Ramalkan ToolAcre dengan mengikut peringkatnya: tokenize rentetan, nyahkod entiti yang disokong, gunakan elemen alias dan senarai dibenarkan, periksa URL, imbangkan teg yang diterima, escape output dan pilihan cantik-cetaknya. Urutan itu menerangkan hasil sebenar dengan lebih tepat daripada mengatakan innerHTML sahaja mengekalkan atau mensiri sumber pengarang.
Gunakan mod sumber untuk memerhatikan penulisan semula dengan lekapan kecil sebelum memproses draf yang panjang. Sanitizer menolak dokumen di atas 500,000 aksara, jadi input bersaiz besar gagal daripada membekukan tab. Pastikan dasar HTML destinasi sendiri berasingan daripada subset editor ini yang sengaja padat.