جعل موقعك الإلكتروني "معزولاً عن المصادر الخارجية" باستخدام COOP وCOEP

استخدِم COOP وCOEP لإعداد بيئة معزولة على مستوى المصادر المختلفة وتفعيل ميزات قوية مثل SharedArrayBuffer وperformance.measureUserAgentSpecificMemory() والمؤقّت عالي الدقة مع دقة أفضل.

Eiji Kitamura

تاريخ النشر: 13 نيسان (أبريل) 2020، تاريخ آخر تعديل: 21 حزيران (يونيو) 2022

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

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

تمنع حالة "يحظر الوصول من نطاقات آخرى" أيضًا إجراء تعديلات على document.domain. (إنّ إمكانية تغيير document.domain تتيح التواصل بين المستندات من الموقع الإلكتروني نفسه، وقد تم اعتبارها ثغرة في سياسة المصدر نفسه).

للاستفادة من حالة حظر الوصول من نطاقات أخرى، عليك إرسال عناوين HTTP التالية في المستند الرئيسي:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

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

يمكنك تحديد ما إذا كانت صفحة الويب في حالة يحظر الوصول من نطاقات آخرى من خلال فحص self.crossOriginIsolated.

مسرد المصطلحات

يستخدم هذا المستند العديد من المصطلحات التي تحمل أسماء متشابهة ومختصرة. للتوضيح، أعددنا مسردًا مصغّرًا للمصطلحات:

• سياسة COEP: Cross Origin Embedder Policy
• سياسة COOP: Cross Origin Opener Policy
• سياسة مشاركة الموارد المشتركة النطاق (CORP)
• مشاركة الموارد مع نطاقات خارجية (CORS)
• CORB: حظر القراءة المشتركة المصدر

جعل موقعك الإلكتروني يحظر الوصول من نطاقات آخرى

1. ضبط Cross-Origin-Opener-Policy: same-origin على المستند ذي المستوى الأعلى

من خلال تفعيل COOP: same-origin على مستند ذي مستوى أعلى، يكون للنوافذ التي لها المصدر نفسه والنوافذ التي تم فتحها من المستند مجموعة سياق تصفّح منفصلة، ما لم تكن في المصدر نفسه مع إعداد COOP نفسه. وبالتالي، يتم فرض العزل على النوافذ المفتوحة ويتم إيقاف التواصل المتبادل بين النافذتين.

مجموعة سياقات التصفّح هي مجموعة من النوافذ التي يمكنها الإشارة إلى بعضها البعض. على سبيل المثال، مستند ذو مستوى أعلى ومستنداته الفرعية المضمّنة مع <iframe>. إذا فتح موقع إلكتروني (https://a.example) نافذة حوار (https://b.example)، ستتشارك نافذة الفتح ونافذة الحوار سياق التصفّح نفسه، وبالتالي يمكنهما الوصول إلى بعضهما البعض باستخدام واجهات DOM API، مثل window.opener.

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

2. تفعيل CORP أو CORS على المراجع

تأكَّد من تحميل جميع الموارد في الصفحة باستخدام عناوين HTTP الخاصة بـ CORP أو CORS. هذه الخطوة مطلوبة للخطوة الرابعة، وهي تفعيل COEP.

في ما يلي الإجراءات التي يجب اتّخاذها، استنادًا إلى طبيعة المرجع:

• إذا كان من المتوقّع تحميل المورد من المصدر نفسه فقط، اضبط عنوان Cross-Origin-Resource-Policy: same-origin.
• إذا كان من المتوقّع تحميل المورد من الموقع الإلكتروني نفسه فقط ولكن من مصادر متعددة، اضبط السمة Cross-Origin-Resource-Policy: same-site.
• إذا تم تحميل المورد من مصادر متعددة تقع ضمن نطاق سيطرتك، اضبط عنوان Cross-Origin-Resource-Policy: cross-origin إذا أمكن ذلك.
• بالنسبة إلى الموارد من مصادر متعددة التي لا يمكنك التحكّم فيها:
  • استخدِم السمة crossorigin في علامة HTML الخاصة بالتحميل إذا كان يتم عرض المورد باستخدام CORS. (مثلاً، <img src="***" crossorigin>.)
  • يُرجى الطلب من مالك المورد إتاحة CORS أو CORP.
• بالنسبة إلى إطارات iframe، اتّبِع المبادئ نفسها واضبط Cross-Origin-Resource-Policy: cross-origin (أو same-site أو same-origin حسب السياق).
• يجب عرض النصوص البرمجية التي يتم تحميلها باستخدام WebWorker من المصدر نفسه، لذلك لن تحتاج إلى عناوين CORP أو CORS.
• بالنسبة إلى مستند أو منفِّذ يتم عرضه باستخدام COEP: require-corp، يجب أن يتم ضبط العنوان Cross-Origin-Resource-Policy: cross-origin على الموارد الفرعية متعدّدة المصادر التي يتم تحميلها بدون CORS لتفعيل إمكانية تضمينها. على سبيل المثال، ينطبق ذلك على <script> وimportScripts و<link> و<video> و<iframe> وما إلى ذلك.

العزل في إطارات iframe

يمكنك تفعيل ميزة "العزل من مصادر متعددة" في مستند مضمّن في إطار iframe من خلال تطبيق سياسة الأذونات allow="cross-origin-isolated" على العلامة <iframe> واستيفاء الشروط التالية. يجب أيضًا أن تكون السلسلة الكاملة للمستندات، بما في ذلك الإطارات الرئيسية والإطارات الفرعية، معزولة عن المصادر الخارجية.

3- استخدام عنوان HTTP Report-Only الخاص بسياسة COEP لتقييم الموارد المضمّنة

قبل تفعيل COEP بالكامل، يمكنك إجراء تجربة بدون تحميل أي بيانات باستخدام العنوان Cross-Origin-Embedder-Policy-Report-Only لمعرفة ما إذا كانت السياسة تعمل بالفعل. ستتلقّى التقارير بدون حظر المحتوى المضمّن.

يجب تطبيق ذلك بشكل متكرّر على جميع المستندات، بما في ذلك المستند ذو المستوى الأعلى وإطارات iframe وبرامج النصوص الخاصة بالمنفِّذين. للحصول على معلومات حول عنوان HTTP Report-Only، راجِع مقالة مراقبة المشاكل باستخدام Reporting API.

4. تفعيل COEP

لا يمكن تنفيذ هذه الخطوة إلا بعد التأكّد من تفعيل CORP أو CORS للموارد.

بعد التأكّد من أنّ كل شيء يعمل بشكل صحيح وأنّه يمكن تحميل جميع الموارد بنجاح، بدِّل العنوان Cross-Origin-Embedder-Policy-Report-Only إلى العنوان Cross-Origin-Embedder-Policy بالقيمة نفسها لجميع المستندات، بما في ذلك تلك المضمّنة في إطارات iframe ونصوص برمجية للعاملين.

تحديد ما إذا نجحت عملية العزل

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

تصحيح الأخطاء

قد تواجه مشاكل في COOP وCOEP. يمكنك استخدام أدوات المطوّرين في المتصفّح أو Reporting API لتصحيح الأخطاء.

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

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

في حال حدوث مشكلة في COEP، من المفترض أن يظهر الرمز (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) في عمود الحالة.

يمكنك بعد ذلك النقر على الإدخال للاطّلاع على مزيد من التفاصيل.

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

يمكنك التحقّق من حالة إطار iframe، مثل توفّر SharedArrayBuffer وما إلى ذلك.

يمكنك أيضًا التحقّق من حالة نوافذ الحوار، مثل ما إذا كانت معزولة من مصادر متعددة.

مراقبة المشاكل باستخدام Reporting API

Reporting API هي آلية أخرى يمكنك من خلالها رصد مشاكل مختلفة. يمكنك ضبط Reporting API لتوجيه متصفّح المستخدمين بإرسال تقرير كلما حظر COEP تحميل أحد الموارد أو عزل COOP نافذة حوار. يتوافق Chrome مع Reporting API منذ الإصدار 69، وذلك لمجموعة متنوعة من الاستخدامات، بما في ذلك COEP وCOOP.

تعرَّف على كيفية ضبط Reporting API وإعداد خادم لتلقّي التقارير.

مثال على تقرير COEP

في ما يلي مثال على حمولة تقرير COEP عند حظر مورد متعدّد المصادر:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

مثال على تقرير COOP

في ما يلي مثال على حمولة تقرير COOP عند فتح مربّع حوار معزول:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

عندما تحاول مجموعات سياقات التصفّح المختلفة الوصول إلى بعضها البعض (في وضع "إعداد التقارير فقط")، يرسل COOP أيضًا تقريرًا. على سبيل المثال، سيبدو التقرير عند محاولة استخدام postMessage() على النحو التالي:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

الخلاصات

استخدِم مجموعة من عناوين HTTP الخاصة بـ COOP وCOEP لتفعيل حالة خاصة يحظر الوصول من نطاقات آخرى. يمكنك فحص self.crossOriginIsolated لتحديد ما إذا كانت صفحة الويب في حالة يحظر الوصول من نطاقات آخرى.

سنحرص على تعديل هذه المشاركة عند إتاحة ميزات جديدة لهذه الحالة المعزولة من مصادر متعددة، وعند إجراء المزيد من التحسينات على أدوات مطوّلي البرامج في ما يتعلّق بـ COOP وCOEP.

الموارد

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

آخر التعديلات على المستندات

• ‫21 يونيو 2022: يجب أيضًا الاهتمام بنصوص Worker البرمجية عند تفعيل ميزة "العزل بين المصادر". تمت إضافة بعض التفسيرات.
• ‫5 أغسطس 2021: تم ذكر JS Self-Profiling API كإحدى واجهات برمجة التطبيقات التي تتطلب عزل المصدر المشترك، ولكن تم إزالتها بسبب التغيير الأخير في التوجيه.
• ‫6 أيار (مايو) 2021: استنادًا إلى الملاحظات والمشاكل التي تم الإبلاغ عنها، قرّرنا تعديل الجدول الزمني لحظر استخدام SharedArrayBuffer في المواقع الإلكترونية غير المعزولة المشتركة المصدر في الإصدار Chrome M92.
• ‫16 أبريل 2021: تمت إضافة ملاحظات حول وضع COEP بدون بيانات اعتماد وCOOP same-origin-allow-popups كشرط مخفّف للعزل بين المصادر.
• ‫5 مارس 2021: تمت إزالة القيود المفروضة على SharedArrayBuffer وperformance.measureUserAgentSpecificMemory() ووظائف تصحيح الأخطاء، وأصبحت هذه الوظائف متاحة بالكامل في الإصدار 89 من Chrome. تمت إضافة إمكانات قادمة، performance.now() وperformance.timeOrigin، ستوفّر دقة أعلى.
• ‫19 فبراير 2021: تمت إضافة ملاحظة حول سياسة الميزات allow="cross-origin-isolated" ووظيفة تصحيح الأخطاء في "أدوات مطوّري البرامج".
• ‫15 تشرين الأول (أكتوبر) 2020: تتوفّر self.crossOriginIsolated بدءًا من الإصدار 87 من Chrome. وبناءً على ذلك، تكون document.domain غير قابلة للتغيير عندما تعرض الدالة self.crossOriginIsolated القيمة true. سيتم إنهاء مرحلة التجربة والتقييم لـ performance.measureUserAgentSpecificMemory()، وسيتم تفعيلها تلقائيًا في الإصدار 89 من Chrome. ستتوفّر ميزة Shared Array Buffer على متصفّح Chrome لنظام التشغيل Android بدءًا من الإصدار 88.