Saya memiliki beberapa kode Javascript yang berkomunikasi dengan backend XML-RPC. XML-RPC mengembalikan string dari formulir:
<img src='myimage.jpg'>
Namun, ketika saya menggunakan Javascript untuk memasukkan string ke HTML, mereka membuat secara harfiah. Saya tidak melihat gambar, saya benar-benar melihat string:
<img src='myimage.jpg'>
Dugaan saya adalah bahwa HTML sedang melarikan diri melalui saluran XML-RPC.
Bagaimana saya bisa menghapus string dalam Javascript? Saya mencoba teknik-teknik pada halaman ini, tidak berhasil: http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/
Apa cara lain untuk mendiagnosis masalah ini?
javascript
html
escaping
xml-rpc
Joseph Turian
sumber
sumber
Jawaban:
EDIT: Anda harus menggunakan DOMParser API seperti yang disarankan Wladimir , saya mengedit jawaban saya sebelumnya karena fungsi yang diposting memperkenalkan kerentanan keamanan.
Cuplikan berikut adalah kode jawaban lama dengan modifikasi kecil: menggunakan
textarea
bukandiv
mengurangi kerentanan XSS, tetapi masih bermasalah di IE9 dan Firefox.Pada dasarnya saya membuat elemen DOM secara terprogram, menetapkan HTML yang dikodekan ke dalamnyaHTML dan mengambil nilai simpul dari simpul teks yang dibuat pada penyisipan innerHTML. Karena itu hanya membuat elemen tetapi tidak pernah menambahkannya, tidak ada situs HTML yang dimodifikasi.
Ini akan bekerja lintas-browser (termasuk browser lama) dan menerima semua Entitas Karakter HTML .
EDIT: Versi lama dari kode ini tidak berfungsi di IE dengan input kosong, seperti dibuktikan di sini di jsFiddle (lihat di IE). Versi di atas berfungsi dengan semua input.
UPDATE: tampaknya ini tidak berfungsi dengan string besar, dan itu juga memperkenalkan kerentanan keamanan , lihat komentar.
sumber
'
bukan milik Entitas HTML 4, itu sebabnya! w3.org/TR/html4/sgml/entities.html fishbowl.pastiche.org/2003/07/01/the_curse_of_aposSebagian besar jawaban yang diberikan di sini memiliki kelemahan besar: jika string yang Anda coba konversi tidak dipercaya maka Anda akan berakhir dengan kerentanan Cross-Site Scripting (XSS) . Untuk fungsi dalam jawaban yang diterima , pertimbangkan hal berikut:
String di sini berisi tag HTML yang tidak terhapus, jadi alih-alih mendekode apa pun
htmlDecode
fungsi tersebut sebenarnya akan menjalankan kode JavaScript yang ditentukan di dalam string.Ini dapat dihindari dengan menggunakan DOMParser yang didukung di semua browser modern :
Fungsi ini dijamin tidak menjalankan kode JavaScript apa pun sebagai efek samping. Tag HTML apa pun akan diabaikan, hanya konten teks yang akan dikembalikan.
Catatan kompatibilitas : Parsing HTML dengan
DOMParser
membutuhkan setidaknya Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 atau Microsoft Edge. Jadi semua browser tanpa dukungan sudah melewati EOL mereka dan pada 2017 satu-satunya yang masih dapat dilihat di alam liar kadang-kadang adalah versi Internet Explorer dan Safari yang lebih lama (biasanya ini masih tidak cukup mengganggu).sumber
DOMParser
tidak mendukung"text/html"
sebelum Firefox 12.0, dan masih ada beberapa versi browser terbaru yang bahkan tidak mendukungDOMParser.prototype.parseFromString()
. Menurut referensi Anda,DOMParser
masih merupakan teknologi eksperimental, dan stand-in menggunakaninnerHTML
properti yang, seperti yang Anda tunjukkan sebagai jawaban atas pendekatan saya , memiliki kerentanan XSS ini (yang seharusnya diperbaiki oleh vendor browser).<script>
tag yang tidak dijalankan bukanlah mekanisme keamanan, aturan ini hanya menghindari masalah pengaturan waktu yang rumit jika pengaturaninnerHTML
dapat menjalankan skrip sinkron sebagai efek samping. Sanitasi kode HTML adalah urusan rumit daninnerHTML
bahkan tidak mencoba - sudah karena halaman web mungkin benar-benar bermaksud untuk mengatur inline event handler. Ini sama sekali bukan mekanisme yang ditujukan untuk data yang tidak aman, berhenti penuh.Jika Anda menggunakan jQuery:
Jika tidak, gunakan Object Encoder Strictly Software , yang memiliki
htmlDecode()
fungsi sangat baik .sumber
Caranya adalah dengan menggunakan kekuatan browser untuk mendekode karakter HTML khusus, tetapi tidak mengizinkan browser untuk mengeksekusi hasil seolah-olah itu html yang sebenarnya ... Fungsi ini menggunakan regex untuk mengidentifikasi dan mengganti karakter HTML yang dikodekan, satu karakter pada suatu waktu.
sumber
/\&#?[0-9a-z]+;/gi
karena # seharusnya hanya muncul sebagai karakter ke-2 jika sama sekali.Jawaban CMS berfungsi dengan baik, kecuali HTML yang ingin Anda hapus sangat panjang, lebih panjang dari 65536 karakter. Karena di Chrome HTML bagian dalam terpecah menjadi banyak simpul anak, masing-masing panjangnya paling lama 65.536, dan Anda harus menyatukannya. Fungsi ini juga berfungsi untuk string yang sangat panjang:
Lihat jawaban ini tentang
innerHTML
panjang maks untuk info lebih lanjut: https://stackoverflow.com/a/27545633/694469sumber
Bukan respons langsung terhadap pertanyaan Anda, tetapi bukankah lebih baik bagi RPC Anda untuk mengembalikan beberapa struktur (baik itu XML atau JSON atau apa pun) dengan data gambar tersebut (url dalam contoh Anda) di dalam struktur itu?
Maka Anda bisa menguraikannya dalam javascript Anda dan membangun
<img>
menggunakan javascript itu sendiri.Struktur yang Anda terima dari RPC dapat terlihat seperti:
Saya pikir lebih baik seperti ini, karena menyuntikkan kode yang berasal dari sumber eksternal ke halaman Anda tidak terlihat sangat aman. Membayangkan seseorang membajak skrip XML-RPC Anda dan meletakkan sesuatu yang tidak Anda inginkan di sana (bahkan beberapa javascript ...)
sumber
htmlDecode("<img src='myimage.jpg'><script>alert('xxxxx');</script>")
dan tidak ada yang terjadi. Saya mendapatkan string html yang didekode kembali seperti yang diharapkan.Jawaban Chris bagus & elegan tetapi gagal jika nilainya tidak ditentukan . Hanya peningkatan sederhana membuatnya solid:
sumber
return (typeof value !== 'string') ? '' : $('<div/>').html(value).text();
Sama-sama ... hanya pembawa pesan ... kredit penuh diberikan ke ourcodeworld.com, tautan di bawah ini.
Kredit Lengkap: https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript
sumber
Ini adalah solusi paling komprehensif yang saya coba sejauh ini:
sumber
Saya cukup gila untuk melalui dan membuat fungsi ini yang harus cantik, jika tidak sepenuhnya, lengkap:
Digunakan seperti ini:
Cetakan:
Ich Heiße David
PS ini butuh waktu setengah jam untuk membuatnya.
sumber
Untuk menghapus entitas HTML * dalam JavaScript, Anda dapat menggunakan perpustakaan kecil html-escaper :
npm install html-escaper
Atau
unescape
berfungsi dari Lodash atau Underscore , jika Anda menggunakannya.*) Mohon perhatikan bahwa fungsi-fungsi ini tidak mencakup semua entitas HTML, tetapi hanya yang paling umum, yaitu
&
,<
,>
,'
,"
. Untuk menghapus semua entitas HTML Anda dapat menggunakan dia perpustakaan.sumber
Saya menggunakan ini dalam proyek saya: terinspirasi oleh jawaban lain tetapi dengan parameter ekstra aman, dapat berguna ketika Anda berurusan dengan karakter yang didekorasi
Dan itu dapat digunakan seperti:
sumber
Semua jawaban lain di sini memiliki masalah.
Metode document.createElement ('div') (termasuk yang menggunakan jQuery) menjalankan javascript apa saja yang diteruskan ke dalamnya (masalah keamanan) dan metode DOMParser.parseFromString () memangkas spasi putih. Berikut ini adalah solusi javascript murni yang tidak memiliki masalah:
TextArea digunakan khusus untuk menghindari kode js executig. Melewati ini:
sumber
htmlDecode("</textarea><img src=x onerror=alert(1)>")
. Anda memposting ini setelah saya sudah menunjukkan masalah ini pada jawaban oleh Sergio Belevskij.sumber
Ada varian yang 80% seproduktif jawaban di bagian paling atas.
Lihat patokan: https://jsperf.com/decode-html12345678/1
Jika Anda perlu meninggalkan tag, maka hapus dua
.replace(...)
panggilan (Anda dapat meninggalkan yang pertama jika Anda tidak memerlukan skrip).sumber
decodeEntities("</textarea '><img src=x onerror=alert(1) \">")
di Firefox. Harap berhenti berusaha membersihkan kode HTML dengan ekspresi reguler.