Bagaimanakah Anda Menyahlepaskan Entiti HTML dengan Selamat dalam JavaScript dan Mengelakkan Kerentanan XSS?

Entiti HTML yang Tidak Terhindar dalam JavaScript: Panduan Komprehensif dengan Pertimbangan Keselamatan

Dalam bidang pembangunan web, berurusan dengan entiti HTML kadangkala boleh menimbulkan cabaran. Mari kita pertimbangkan senario di mana komunikasi bahagian belakang XML-RPC menghasilkan respons rentetan seperti "". Walau bagaimanapun, memasukkan rentetan ini ke dalam HTML melalui JavaScript menghasilkan hasil literal, menjadikan imej yang diingini sebagai rentetan teks.

Untuk menangani isu ini, entiti HTML yang tidak dapat melarikan diri menjadi penting. Walau bagaimanapun, berhati-hati mesti dilakukan semasa menjalankan tugas ini. Teknik yang melibatkan hanya menggantikan entiti HTML dengan aksara yang sepadan, seperti yang disebut pada paulschreiber.com, secara tidak sengaja boleh mencipta kelemahan Skrip Silang Tapak (XSS).

Sebagai contoh, pertimbangkan rentetan: "

Rentetan ini membawa teg HTML yang tidak dapat dilepaskan daripada menyahkod rentetan, ia akan melaksanakan kod JavaScript dalam rentetan, yang membawa kepada hasil yang berpotensi berniat jahat.

Untuk mengelakkan kerentanan sedemikian, penggunaan DOMParser disyorkan. . Disokong oleh penyemak imbas moden, DOMParser membolehkan unescaping selamat dengan memanfaatkan keupayaan DOM untuk mengendalikan penghuraian dan pengekstrakan HTML:

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(htmlDecode("<img src='myimage.jpg'>")) // "<img src='myimage.jpg'>"

console.log(htmlDecode("<img src='dummy' onerror='alert(/xss/)'>")) // ""

Dalam kod yang disediakan:

• input mewakili rentetan HTML untuk dinyahkodkan.
• doc ialah objek dokumen DOM yang diperoleh dengan menghuraikan rentetan input.
• doc.documentElement.textContent mengekstrak kandungan teks yang tidak dilepaskan daripada dokumen DOM, dengan berkesan mengalih keluar entiti HTML.

Menggunakan DOMParser memastikan entiti HTML yang tidak dapat dilepaskan dipaparkan sebagai teks, menghalang pelaksanaan kod hasad dan melindungi daripada serangan XSS. Adalah bijak untuk menggunakan teknik ini setiap kali berurusan dengan rentetan HTML yang tidak dipercayai.

Atas ialah kandungan terperinci Bagaimanakah Anda Menyahlepaskan Entiti HTML dengan Selamat dalam JavaScript dan Mengelakkan Kerentanan XSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!