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

يتيح حظر الوصول من نطاقات أخرى لصفحة الويب استخدام ميزات فعّالة، مثل 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. إذا كانت المكتبة تابعة لجهة خارجية، يمكنك التواصل مع المطوّر لحلّ المشكلة. إذا تم تنفيذه كجزء من موقعك الإلكتروني، اتّبِع الدليل أدناه لتفعيل ميزة العزل بين مصادر البيانات.
تحذير في وحدة تحكّم DevToools عند استخدام SharedArrayBuffer بدون حظر الوصول من نطاقات أخرى
تحذير في وحدة تحكُّم DevToools عند استخدام 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 وملفَّات 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 في وحدة التحكم للتحقق من أن صفحتك معزولة من عدة مصادر.

الموارد