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

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

Eiji Kitamura

آخر الأخبار

• ‫21 حزيران (يونيو) 2022: يجب أيضًا الانتباه إلى النصوص البرمجية للعامل عند تفعيل ميزة عزل مصادر البيانات المختلفة. تمت إضافة بعض التفسيرات.
• 5 آب (أغسطس) 2021: تمت الإشارة إلى واجهة برمجة التطبيقات JS Self-Profiling API كإحدى واجهات برمجة التطبيقات التي تتطلب حظر الوصول من نطاقات أخرى، ولكنّها تعكس التغيير الأخير في الاتجاه.
• 6 أيار (مايو) 2021: استنادًا إلى الملاحظات والمشاكل التي تم الإبلاغ عنها، قرّرنا تعديل المخطط الزمني لاستخدام SharedArrayBuffer في المواقع الإلكترونية غير المعزولة عن مصادر متعددة ليصبح محظورًا في الإصدار M92 من Chrome.
• ‫16 نيسان (أبريل) 2021: تمت إضافة ملاحظات حول وضع جديد في بروتوكول COEP لا يتطلّب بيانات اعتماد وCOOP same-origin-allow-popups ليكون شرطًا relaxed لعزل موارد تطبيقات الويب التي تعمل من مصادر مختلفة.
• 5 آذار (مارس) 2021: تمت إزالة القيود المفروضة على SharedArrayBuffer وperformance.measureUserAgentSpecificMemory() ووظائف تصحيح الأخطاء التي تم تفعيلها بالكامل الآن في Chrome 89. تمت إضافة ميزتَين قادمتَين، 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. ستصبح ميزة "مخزّن مؤقت للصفائف المشتركة" في متصفّح Chrome على Android متوفرة بدءًا من الإصدار 88.

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

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

لتفعيل حالة العزل من مصادر خارجية، عليك إرسال عناوين HTTP التالية في المستند الرئيسي:

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

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

يمكنك تحديد ما إذا كانت صفحة الويب في حالة عزل من مصادر متعددة من خلال فحص self.crossOriginIsolated.

توضّح هذه المقالة كيفية استخدام هذه العناوين الجديدة. في مقالة متابعة، سأقدم المزيد من المعلومات الأساسية والسياق.

نشر السياسة المحدّدة لفتح المستندات المشتركة المصدر (COOP) وسياسة أداة تضمين المحتوى من مصادر خارجية (COEP) لعزل موقعك الإلكتروني عن مصادر أخرى

دمج COOP وCOEP

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

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

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

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

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

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

4. تفعيل بروتوكول COEP

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

تحديد ما إذا نجحت العزلة باستخدام self.crossOriginIsolated

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

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

بالنسبة إلى الموارد التي يتم عرضها على الشاشة مثل الصور، من السهل إلى حد ما رصد مشاكل بروتوكول COEP لأنه سيتم حظر الطلب وستشير الصفحة إلى عدم توفّر صورة. ومع ذلك، بالنسبة إلى الموارد التي لا تُحدث أثرًا مرئيًا بالضرورة، مثل النصوص البرمجية أو الأنماط، قد لا يتم ملاحظة مشاكل كفاءة استهلاك الطاقة. ويمكنك استخدام لوحة "الشبكة" في DevTools لإجراء ذلك. إذا كانت هناك مشكلة في سياسة COEP، من المفترض أن يظهر الرمز (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) في عمود الحالة .

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

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

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

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

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

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

للتعرّف على كيفية ضبط Reporting API وإعداد خادم لتلقّي التقارير، انتقِل إلى مقالة استخدام 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 report عند فتح نافذة منبثقة معزولة:

[{
  "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.

الموارد

• سبب الحاجة إلى "حظر الوصول من نطاقات أخرى" للحصول على ميزات فعّالة
• دليل تفعيل ميزة "العزل المشترك المصدر"
• تعديلات SharedArrayBuffer في الإصدار 88 من Chrome لنظام التشغيل Android والإصدار 92 من Chrome لأجهزة الكمبيوتر المكتبي
• مراقبة إجمالي استخدام الذاكرة في صفحة الويب من خلال measureUserAgentSpecificMemory()