دليل لتفعيل ميزة حظر الوصول من نطاقات أخرى

من خلال ميزة "عزل البيانات المشتركة"، يمكن لصفحة الويب استخدام ميزات فعّالة مثل SharedArrayBuffer. توضّح هذه المقالة كيفية تفعيل ميزة "العزل المشترك من مصادر متعددة" على موقعك الإلكتروني.

يوضّح لك هذا الدليل كيفية تفعيل ميزة حظر الوصول من نطاقات أخرى. يجب تطبيق الحظر من مصادر متعددة إذا كنت تريد استخدام SharedArrayBuffer أو performance.measureUserAgentSpecificMemory() أو موقّت عالي الدقة بدقة أفضل.

إذا كنت تنوي تفعيل ميزة حظر المحتوى من نطاقات أخرى، عليك تقييم تأثير ذلك في الموارد الأخرى المشتركة المصدر على موقعك الإلكتروني، مثل مواضع الإعلانات.

تحديد مواضع استخدام "SharedArrayBuffer" في موقعك الإلكتروني
بدءًا من إصدار Chrome 92، لن تعمل الوظائف التي تستخدم SharedArrayBuffer بدون حظر الوصول من نطاقات أخرى. إذا وصلت إلى هذه الصفحة بعد أن ظهرت لك رسالة تشير إلى إيقاف ميزة SharedArrayBuffer، من المحتمل أن يكون موقعك الإلكتروني أو أحد الموارد المضمَّنة فيها يستخدم SharedArrayBuffer. لضمان عدم حدوث أي أعطال في موقعك الإلكتروني بسبب الإيقاف النهائي، ابدأ بتحديد مكان استخدامه.

إذا لم تكن متأكدًا من الموضع الذي يتم فيه استخدام علامة SharedArrayBuffer في موقعك الإلكتروني، هناك طريقتان لمعرفة ذلك:

  • استخدام "أدوات مطوري البرامج في Chrome"
  • (إعدادات متقدمة) استخدام إعداد تقارير الإيقاف النهائي

إذا كنت تعرف موقع استخدام SharedArrayBuffer، يمكنك التخطّي إلى تحليل تأثير حظر الوصول من نطاقات أخرى.

استخدام "أدوات مطوري البرامج في Chrome"

تتيح أدوات مطوري البرامج في Chrome للمطوّرين فحص المواقع الإلكترونية.

  1. افتح "أدوات مطوري البرامج في Chrome" على الصفحة التي تشكّ في أنّها تستخدم SharedArrayBuffer.
  2. اختَر لوحة Console (وحدة التحكم).
  3. إذا كانت الصفحة تستخدم SharedArrayBuffer، ستظهر الرسالة التالية:
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
    
  4. يشير اسم الملف ورقم السطر في نهاية الرسالة (على سبيل المثال، common-bundle.js:535) إلى مصدر SharedArrayBuffer. إذا كانت مكتبة تابعة لجهة خارجية، تواصَل مع المطوّر لحلّ المشكلة. وإذا تم تنفيذ ذلك كجزء من موقعك الإلكتروني، اتّبِع الدليل أدناه لتفعيل ميزة عزل المحتوى من نطاقات أخرى.
تحذير DevToools Console عند استخدام SharedArrayBuffer بدون حظر الوصول من نطاقات أخرى
تحذير في DevToools Console عند استخدام SharedArrayBuffer بدون حظر الوصول من نطاقات أخرى.

(إعدادات متقدمة) استخدام إعداد تقارير الإيقاف النهائي

تحتوي بعض المتصفّحات على وظيفة الإبلاغ عن إيقاف واجهات برمجة التطبيقات نهائيًا في نقطة نهاية محدّدة.

  1. يمكنك إعداد خادم تقرير الإيقاف والحصول على عنوان URL لإعداد التقارير. يمكنك تحقيق ذلك إما من خلال الاستعانة بخدمة عامة أو إنشاء خدمة بنفسك.
  2. باستخدام عنوان URL، اضبط عنوان HTTP التالي على الصفحات التي يُحتمل أن تعرض الخطأ SharedArrayBuffer.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
    
  3. بعد بدء نشر العنوان، يجب أن تبدأ نقطة النهاية التي سجّلت فيها في جمع تقارير الإيقاف النهائي.

يمكنك الاطّلاع على مثال لتنفيذ هذا الإجراء على الرابط التالي: https://cross-origin-isolation.glitch.me.

تحليل تأثير حظر الوصول من نطاقات أخرى

ألن يكون من الرائع أن تتمكن من تقييم التأثير الذي سيحدثه تفعيل "العزل المشترك المصدر" على موقعك الإلكتروني بدون إيقاف أي شيء فعليًا؟ تتيح لك عناوين HTTP Cross-Origin-Opener-Policy-Report-Only وCross-Origin-Embedder-Policy-Report-Only إجراء ذلك.

  1. اضبط Cross-Origin-Opener-Policy-Report-Only: same-origin على مستند المستوى الأعلى. وكما يشير الاسم، لا يرسل هذا العنوان سوى تقارير حول التأثير الذي سيحدثه COOP: same-origin على موقعك الإلكتروني، ولن يؤدي إلى إيقاف الاتصال من خلال النوافذ المنبثقة.
  2. يمكنك إعداد التقارير وإعداد خادم ويب لتلقّي التقارير وحفظها.
  3. اضبط Cross-Origin-Embedder-Policy-Report-Only: require-corp على مستند المستوى الأعلى. يتيح لك هذا العنوان معرفة تأثير تفعيل COEP: require-corp بدون التأثير في أداء موقعك الإلكتروني حتى الآن. يمكنك ضبط هذا العنوان لإرسال التقارير إلى خادم إعداد التقارير نفسه الذي أعددته في الخطوة السابقة.

الحدّ من تأثير حظر الوصول من نطاقات أخرى

بعد تحديد الموارد التي ستتأثر بالعزل المشترك المصدر، في ما يلي إرشادات عامة حول كيفية تفعيل هذه الموارد من مصادر متعددة المصادر:

  1. في الموارد المشتركة المصدر، مثل الصور والنصوص البرمجية وأوراق الأنماط وإطارات iframe وغيرها، اضبط عنوان Cross-Origin-Resource-Policy: cross-origin. في موارد الموقع الإلكتروني نفسه، اضبط عنوان Cross-Origin-Resource-Policy: same-site.
  2. بالنسبة إلى الموارد القابلة للتحميل باستخدام CORS، تأكَّد من تفعيلها من خلال ضبط السمة crossorigin في علامة HTML الخاصة بها (على سبيل المثال، <img src="example.jpg" crossorigin>). وبالنسبة إلى طلب استرجاع JavaScript، تأكَّد من ضبط request.mode على cors.
  3. إذا كنت تريد استخدام ميزات فعّالة مثل SharedArrayBuffer داخل إطار iframe مُحمَّل، عليك إلحاق allow="cross-origin-isolated" بالحقل <iframe>.
  4. إذا كانت الموارد من مصادر متعددة التي تم تحميلها في إطارات iframe أو النصوص البرمجية للموظفين تتضمن طبقة أخرى من إطارات iframe أو النصوص البرمجية للموظفين، طبِّق الخطوات الموضّحة في هذا القسم بشكلٍ متكرر قبل المضي قدمًا.
  5. بعد التأكّد من تفعيل الميزة في جميع الموارد من مصادر متعددة، اضبط العنوان Cross-Origin-Embedder-Policy: require-corp على إطارات iframe والنصوص البرمجية للموظفين (خطوة مطلوبة بغض النظر عن المصدر نفسه أو من مصادر متعددة).
  6. تأكَّد من عدم ظهور نوافذ منبثقة من مصادر متعددة تتطلب التواصل من خلال postMessage(). ولا توجد طريقة للحفاظ على عملها عند تفعيل العزل المشترك المصدر. يمكنك نقل الاتصال إلى وثيقة أخرى غير معزولة من مصادر متعددة، أو استخدام طريقة اتصال مختلفة (مثل طلبات HTTP).

تفعيل حظر الوصول من نطاقات أخرى

بعد الحدّ من تأثير هذا الحظر من خلال حظر الوصول من نطاقات أخرى، في ما يلي بعض الإرشادات العامة لتفعيل العزلة من مصادر متعددة:

  1. اضبط عنوان Cross-Origin-Opener-Policy: same-origin في مستند المستوى الأعلى. وإذا كنت قد ضبطت Cross-Origin-Opener-Policy-Report-Only: same-origin، استبدِله. سيؤدي هذا إلى حظر الاتصال بين مستند المستوى الأعلى ونوافذه المنبثقة.
  2. اضبط عنوان Cross-Origin-Embedder-Policy: require-corp في مستند المستوى الأعلى. وإذا كنت قد ضبطت Cross-Origin-Embedder-Policy-Report-Only: require-corp، استبدِله. سيؤدي ذلك إلى حظر تحميل الموارد المتعدّدة المصادر التي لم يتم تفعيلها.
  3. تحقَّق من أنّ self.crossOriginIsolated يعرض الخطأ true في وحدة التحكّم للتأكّد من أنّ صفحتك تحظر الوصول من نطاقات آخرى.

المراجِع