تطبيق innerhtml

مدونة Blank: http://www.planabc.net/

إن استخدام سمات innerhtml شائعة جدًا لأنه يوفر طريقة بسيطة لاستبدال محتوى عنصر HTML تمامًا. طريقة أخرى هي استخدام واجهة برمجة تطبيقات DOM Level 2 (RemoveChild ، CreateElement ، AppendChild). ولكن من الواضح أن استخدام InnerHTML لتعديل شجرة DOM هو وسيلة سهلة وفعالة للغاية. ومع ذلك ، تحتاج إلى معرفة أن InnerHTML لديه بعض المشاكل معها:

عندما تحتوي سلسلة HTML على علامة نصية (<script defer> ... </script>) تم وضع علامة عليها على أنها تأجيل ، إذا تم التعامل مع خاصية InnerHTML بشكل غير صحيح ، فسيتم سبب هجوم حقن البرنامج النصي على Internet Explorer. سيؤدي تحديد InnerHTML إلى تدمير عناصر HTML الحالية التي لديها معالجات الأحداث المسجلة ، والتي يمكن أن تسبب تسرب الذاكرة المحتملة على بعض المتصفحات.

هناك العديد من العيوب البسيطة الأخرى ، والتي تجدر الإشارة إليها:

لا يمكنك الحصول على إشارات إلى العناصر التي قمت بإنشائها للتو ، فأنت بحاجة إلى إضافة الكود يدويًا للحصول على هذه المراجع (باستخدام APIs DOM). لا يمكنك تعيين سمات 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') {

العودة لاغية.

}

// إحباط مرجع دائري

(وظيفة (س) {

var a = o.attributes ، i ، l ، n ، c ؛

إذا (أ) {

L = A.Length ؛

لـ (i = 0 ؛ i <l ؛ i = 1) {

n = a [i] .name ؛

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

o [n] = null ؛

}

}

}

a = o.childnodes ؛

إذا (أ) {

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's "The Problem with Innerhtml"