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

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

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

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

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

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

إذا كنت تعرف الأماكن التي تستخدم فيها SharedArrayBuffer، انتقِل إلى تحليل تأثير عزل مصادر البيانات.

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

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

  1. افتح "أدوات مطوري البرامج في Chrome" على الصفحة التي تعتقد أنّها تستخدم SharedArrayBuffer.
  2. اختَر لوحة وحدة التحكّم.
  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. إذا كانت المكتبة تابعة لجهة خارجية، يمكنك التواصل مع المطوّر لحلّ المشكلة. إذا تم تنفيذه كجزء من موقعك الإلكتروني، اتّبِع الدليل أدناه لتفعيل ميزة العزل بين مصادر البيانات.
تحذير في DevTools 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 أو نصوص worker scripts تتضمّن طبقة أخرى من إطارات iframe أو نصوص worker scripts، يجب تطبيق الخطوات الموضّحة في هذا القسم بشكل متكرّر قبل المتابعة.
  5. بعد التأكّد من تفعيل جميع الموارد من مصادر مختلفة، اضبط العنوان Cross-Origin-Embedder-Policy: require-corp على إطارات iframe وملفَّات worker script (هذا مطلوب بغض النظر عمّا إذا كانت الموارد من مصدر مماثل أو مصدر مختلف).
  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 في وحدة التحكّم للتأكّد مما يلي: أنّ صفحتك معزولة عن مصادر أخرى.

الموارد