Aplikasi InnerHTML

Blog Blank: http://www.planabc.net/

Penggunaan atribut innerHTML sangat populer karena memberikan cara sederhana untuk sepenuhnya menggantikan konten elemen HTML. Metode lain adalah menggunakan API DOM Level 2 (Removechild, CreateElement, AppendChild). Tetapi jelas bahwa menggunakan innerHTML untuk memodifikasi pohon DOM adalah cara yang sangat mudah dan efektif. Namun, Anda perlu tahu bahwa binthtml memiliki beberapa masalah dengan itu sendiri:

Ketika string HTML berisi tag skrip (<script Disper> ... </script>) yang ditandai sebagai penundaan, jika properti bagian dalam ditangani dengan tidak benar, serangan injeksi skrip akan disebabkan pada penjelajah internet. Mengatur innerHTML akan menghancurkan elemen HTML yang ada yang memiliki penangan acara terdaftar, yang dapat menyebabkan kebocoran memori potensial pada beberapa browser.

Ada beberapa kerugian kecil lainnya, yang patut disebutkan:

Anda tidak bisa mendapatkan referensi ke elemen yang baru saja Anda buat, Anda perlu menambahkan kode secara manual untuk mendapatkan referensi tersebut (menggunakan DOM API). Anda tidak dapat mengatur atribut InnerHTML pada semua elemen HTML di semua browser (misalnya, Internet Explorer tidak memungkinkan Anda untuk mengatur atribut InnerHTML pada elemen baris tabel).

Saya lebih peduli dengan masalah keamanan dan memori terkait dengan penggunaan properti InnerHTML. Jelas, ini bukan masalah baru, dan sudah ada orang yang telah menemukan cara -cara di sekitar beberapa masalah ini.

Douglas Crockford menulis fungsi pembersihan yang membatalkan beberapa referensi loop yang disebabkan oleh fungsi penanganan acara pendaftaran elemen HTML dan memungkinkan pengumpul sampah untuk membebaskan memori yang terkait dengan elemen HTML ini.

Menghapus tag skrip dari string HTML tidak semudah kelihatannya. Ekspresi reguler dapat mencapai efek yang diinginkan, meskipun sulit untuk mengetahui apakah semua kemungkinan tercakup. Inilah solusi saya:

/<skrip [^>]*> [/s/s]*? <// skrip [^>]*>/ig

Sekarang, mari kita gabungkan kedua teknik menjadi fungsi setinnerhtml terpisah dan ikat fungsi setinnerhtml ke yahoo.util.dom di yui:

Yahoo.util.dom.setinnerHtml = function (el, html) {

el = yahoo.util.dom.get (el);

if (! el || typeof html! == 'string') {

kembali nol;

}

// Batalkan referensi melingkar

(function (o) {

var a = o.attributes, i, l, n, c;

if (a) {

l = a.length;

untuk (i = 0; i <l; i = 1) {

n = a [i] .name;

if (typeof o [n] === 'function') {

o [n] = null;

}

}

}

A = O.Childnodes;

if (a) {

l = a.length;

untuk (i = 0; i <l; i = 1) {

C = O.Childnodes [i];

// Bersihkan node anak

argumen.callee (c);

// Hapus semua pendengar terdaftar dengan elemen melalui addlistener yui

Yahoo.util.event.purgeelement (c);

}

}

}) (el);

// Hapus skrip dari string html dan atur properti bagian dalam

el.innerHtml = html.replace (/<skrip [^>]*> [/s/s]*? <// skrip [^>]*>/ig,);

// Kembalikan referensi ke node anak pertama

mengembalikan el.firstchild;

};

Jika fungsi ini harus memiliki hal lain atau sesuatu yang hilang di regex, beri tahu saya.

Jelas, ada banyak cara lain untuk menyuntikkan kode berbahaya di halaman web. Fungsi SetinnerHTML hanya dapat menormalkan perilaku eksekusi tag <script> pada semua browser A-grade. Jika Anda siap untuk menyuntikkan kode HTML yang tidak dapat Anda percayai, pastikan untuk memfilter di sisi server terlebih dahulu, dan sudah ada banyak perpustakaan yang dapat melakukan ini.

Teks Asli: "Masalah dengan InnerHTML" Julien Lecomte "