من خلال ميزة "عزل البيانات المشتركة"، يمكن لصفحة الويب استخدام ميزات فعّالة مثل SharedArrayBuffer. توضّح هذه المقالة كيفية تفعيل ميزة "العزل المشترك من مصادر متعددة" على موقعك الإلكتروني.
يوضّح لك هذا الدليل كيفية تفعيل ميزة حظر الوصول من نطاقات أخرى. يجب تطبيق الحظر من مصادر متعددة إذا كنت تريد استخدام SharedArrayBuffer
أو performance.measureUserAgentSpecificMemory()
أو موقّت عالي الدقة بدقة أفضل.
إذا كنت تنوي تفعيل ميزة حظر المحتوى من نطاقات أخرى، عليك تقييم تأثير ذلك في الموارد الأخرى المشتركة المصدر على موقعك الإلكتروني، مثل مواضع الإعلانات.
SharedArrayBuffer
" في موقعك الإلكترونيSharedArrayBuffer
بدون حظر الوصول من نطاقات أخرى. إذا وصلت إلى هذه الصفحة بعد أن ظهرت لك رسالة تشير إلى إيقاف ميزة SharedArrayBuffer
، من المحتمل أن يكون موقعك الإلكتروني أو أحد الموارد المضمَّنة فيها يستخدم SharedArrayBuffer
. لضمان عدم حدوث أي أعطال في موقعك الإلكتروني
بسبب الإيقاف النهائي، ابدأ بتحديد مكان استخدامه.إذا لم تكن متأكدًا من الموضع الذي يتم فيه استخدام علامة SharedArrayBuffer
في موقعك الإلكتروني، هناك طريقتان لمعرفة ذلك:
- استخدام "أدوات مطوري البرامج في Chrome"
- (إعدادات متقدمة) استخدام إعداد تقارير الإيقاف النهائي
إذا كنت تعرف موقع استخدام SharedArrayBuffer
، يمكنك التخطّي إلى تحليل تأثير حظر الوصول من نطاقات أخرى.
استخدام "أدوات مطوري البرامج في Chrome"
تتيح أدوات مطوري البرامج في Chrome للمطوّرين فحص المواقع الإلكترونية.
- افتح "أدوات مطوري البرامج في Chrome" على الصفحة التي تشكّ في أنّها تستخدم
SharedArrayBuffer
. - اختَر لوحة Console (وحدة التحكم).
- إذا كانت الصفحة تستخدم
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
- يشير اسم الملف ورقم السطر في نهاية الرسالة (على سبيل المثال،
common-bundle.js:535
) إلى مصدرSharedArrayBuffer
. إذا كانت مكتبة تابعة لجهة خارجية، تواصَل مع المطوّر لحلّ المشكلة. وإذا تم تنفيذ ذلك كجزء من موقعك الإلكتروني، اتّبِع الدليل أدناه لتفعيل ميزة عزل المحتوى من نطاقات أخرى.
![تحذير DevToools Console عند استخدام SharedArrayBuffer بدون حظر الوصول من نطاقات أخرى](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=6&hl=ar)
(إعدادات متقدمة) استخدام إعداد تقارير الإيقاف النهائي
تحتوي بعض المتصفّحات على وظيفة الإبلاغ عن إيقاف واجهات برمجة التطبيقات نهائيًا في نقطة نهاية محدّدة.
- يمكنك إعداد خادم تقرير الإيقاف والحصول على عنوان URL لإعداد التقارير. يمكنك تحقيق ذلك إما من خلال الاستعانة بخدمة عامة أو إنشاء خدمة بنفسك.
- باستخدام عنوان URL، اضبط عنوان HTTP التالي على الصفحات التي يُحتمل أن تعرض الخطأ
SharedArrayBuffer
.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- بعد بدء نشر العنوان، يجب أن تبدأ نقطة النهاية التي سجّلت فيها في جمع تقارير الإيقاف النهائي.
يمكنك الاطّلاع على مثال لتنفيذ هذا الإجراء على الرابط التالي: https://cross-origin-isolation.glitch.me.
تحليل تأثير حظر الوصول من نطاقات أخرى
ألن يكون من الرائع أن تتمكن من تقييم التأثير الذي سيحدثه تفعيل "العزل المشترك المصدر" على موقعك الإلكتروني بدون إيقاف أي شيء فعليًا؟ تتيح لك عناوين HTTP
Cross-Origin-Opener-Policy-Report-Only
وCross-Origin-Embedder-Policy-Report-Only
إجراء ذلك.
- اضبط
Cross-Origin-Opener-Policy-Report-Only: same-origin
على مستند المستوى الأعلى. وكما يشير الاسم، لا يرسل هذا العنوان سوى تقارير حول التأثير الذي سيحدثهCOOP: same-origin
على موقعك الإلكتروني، ولن يؤدي إلى إيقاف الاتصال من خلال النوافذ المنبثقة. - يمكنك إعداد التقارير وإعداد خادم ويب لتلقّي التقارير وحفظها.
- اضبط
Cross-Origin-Embedder-Policy-Report-Only: require-corp
على مستند المستوى الأعلى. يتيح لك هذا العنوان معرفة تأثير تفعيلCOEP: require-corp
بدون التأثير في أداء موقعك الإلكتروني حتى الآن. يمكنك ضبط هذا العنوان لإرسال التقارير إلى خادم إعداد التقارير نفسه الذي أعددته في الخطوة السابقة.
الحدّ من تأثير حظر الوصول من نطاقات أخرى
بعد تحديد الموارد التي ستتأثر بالعزل المشترك المصدر، في ما يلي إرشادات عامة حول كيفية تفعيل هذه الموارد من مصادر متعددة المصادر:
- في الموارد المشتركة المصدر، مثل الصور والنصوص البرمجية وأوراق الأنماط وإطارات iframe وغيرها، اضبط عنوان
Cross-Origin-Resource-Policy: cross-origin
. في موارد الموقع الإلكتروني نفسه، اضبط عنوانCross-Origin-Resource-Policy: same-site
. - بالنسبة إلى الموارد القابلة للتحميل باستخدام CORS، تأكَّد من تفعيلها من خلال ضبط السمة
crossorigin
في علامة HTML الخاصة بها (على سبيل المثال،<img src="example.jpg" crossorigin>
). وبالنسبة إلى طلب استرجاع JavaScript، تأكَّد من ضبطrequest.mode
علىcors
. - إذا كنت تريد استخدام ميزات فعّالة مثل
SharedArrayBuffer
داخل إطار iframe مُحمَّل، عليك إلحاقallow="cross-origin-isolated"
بالحقل<iframe>
. - إذا كانت الموارد من مصادر متعددة التي تم تحميلها في إطارات iframe أو النصوص البرمجية للموظفين تتضمن طبقة أخرى من إطارات iframe أو النصوص البرمجية للموظفين، طبِّق الخطوات الموضّحة في هذا القسم بشكلٍ متكرر قبل المضي قدمًا.
- بعد التأكّد من تفعيل الميزة في جميع الموارد من مصادر متعددة، اضبط العنوان
Cross-Origin-Embedder-Policy: require-corp
على إطارات iframe والنصوص البرمجية للموظفين (خطوة مطلوبة بغض النظر عن المصدر نفسه أو من مصادر متعددة). - تأكَّد من عدم ظهور نوافذ منبثقة من مصادر متعددة تتطلب التواصل من خلال
postMessage()
. ولا توجد طريقة للحفاظ على عملها عند تفعيل العزل المشترك المصدر. يمكنك نقل الاتصال إلى وثيقة أخرى غير معزولة من مصادر متعددة، أو استخدام طريقة اتصال مختلفة (مثل طلبات HTTP).
تفعيل حظر الوصول من نطاقات أخرى
بعد الحدّ من تأثير هذا الحظر من خلال حظر الوصول من نطاقات أخرى، في ما يلي بعض الإرشادات العامة لتفعيل العزلة من مصادر متعددة:
- اضبط عنوان
Cross-Origin-Opener-Policy: same-origin
في مستند المستوى الأعلى. وإذا كنت قد ضبطتCross-Origin-Opener-Policy-Report-Only: same-origin
، استبدِله. سيؤدي هذا إلى حظر الاتصال بين مستند المستوى الأعلى ونوافذه المنبثقة. - اضبط عنوان
Cross-Origin-Embedder-Policy: require-corp
في مستند المستوى الأعلى. وإذا كنت قد ضبطتCross-Origin-Embedder-Policy-Report-Only: require-corp
، استبدِله. سيؤدي ذلك إلى حظر تحميل الموارد المتعدّدة المصادر التي لم يتم تفعيلها. - تحقَّق من أنّ
self.crossOriginIsolated
يعرض الخطأtrue
في وحدة التحكّم للتأكّد من أنّ صفحتك تحظر الوصول من نطاقات آخرى.