Bagaimana cara menggunakan jQuery untuk mendekode entitas HTML dalam sebuah string?
javascript
jquery
html
EddyR
sumber
sumber
Jawaban:
Sebenarnya, cobalah
sumber
$("<div/>").html('<img src="http://www.google.com/images/logos/ps_logo2.png" onload=alert(1337)>')
. Di Firefox atau Safari, ia mengaktifkan peringatan.str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/g, "")
atau yang serupa.Tanpa jQuery:
Ini bekerja mirip dengan jawaban yang diterima , tetapi aman untuk digunakan dengan input pengguna yang tidak dipercaya.
Masalah keamanan dalam pendekatan serupa
Seperti dicatat oleh Mike Samuel , melakukan ini dengan
<div>
bukan<textarea>
dengan input pengguna yang tidak dipercaya adalah kerentanan XSS, bahkan jika<div>
itu tidak pernah ditambahkan ke DOM:Namun, serangan ini tidak dimungkinkan terhadap a
<textarea>
karena tidak ada elemen HTML yang diizinkan konten a<textarea>
. Akibatnya, setiap tag HTML yang masih ada dalam string 'disandikan' akan secara otomatis disandikan oleh browser.* Terima kasih kepada Eru Penkman karena telah menangkap kerentanan ini.
sumber
decodedString = textArea.value;
textArea.remove();
return decodedString;
if ('remove' in Element.prototype) textArea.remove();
$("<div />").html(string).text()
akan mengeksekusi semua javascript dalam string yang disediakan , yang saya duga adalah penyebab masalah Anda. Jawaban yang diterima harus diperbarui untuk yang satu ini.Seperti yang dikatakan Mike Samuel, jangan gunakan jQuery.html (). Text () untuk mendekode entitas html karena tidak aman.
Sebagai gantinya, gunakan perender template seperti Mustache.js atau decodeEntities dari komentar @ VyvIT.
Pustaka sabuk utilitas Underscore.js dilengkapi dengan
escape
danunescape
metode, tetapi tidak aman untuk input pengguna:_.escape (string)
_.unescape (string)
sumber
unescape
dalam dokumen sekarang, btw._.unescape("'")
menghasilkan hanya "& # 39;" bukannya kutipan tunggal. Apakah ada sesuatu yang saya lewatkan atau garis bawah tidak melarikan diri ke kode entitas HTML seperti yang ditunjukkan pada: w3schools.com/tags/ref_entities.aspescape
danunescape
metode Underscore ... tidak aman untuk input pengguna" . Apa yang Anda maksud dengan ini? Kedengarannya seperti omong kosong bagi saya, tapi mungkin saya kehilangan sesuatu - dapatkah Anda menjelaskannya?_.unescape("<img src=fake onerror=alert('boo!')>")
(di Chrome / FF / IE). Tapi itu tidak muncul waspada. Mencoba di konsol dan juga memasukkannya ke dalam file JS saya. Hasil yang samaSaya pikir Anda membingungkan metode teks dan HTML. Lihatlah contoh ini, jika Anda menggunakan HTML bagian dalam elemen sebagai teks, Anda akan mendapatkan tag HTML yang didekodekan (tombol kedua). Tetapi jika Anda menggunakannya sebagai HTML, Anda akan mendapatkan tampilan berformat HTML (tombol pertama).
Tombol pertama menulis: di sini adalah konten HTML .
Tombol kedua menulis: di sini adalah konten <B> HTML </B>.
Omong-omong, Anda dapat melihat plug-in yang saya temukan di jQuery plugin - HTML decode dan encode yang mengkodekan dan mendekode string HTML.
sumber
Pertanyaannya dibatasi oleh 'with jQuery' tetapi mungkin membantu beberapa orang untuk mengetahui bahwa kode jQuery yang diberikan dalam jawaban terbaik di sini melakukan hal berikut di bawah ini ... ini berfungsi dengan atau tanpa jQuery:
sumber
Anda dapat menggunakan perpustakaan he , tersedia dari https://github.com/mathiasbynens/he
Contoh:
Saya menantang penulis perpustakaan tentang pertanyaan apakah ada alasan untuk menggunakan perpustakaan ini dalam kode sisi klien demi
<textarea>
peretasan yang diberikan dalam jawaban lain di sini dan di tempat lain. Dia memberikan beberapa kemungkinan pembenaran:Jika Anda menggunakan node.js serverside, menggunakan pustaka untuk pengkodean / decoding HTML memberi Anda solusi tunggal yang berfungsi baik di sisi klien dan di sisi server.
Algoritme penguraian entitas entitas peramban memiliki bug atau tidak ada dukungan untuk beberapa referensi karakter bernama . Sebagai contoh, Internet Explorer akan mendekode dan membuat spasi yang tidak melanggar (
) dengan benar tetapi melaporkannya sebagai ruang biasa alih-alih yang tidak melanggar melaluiinnerText
properti elemen DOM , memecahkan<textarea>
peretasan (meskipun hanya dengan sedikit cara). Selain itu, IE 8 dan 9 hanya tidak mendukung salah satu referensi karakter baru bernama ditambahkan dalam HTML 5. Penulis ia juga menjadi tuan tes bernama dukungan referensi karakter di http://mathias.html5.org/tests/html / bernama-karakter-referensi / . Di IE 8, ini melaporkan lebih dari seribu kesalahan.Jika Anda ingin diisolasi dari bug peramban yang terkait dengan penguraian kode entitas dan / atau dapat menangani serangkaian referensi karakter bernama lengkap, Anda tidak bisa lolos dari
<textarea>
peretasan; Anda akan membutuhkan perpustakaan seperti dia .Dia hanya merasa sangat baik seperti melakukan hal-hal dengan cara seperti ini.
sumber
menyandi:
membaca sandi:
sumber
Menggunakan
Paling mudah untuk melakukannya di sisi server karena ternyata JavaScript tidak memiliki pustaka asli untuk menangani entitas, juga saya tidak menemukan apa pun di dekat bagian atas hasil pencarian untuk berbagai kerangka kerja yang memperluas JavaScript.
Cari "entitas HTML JavaScript", dan Anda mungkin menemukan beberapa perpustakaan hanya untuk tujuan itu, tetapi mereka semua mungkin dibangun di sekitar logika di atas - ganti, entitas dengan entitas.
sumber
Saya hanya harus memiliki charater entitas HTML (⇓) sebagai nilai untuk tombol HTML. Kode HTML terlihat bagus dari awal di browser:
Sekarang saya menambahkan toggle yang juga harus menampilkan karakter. Ini solusi saya
Ini menampilkan ⇓ lagi di tombol. Saya harap ini bisa membantu seseorang.
sumber
"Embed & Share \u21d1"
), atau lebih baik lagi hanya"Embed & Share ⇑"
jika Anda dapat melayani skrip Anda dalam UTF-8 (atau UTF-16, atau penyandian lain yang mendukung karakter ⇑). Menggunakan elemen DOM untuk mem-parsing entitas HTML hanya untuk memanggang karakter unicode sewenang-wenang menjadi string JavaScript adalah pendekatan licik dan kreatif yang akan membuat Rube Goldberg bangga, tetapi bukan praktik yang baik; unicode escapes ada dalam bahasa khusus untuk menangani use case ini.Anda harus membuat fungsi khusus untuk entitas html:
sumber
Misalkan Anda memiliki String di bawah ini.
Kabin Deluxe kami hangat, nyaman & amp; nyaman
str dan tetapkan kembali ke
menandai.
itu dia.
sumber
Untuk pengguna ExtJS, jika Anda sudah memiliki string yang disandikan, misalnya ketika nilai yang dikembalikan dari fungsi perpustakaan adalah konten innerHTML, pertimbangkan fungsi ExtJS ini:
sumber
Perpanjang kelas String:
dan gunakan sebagai metode:
sumber
Coba ini :
parseHTML adalah sebuah Fungsi di perpustakaan Jquery dan itu akan mengembalikan array yang menyertakan beberapa detail tentang String yang diberikan.
dalam beberapa kasus, String sedang besar, jadi fungsinya akan memisahkan konten ke banyak indeks ..
dan untuk mendapatkan semua data indeks Anda harus pergi ke indeks apa pun, kemudian akses ke indeks yang disebut "wholeText".
Saya memilih indeks 0 karena ini akan berfungsi dalam semua kasus (String kecil atau string besar).
sumber
Berikut ini masih ada satu masalah: String yang dilompati tidak terlihat dapat dibaca ketika ditugaskan ke nilai input
Exapmle: https://jsfiddle.net/kjpdwmqa/3/
sumber
escape
metode Underscore.js. Juga tidak ada penjelasan bagaimana sampel kode Anda harus menyelesaikan masalah OP.Atau, ada juga perpustakaan untuk itu ..
di sini, https://cdnjs.com/libraries/he
Penggunaannya adalah sebagai berikut ...
Bersulang.
sumber
Untuk mendekode Entitas HTML dengan jQuery, cukup gunakan fungsi ini:
Cara Penggunaan:
Javascript:
HTML:
sumber
Cara termudah adalah dengan menetapkan pemilih kelas ke elemen Anda dan kemudian gunakan kode berikut:
Tidak ada lagi yang dibutuhkan!
Saya punya masalah ini dan menemukan solusi yang jelas dan berfungsi dengan baik.
sumber
Saya pikir itu adalah kebalikan dari solusi yang dipilih.
sumber