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

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

Eiji Kitamura

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

تنبيه: يتطلب استخدام SharedArrayBuffer على Chrome لأجهزة الكمبيوتر المكتبي عزل النطاقات الأخرى بدءًا من الإصدار Chrome 92. يمكنك الاطّلاع على مزيد من المعلومات في مقالة تحديثات SharedArrayBuffer.

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

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

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

واجهة برمجة التطبيقات	الوصف
SharedArrayBuffer	مطلوب لمؤشرات WebAssembly. تتوفّر هذه الميزة في الإصدار 88 من Chrome على أجهزة Android. يتم تفعيل نسخة الموقع الإلكتروني المخصّصة لأجهزة الكمبيوتر تلقائيًا بمساعدة ميزة عزل المواقع الإلكترونية، ولكنّها ستتطلّب حالة حظر الوصول من نطاقات أخرى وسيتم إيقافها تلقائيًا في الإصدار 92 من Chrome.
performance.measureUserAgentSpecificMemory()	تتوفّر هذه الميزة اعتبارًا من الإصدار 89 من Chrome.
performance.now()، performance.timeOrigin	تتوفّر هذه السمة في العديد من المتصفّحات، وتقتصر دقتها على 100 ميكروثانية أو أكثر. ومع تفعيل ميزة "يحظر الوصول من نطاقات آخرى"، يمكن أن تكون درجة الدقة 5 ميكروثانية أو أعلى.

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

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

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

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

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

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

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

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

• ‫COEP: سياسة أداة تضمين المحتوى من مصادر متعددة
• COOP: سياسة فتح النوافذ المتعدّدة المصادر
• سياسة تضمين الموارد من مصادر خارجية (CORP)
• ‫CORS: مشاركة الموارد المتعددة المصادر
• ‫CORB: حظر القراءة من مصادر متعددة

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

ملاحظة: تعرَّف على الخطوات العملية لتفعيل حظر الوصول من نطاقات آخرى.

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

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

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

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

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، يجب أن تضبط الموارد الفرعية المتعدّدة المصادر التي يتم تحميلها بدون CORS عنوان Cross-Origin-Resource-Policy: cross-origin للسماح بتضمينها. على سبيل المثال، ينطبق ذلك على <script> وimportScripts و<link> و<video> و<iframe> وما إلى ذلك.

مصطلح أساسي: الموقع الإلكتروني نفسه هو المواقع الإلكترونية التي تستخدم المخطّط نفسه وeTLD+1 نفسه. المواقع الإلكترونية من المصدر نفسه هي المواقع الإلكترونية التي تستخدم المجموعة نفسها من المخطط واسم المضيف والمنفذ. مزيد من المعلومات حول الفرق بين الموقع الإلكتروني نفسه والمصدر نفسه

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

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

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

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

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

4. تفعيل COEP

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

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

ملاحظة: Squoosh هو تطبيق ويب تقدّمي (PWA) لتحسين الصور، يستخدم COOP / COEP للوصول إلى سلاسل محادثات Wasm (وShared Array Buffer) وعلى متصفّح Chrome لأجهزة Android.

تنبيه: نحن نستكشف كيفية نشر Cross-Origin-Resource-Policy على نطاق واسع، لأنّ عزل المصادر المشتركة يتطلّب من جميع الموارد الفرعية الموافقة صراحةً. أحد الخيارات هو وضع COEP بدون بيانات اعتماد الذي يسمح بتحميل الموارد بدون عنوان CORP، وذلك من خلال إزالة جميع بيانات الاعتماد الخاصة بها. يتوفّر وضع Credentialless في الإصدار 96 من Chrome وفي Edge، ولكنّه غير متاح بعد في المتصفّحات الأخرى.

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

تعرض السمة 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 مع العنوان Report-To؟ يتم نقل Chrome إلى إصدار جديد من Reporting API، والذي يستبدل Report-To بـ Reporting-Endpoints. ننصحك بالانتقال إلى الإصدار الجديد. يمكنك الاطّلاع على مقالة نقل البيانات إلى الإصدار 1 من Reporting API لمزيد من التفاصيل.

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

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

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

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

تنبيه: يتوفّر blocked-url لضمان التوافق مع الأنظمة القديمة فقط وستتم إزالته.

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

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

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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"
}]

الخلاصات

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

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

الموارد

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

تعديلات على المستندات

• ‫21 يونيو 2022: يجب أيضًا الانتباه إلى نصوص العامل البرمجية عند تفعيل ميزة "يحظر الوصول من نطاقات آخرى". تمت إضافة بعض التفسيرات.
• ‫5 أغسطس 2021: تمت الإشارة إلى واجهة JS Self-Profiling API كإحدى واجهات برمجة التطبيقات التي تتطلّب عزل المصادر المشتركة، ولكن تمت إزالتها لتعكس التغيير الأخير في الاتجاه.
• ‫6 مايو 2021: استنادًا إلى الملاحظات والمشاكل التي تم الإبلاغ عنها، قرّرنا تعديل المخطط الزمني لاستخدام SharedArrayBuffer في المواقع الإلكترونية التي لا تحظر الوصول من نطاقات أخرى ليتم حظره في الإصدار M92 من Chrome.
• ‫16 أبريل 2021: تمت إضافة ملاحظات حول وضع COEP credentialless وقيمة 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 من Chrome.