الثقة جيدة، لكنّ المراقبة أفضل: الإصدار 2 من Intersection Observer

Thomas Steiner

Intersection Observer هي إحدى واجهات برمجة التطبيقات التي تحظى بشعبية كبيرة، ويمكن استخدامها في جميع المتصفّحات الرئيسية. استخدم المطوّرون واجهة برمجة التطبيقات هذه في مجموعة كبيرة من حالات الاستخدام، بما في ذلك التحميل الكسول للصور والفيديوهات وإرسال الإشعارات عندما تصل العناصر إلى position: sticky وتشغيل أحداث التحليلات وغير ذلك الكثير.

في أبسط أشكاله، يبدو الإصدار 1 من واجهة برمجة التطبيقات Intersection Observer على النحو التالي:

const onIntersection = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry);
    }
  }
};

const observer = new IntersectionObserver(onIntersection);
observer.observe(document.querySelector('#some-target'));

مشاكل في مستوى الظهور في الإصدار الأول من Intersection Observer

باستخدام واجهة برمجة التطبيقات Intersection Observer الإصدار 1، يمكنك معرفة الوقت الذي يتم فيه الانتقال إلى عنصر في إطار العرض الخاص بالنافذة. ومع ذلك، لا يمكنك تحديد ما إذا كان هذا العنصر محجوبًا بمحتوى آخر على الصفحة، وهو ما يُعرف باسم الحجب، أو ما إذا كان العنصر يظهر معدَّلاً بواسطة CSS، مثل transform أو opacity أو filter، ما قد يؤدي إلى إخفاء العنصر.

بالنسبة إلى عنصر في المستند ذي المستوى الأعلى، يمكن تحديد هذه المعلومات من خلال تحليل نموذج DOM باستخدام JavaScript، مثلاً باستخدام DocumentOrShadowRoot.elementFromPoint(). في المقابل، لا يمكن الحصول على المعلومات نفسها إذا كان العنصر المعنيّ مضمّنًا في إطار iframe تابع لجهة خارجية.

ما أهمية مستوى الظهور؟

للأسف، هناك جهات مسيئة على الإنترنت. على سبيل المثال، قد يستخدم ناشر غير نزيه إعلانات الدفع لكل نقرة على موقع إلكتروني. وقد يخدعون المستخدمين للنقر على هذه الإعلانات من أجل كسب المزيد من المال، على الأقل إلى أن تكتشف شبكة الإعلانات مخططهم. عادةً ما يتم عرض هذه الإعلانات في إطارات iframe.

ولخداع المستخدمين، يمكن للناشر أن يجعل إطارات iframe للإعلانات شفافة تمامًا باستخدام CSS: iframe { opacity: 0; }. بعد ذلك، يمكنهم وضع إطارات iframe شفافة فوق محتوى جذاب، مثل فيديو لقطة لطيفة، يريد المستخدمون النقر عليه. يُعرف هذا باسم الاستيلاء على النقرات.

يمكنك الاطّلاع على مثال على هجوم clickjacking في القسم العلوي من العرض التوضيحي. جرِّب "مشاهدة" فيديو القطط وتفعيل وضع الخداع. يسجّل الإعلان في إطار iframe النقرات على أنّها مشروعة، حتى إذا نقرت عليه (بدون قصد) عندما كان إطار iframe شفافًا.

تحسينات في الإصدار 2 من Intersection Observer

يمكن للإصدار 2 من Intersection Observer تتبُّع "مدى ظهور" عنصر معيّن كما يحدّده الإنسان. إذا ضبطت خيارًا في الدالة الإنشائية IntersectionObserver، ستتضمّن مثيلات IntersectionObserverEntry الناتجة حقل قيمة منطقية جديدًا باسم isVisible. عندما تكون قيمة isVisible هي true، يتأكّد المتصفّح من أنّ العنصر غير محجوب تمامًا بأي محتوى آخر، ولا يتضمّن أي تأثيرات مرئية تخفي عرضه أو تغيّره. إذا كانت قيمة isVisible هي false، لا يمكن للمتصفّح تقديم هذا الضمان.

تسمح المواصفات بالنتائج السلبية الخاطئة: يمكن أن تكون قيمة isVisible هي false حتى عندما يكون العنصر مرئيًا بالفعل ولم يتغيّر. لتحسين الأداء، تستخدم المتصفحات عمليات حسابية أبسط، مثل المربعات المحيطة والأشكال المستطيلة، ولا تتحقّق من كل بكسل بحثًا عن تفاصيل معقّدة مثل border-radius.

ومع ذلك، لا يُسمح بالنتائج الموجبة الخاطئة في أي حال من الأحوال. وهذا يعني أنّ isVisible لن يكون true إذا لم يكن العنصر مرئيًا بالكامل ولم يتم تعديله.

تطبيق هذه التغييرات

تتلقّى الدالة الإنشائية IntersectionObserver الآن سمتَين إضافيتَين للإعدادات:

• ‫delay هو رقم يشير إلى الحد الأدنى للتأخير بالمللي ثانية بين الإشعارات الواردة من أداة المراقبة، وذلك لهدف معيّن.
• ‫trackVisibility هي قيمة منطقية تشير إلى ما إذا كان المراقب سيتتبّع التغييرات في إذن الدخول إلى عنصر مستهدف.

عندما تكون قيمة trackVisibility هي true، يجب ضبط قيمة delay على 100 أو قيمة أعلى (أي ما لا يزيد عن إشعار واحد كل 100 ملي ثانية). بما أنّ احتساب مستوى الظهور مكلف، فإنّ هذا الإجراء احترازي لتجنُّب انخفاض الأداء واستهلاك البطارية. على المطوّرين المسؤولين استخدام أكبر قيمة يمكن تحمّلها للتأخير.

تحدّد المواصفات مستوى الظهور. كما هو الحال مع الإصدار 1، عندما تكون قيمة السمة trackVisibility الخاصة بالكائن المراقب هي false، يُعتبر العنصر المستهدف مرئيًا.

في الإصدار 2، يُعتبَر العنصر المستهدَف غير مرئي في الحالات التالية:

• تتضمّن مصفوفة تحويل فعّالة، بخلاف الترجمة الثنائية الأبعاد أو زيادة الحجم الثنائية الأبعاد المتناسبة.

• يجب أن يكون الهدف أو أي عنصر في سلسلة الحظر التي يتضمّنها ذا عتامة فعّالة أقل من 1.0.

• يتم تطبيق أي فلاتر على العنصر المستهدف أو أي عنصر في سلسلة الحظر التي يتضمّنها.

• إذا لم تتمكّن عملية التنفيذ من ضمان عدم حجب الهدف بالكامل عن طريق محتوى آخر على الصفحة

وهذا يعني أنّ عمليات التنفيذ الحالية متحفظة إلى حد كبير في ضمان الظهور. على سبيل المثال، سيؤدي تطبيق فلتر تدرّج الرمادي غير الملحوظ تقريبًا (filter: grayscale(0.01%)) أو ضبط مستوى الشفافية على أدنى قيمة (opacity: 0.99) إلى إخفاء العنصر.

في ما يلي نموذج رمز برمجي يوضّح ميزات واجهة برمجة التطبيقات الجديدة. يمكنك الاطّلاع على منطق تتبُّع النقرات أثناء عمله في القسم الثاني من العرض التوضيحي. جرِّب "مشاهدة" فيديو الجرو. فعِّل وضع الخداع لتحويل نفسك إلى مستخدم سيئ ومعرفة كيف يمنع الإصدار 2 من Intersection Observer تتبُّع النقرات غير المشروعة على الإعلانات. توفر لنا Intersection Observer الإصدار 2 الحماية.

<!DOCTYPE html>
<!-- This is the ad running in the iframe -->
<button id="callToActionButton">Buy now!</button>

// This is code running in the iframe.

// The iframe must be visible for at least 800ms prior to an input event
// for the input event to be considered valid.
const minimumVisibleDuration = 800;

// Keep track of when the button transitioned to a visible state.
let visibleSince = 0;

const button = document.querySelector('#callToActionButton');
button.addEventListener('click', (event) => {
  if ((visibleSince > 0) &&
      (performance.now() - visibleSince >= minimumVisibleDuration)) {
    trackAdClick();
  } else {
    rejectAdClick();
  }
});

const observer = new IntersectionObserver((changes) => {
  for (const change of changes) {
    // ⚠️ Feature detection
    if (typeof change.isVisible === 'undefined') {
      // The browser doesn't support v2, fallback to v1 behavior.
      change.isVisible = true;
    }
    if (change.isIntersecting && change.isVisible) {
      visibleSince = change.time;
    } else {
      visibleSince = 0;
    }
  }
}, {
  threshold: [1.0],
  // 🆕 Track the actual visibility of the element
  trackVisibility: true,
  // 🆕 Set a minimum delay between notifications
  delay: 100
}));

// Require that the entire iframe be visible.
observer.observe(document.querySelector('#ad'));

مراجع إضافية

• مسودة Intersection Observer
• ‫Intersection Observer الإصدار 2 على حالة النظام الأساسي Chrome

الإقرارات

نشكر سيميون فنسنت ويواف فايس وماثياس بينينز على مراجعتهم، بالإضافة إلى ستيفان زاغر على مراجعته وتنفيذ الميزة في Chrome.