บล็อกของ Blank: http://www.planabc.net/
การใช้แอตทริบิวต์ InnerHTML เป็นที่นิยมมากเพราะเป็นวิธีง่ายๆในการแทนที่เนื้อหาขององค์ประกอบ HTML อย่างสมบูรณ์ อีกวิธีหนึ่งคือการใช้ API DOM ระดับ 2 (RemoveChild, CreateElement, AppendChild) แต่เห็นได้ชัดว่าการใช้ InnerHTML เพื่อปรับเปลี่ยนต้นไม้ DOM เป็นวิธีที่ง่ายและมีประสิทธิภาพ อย่างไรก็ตามคุณจำเป็นต้องรู้ว่า InnerHTML มีปัญหาบางอย่างกับตัวเอง:
มีข้อเสียเล็กน้อยอื่น ๆ อีกหลายประการซึ่งคุ้มค่าที่จะกล่าวถึง:
ฉันกังวลมากขึ้นเกี่ยวกับปัญหาด้านความปลอดภัยและหน่วยความจำที่เกี่ยวข้องกับการใช้คุณสมบัติ InnerHTML เห็นได้ชัดว่านี่ไม่ใช่ปัญหาใหม่และมีคนที่มีวิธีแก้ไขปัญหาเหล่านี้อยู่แล้ว
Douglas Crockford เขียนฟังก์ชั่นการทำความสะอาดที่ยกเลิกการอ้างอิงลูปบางอย่างที่เกิดจากฟังก์ชั่นการจัดการเหตุการณ์การลงทะเบียนองค์ประกอบ HTML และช่วยให้นักสะสมขยะสามารถใช้หน่วยความจำฟรีที่เกี่ยวข้องกับองค์ประกอบ HTML เหล่านี้
การลบแท็กสคริปต์จากสตริง HTML ไม่ใช่เรื่องง่ายอย่างที่คิด การแสดงออกอย่างสม่ำเสมอสามารถบรรลุผลที่ต้องการแม้ว่าจะยากที่จะรู้ว่ามีความเป็นไปได้ทั้งหมดหรือไม่ นี่คือทางออกของฉัน:
/<script [^>]*> [/s/s]*? <// script [^>]*>/ig
ตอนนี้เรามารวมสองเทคนิคเข้ากับฟังก์ชัน setinnerhtml แยกต่างหากและผูกฟังก์ชัน setinnerhtml กับ yahoo.util.dom ใน yui:
yahoo.util.dom.setinnerhtml = function (el, html) {
El = yahoo.util.dom.get (el);
if (! el || typeof html! == 'string') {
คืนค่า null;
-
// ยกเลิกการอ้างอิงแบบวงกลม
(ฟังก์ชั่น (o) {
var a = o.attributes, i, l, n, c;
ถ้า (a) {
l = A.length;
สำหรับ (i = 0; i <l; i = 1) {
n = a [i] .name;
if (typeof o [n] === 'function') {
o [n] = null;
-
-
-
a = o.childnodes;
ถ้า (a) {
l = A.length;
สำหรับ (i = 0; i <l; i = 1) {
c = o.childnodes [i];
// โหนดเด็กใส
อาร์กิวเมนต์ callee (c);
// ลบผู้ฟังทั้งหมดที่ลงทะเบียนด้วยองค์ประกอบผ่าน addListener ของ Yui
yahoo.util.event.purgeelement (c);
-
-
}) (el);
// ลบสคริปต์จากสตริง HTML และตั้งค่าคุณสมบัติ innerHtml
el.innerhtml = html.replace (/<script [^>]*> [/s/s]*? <// script [^>]*>/ig,);
// ส่งคืนการอ้างอิงไปยังโหนดลูกแรก
กลับ El.firstchild;
-
หากฟังก์ชั่นนี้ควรมีสิ่งอื่นหรือสิ่งที่ขาดหายไปใน regex โปรดแจ้งให้เราทราบ
เห็นได้ชัดว่ามีวิธีอื่น ๆ อีกมากมายในการฉีดรหัสที่เป็นอันตรายบนหน้าเว็บ ฟังก์ชั่น setinnerhtml สามารถทำให้พฤติกรรมการดำเนินการของแท็ก <Script> เป็นปกติบนเบราว์เซอร์ A เกรดทั้งหมดเท่านั้น หากคุณพร้อมที่จะฉีดรหัส HTML ที่คุณไม่สามารถไว้วางใจได้อย่าลืมกรองทางฝั่งเซิร์ฟเวอร์ก่อนและมีไลบรารีมากมายที่สามารถทำได้
ข้อความต้นฉบับ: Julien Lecomte "ปัญหากับ InnerHtml"