แอปพลิเคชัน innerhtml

บล็อกของ Blank: http://www.planabc.net/

การใช้แอตทริบิวต์ InnerHTML เป็นที่นิยมมากเพราะเป็นวิธีง่ายๆในการแทนที่เนื้อหาขององค์ประกอบ HTML อย่างสมบูรณ์ อีกวิธีหนึ่งคือการใช้ API DOM ระดับ 2 (RemoveChild, CreateElement, AppendChild) แต่เห็นได้ชัดว่าการใช้ InnerHTML เพื่อปรับเปลี่ยนต้นไม้ DOM เป็นวิธีที่ง่ายและมีประสิทธิภาพ อย่างไรก็ตามคุณจำเป็นต้องรู้ว่า InnerHTML มีปัญหาบางอย่างกับตัวเอง:

เมื่อสตริง HTML มีแท็กสคริปต์ (<Script Defer> … </script>) ทำเครื่องหมายว่าเป็นการเลื่อนเวลาหากคุณสมบัติ InnerHTML ได้รับการจัดการอย่างไม่เหมาะสมการโจมตีแบบฉีดสคริปต์จะเกิดขึ้นใน Internet Explorer การตั้งค่า InnerHTML จะทำลายองค์ประกอบ HTML ที่มีอยู่ซึ่งมีตัวจัดการเหตุการณ์ที่ลงทะเบียนซึ่งอาจทำให้เกิดการรั่วไหลของหน่วยความจำที่อาจเกิดขึ้นกับเบราว์เซอร์บางตัว

มีข้อเสียเล็กน้อยอื่น ๆ อีกหลายประการซึ่งคุ้มค่าที่จะกล่าวถึง:

คุณไม่สามารถรับการอ้างอิงถึงองค์ประกอบที่คุณเพิ่งสร้างได้คุณต้องเพิ่มรหัสด้วยตนเองเพื่อรับการอ้างอิงเหล่านั้น (โดยใช้ DOM APIs) คุณไม่สามารถตั้งค่าแอตทริบิวต์ InnerHTML ในองค์ประกอบ HTML ทั้งหมดในเบราว์เซอร์ทั้งหมด (ตัวอย่างเช่น Internet Explorer ไม่อนุญาตให้คุณตั้งค่าแอตทริบิวต์ 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"