Adakah yang tahu cara mudah menghindari HTML dari string di jQuery ? Saya harus dapat melewati string arbitrer dan membuatnya lolos dengan benar untuk ditampilkan di halaman HTML (mencegah serangan JavaScript / injeksi HTML). Saya yakin mungkin untuk memperluas jQuery untuk melakukan ini, tetapi saya tidak cukup tahu tentang kerangka kerja saat ini untuk mencapai ini.
javascript
jquery
string
escaping
Halaman
sumber
sumber
Jawaban:
Karena Anda menggunakan jQuery , Anda bisa mengatur
text
properti elemen :sumber
$(element2).attr("some-attr", $(element1).html());
Lihat contoh ini: jsbin.com/atibig/1/editAda juga solusi dari mustache.js
sumber
'
dipetakan ke entitas dengan format desimal , sedangkan/
menggunakan format hex .\n
ke<br>
?Sumber: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
sumber
attr()
metode jQuery (setidaknya 1,8.3) melakukan penyandian sendiri, sehingga string yang tidak terenkripsi dapat dikirimkan secara langsung ; mis:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
$('<div/>')
menciptakandiv
elemen baru yang tidak dilampirkan ke DOM. Jadi itu tidak akan mengubah elemen yang ada. Agak membingungkan bagaimana jQuery menggunakan$()
fungsi yang sama untuk menemukan elemen ($('div')
) dan untuk membuatnya, dan untuk beberapa hal lagi selain ... :)Jika Anda melarikan diri ke HTML, hanya ada tiga yang dapat saya pikirkan yang akan sangat diperlukan:
Tergantung pada kasus penggunaan Anda, Anda mungkin juga perlu melakukan hal-hal seperti
"
untuk"
. Jika daftarnya cukup besar, saya hanya akan menggunakan array:encodeURIComponent()
hanya akan menghindarinya untuk URL, bukan untuk HTML.sumber
var
untuk mendeklarasikanitem
secara lokal; Lagi pula, jangan gunakanfor … in
loop sama sekali ketika looping melalui array! Gunakanfor
loop biasa sebagai gantinya. Oh, dan ituencodeURIComponent
tidakescapeURIComponent
.é
; Berikut daftar entitas html, untuk referensi: w3schools.com/tags/ref_entities.aspCukup mudah untuk menggunakan garis bawah:
Underscore adalah pustaka utilitas yang menyediakan banyak fitur yang tidak disediakan oleh js asli. Ada juga lodash yang merupakan API yang sama dengan garis bawah tetapi ditulis ulang agar lebih berkinerja.
sumber
Saya menulis fungsi kecil kecil yang melakukan ini. Hanya lolos
"
,&
,<
dan>
(tapi biasanya itu semua Anda perlu pula). Ini sedikit lebih elegan daripada solusi yang diusulkan sebelumnya karena hanya menggunakan satu.replace()
untuk melakukan semua konversi. ( EDIT 2: Pengurangan kompleksitas kode menjadikan fungsi lebih kecil dan lebih rapi, jika Anda penasaran dengan kode asli, lihat bagian akhir dari jawaban ini.)Ini Javascript biasa, tidak ada jQuery yang digunakan.
Lolos
/
dan'
jugaEdit dalam menanggapi komentar mklement .
Fungsi di atas dapat dengan mudah diperluas untuk memasukkan karakter apa pun. Untuk menentukan lebih banyak karakter untuk melarikan diri, cukup masukkan keduanya dalam kelas karakter dalam ekspresi reguler (yaitu di dalam
/[...]/g
) dan sebagai entri dalamchr
objek. ( EDIT 2: Mempersingkat fungsi ini juga, dengan cara yang sama.)Perhatikan penggunaan di atas
'
untuk tanda kutip (entitas simbolis'
mungkin telah digunakan sebagai gantinya - itu didefinisikan dalam XML, tetapi pada awalnya tidak termasuk dalam spesifikasi HTML dan karenanya mungkin tidak didukung oleh semua browser. Lihat: Artikel Wikipedia tentang penyandian karakter HTML ). Saya juga ingat pernah membaca di suatu tempat yang menggunakan entitas desimal lebih banyak didukung daripada menggunakan heksadesimal, tetapi saya tidak bisa menemukan sumber untuk itu sekarang. (Dan tidak mungkin ada banyak browser di luar sana yang tidak mendukung entitas heksadesimal.)Catatan: Menambahkan
/
dan'
ke daftar karakter yang lolos tidak terlalu berguna, karena mereka tidak memiliki arti khusus dalam HTML dan tidak perlu diloloskan.escapeHtml
Fungsi AsliEDIT 2: Fungsi asli menggunakan variabel (
chr
) untuk menyimpan objek yang diperlukan untuk.replace()
panggilan balik. Variabel ini juga membutuhkan fungsi anonim tambahan untuk membuat ruang lingkup, membuat fungsi (tidak perlu) sedikit lebih besar dan lebih kompleks.Saya belum menguji versi mana dari dua versi yang lebih cepat. Jika Anda melakukannya, jangan ragu untuk menambahkan info dan tautan di sini.
sumber
mustache.js
danunderscore.js
melakukannya? Berbicara tentang yang terakhir: itu hanya mengenali entitas numerik (mewakili'
dan/
'), dalam bentuk heks huruf besar ketika tidak melarikan diri. Dengan demikian, teks lolosmustache.js
- yang anehnya menggunakan campuran hex. dan format desimal - tidak akan dihapus dengan benar diunderscore.js
. Saya bertanya-tanya bagaimana perpustakaan populer lainnya mengatasinya.'
memiliki semacam fungsi khusus dalam XML (dan dengan demikian XHTML, saya bayangkan?), Itulah sebabnya XML (tetapi bukan HTML) memiliki entitas bernama'
. Tepatnya mengapa atau dengan cara apa itu "dicadangkan" saya tidak tahu. - Garis miring khusus di URL, tetapi itu tidak benar - benar menjamin mereka untuk dimasukkan dalam menghindari HTML (karena penyandian URL adalah sesuatu yang sangat berbeda).'
: benar: penggunaan aman hanya di XHTML ; langsung dari mulut sumber-sumber - penekanan milikku: "(...) dibaca oleh prosesor HTML yang sesuai , (...) penggunaan & apos; atau referensi entitas kustom mungkin tidak didukung (...)" - dalam praktiknya : browser modern mendukungnya bahkan dalam HTML . Kasus kembali dalam hex hex. (sumber yang sama; penekanan pada saya): "X harus huruf kecil dalam dokumen XML. [...] Hhhh dapat mencampur huruf besar dan kecil, meskipun huruf besar adalah gaya yang biasa ." Membuat kita bertanya-tanya siapa yang memutuskan untuk menyandikan garis miring; mungkin benar-benar hanya kebingungan antara pengkodean URI dan HTML?/
tidak diperlukan, tetapi pengkodean'
tampaknya masih berguna untuk menangani case case dengan aman di mana string yang dikodekan digunakan sebagai nilai atribut yang dilampirkan dalam tanda kutip tunggal .Saya menyadari betapa terlambatnya saya ke pesta ini, tetapi saya memiliki solusi yang sangat mudah yang tidak memerlukan jQuery.
Sunting: Ini tidak luput dari penawaran. Satu-satunya kasus di mana kutipan perlu diloloskan adalah jika konten akan ditempelkan sebaris dengan atribut dalam string HTML. Sulit bagi saya untuk membayangkan kasus di mana melakukan ini akan menjadi desain yang bagus.
Sunting 3: Untuk solusi tercepat, periksa jawaban di atas dari Saram. Yang ini adalah yang terpendek.
sumber
<
dan>
, tidak ada manfaatnya untuk lolos dari tanda kutip juga, kecuali maksud dari konten yang dihasilkan adalah untuk masuk ke atribut.Ini adalah fungsi JavaScript yang bersih dan jelas. Ini akan keluar dari teks seperti "beberapa <banyak" ke "beberapa & lt; banyak".
sumber
Setelah tes terakhir yang saya dapat merekomendasikan tercepat dan benar-benar lintas browser yang kompatibel native javascript (DOM) solusi:
Jika Anda mengulanginya berkali-kali, Anda bisa melakukannya dengan variabel yang sudah disiapkan:
Lihatlah perbandingan kinerja akhir saya ( pertanyaan tumpukan ).
sumber
var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
textContent
fungsi ini hanya didukung oleh Chrome 1+, Firefox 2, IE9, Opera 9.64 dan Safari 3 (dua yang terakhir dijelaskan "mungkin lebih awal"). Dengan demikian akan melanggar klaim OP "sepenuhnya kompatibel dengan browser".p.innerText = html; return p.innerHTML
Coba Underscore.string lib, ini berfungsi dengan jQuery.
keluaran:
sumber
_.escape()
fungsi utilitas.Saya telah meningkatkan contoh mustache.js menambahkan
escapeHTML()
metode ke objek string.Dengan begitu cukup mudah digunakan
"Some <text>, more Text&Text".escapeHTML()
sumber
__entityMap
ke fungsi lingkup lokal. Dan membungkus semua ini menjadiif (typeof String.prototype.escapeHTML !== 'function'){...}
escape()
danunescape()
dimaksudkan untuk menyandikan / mendekodekan string untuk URL, bukan HTML.Sebenarnya, saya menggunakan cuplikan berikut untuk melakukan trik yang tidak memerlukan kerangka apa pun:
sumber
"
s maka Anda harus menambahkan setidaknya'
dan `` ke medan. Itu hanya benar-benar diperlukan untuk data tag string di dalam elemen dalam html. Untuk data html itu sendiri (tag luar) hanya 3 yang pertama diperlukan.Jika Anda memiliki underscore.js, gunakan
_.escape
(lebih efisien daripada metode jQuery yang diposting di atas):sumber
Jika Anda menggunakan rute regex, ada kesalahan dalam contoh tghw di atas.
sumber
Ini adalah contoh aman yang bagus ...
sumber
Anda dapat dengan mudah melakukannya dengan vanilla js.
Cukup tambahkan simpul teks pada dokumen. Itu akan lolos oleh browser.
sumber
Tidak ada variabel global, beberapa optimasi memori. Pemakaian:
hasilnya adalah:
sumber
2 metode sederhana yang tidak memerlukan JQUERY ...
Anda dapat menyandikan semua karakter di string Anda seperti ini:
Atau hanya menargetkan karakter utama perlu khawatir
&
, jeda baris,<
,>
,"
dan'
seperti:sumber
Contoh JavaScript polos yang lolos:
sumber
sumber
bekerja seperti pesona
sumber
Jawaban ini memberikan metode jQuery dan JS normal, tapi ini yang terpendek tanpa menggunakan DOM:
String yang lolos:
It%27s%20%3E%2020%25%20less%20complicated%20this%20way.
Jika ruang yang terlepas mengganggu Anda, cobalah:
String yang lolos:
It%27s %3E 20%25 less complicated this way.
Sayangnya,
escape()
fungsi tersebut tidak digunakan lagi dalam JavaScript versi 1.5 .encodeURI()
atauencodeURIComponent()
alternatif, tetapi mereka abaikan'
, sehingga baris kode terakhir akan berubah menjadi ini:Semua browser utama masih mendukung kode pendek, dan mengingat jumlah situs web lama, saya ragu itu akan segera berubah.
sumber
ES6 satu liner untuk solusi dari mustache.js
sumber
Jika Anda menyimpan informasi ini dalam database , itu salah untuk melarikan diri HTML menggunakan skrip sisi klien , ini harus dilakukan di server . Kalau tidak mudah untuk memotong perlindungan XSS Anda.
Untuk memperjelas poin saya, berikut adalah contoh menggunakan salah satu jawaban:
Katakanlah Anda menggunakan fungsi escapeHtml untuk menghindari Html dari komentar di blog Anda dan kemudian mempostingnya ke server Anda.
Pengguna bisa:
Jika pengguna menempelkan snippet ini di konsol, ia akan mem-bypass validasi XSS:
sumber
Semua solusi tidak berguna jika Anda tidak mencegah melarikan diri kembali, mis. Sebagian besar solusi akan terus melarikan diri
&
ke&
.sumber