جعل موقعك الإلكتروني "معزولاً من مصادر متعددة" باستخدام 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 نفس المصدر-السماح بالموافقة لتوفير شروط مريحة للعزل المشترك من مصادر متعددة.
• 5 آذار (مارس) 2021: تمت إزالة القيود المفروضة على وظائف SharedArrayBuffer وperformance.measureUserAgentSpecificMemory() وتصحيح الأخطاء التي تم تفعيلها بالكامل الآن في إصدار Chrome 89. تمت إضافة الإمكانيات القادمة، performance.now() وperformance.timeOrigin، والتي ستكون ذات دقة أعلى.
• 19 شباط (فبراير) 2021: تمت إضافة ملاحظة حول سياسة الميزات allow="cross-origin-isolated" ووظيفة تصحيح الأخطاء في "أدوات مطوري البرامج".
• 15 تشرين الأول (أكتوبر) 2020: يتوفّر self.crossOriginIsolated من Chrome 87. يعني ذلك أنّ document.domain غير قابل للتغيير عندما تعرض self.crossOriginIsolated القيمة true. ينهي performance.measureUserAgentSpecificMemory() مرحلة التجربة والتقييم، وسيتم تفعيله تلقائيًا في Chrome 89. ستتوفّر أداة "التخزين المؤقت المشترك" على أجهزة Android Chrome من Chrome 88.

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

وتمنع حالة حظر الوصول من نطاقات أخرى أيضًا إجراء تعديلات على 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 للموارد

تأكد من تحميل جميع الموارد في الصفحة برؤوس CORP أو CORS HTTP. هذه الخطوة مطلوبة للخطوة الرابعة، تفعيل سياسة 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> وما إلى ذلك.

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 لأنّه سيتم حظر الطلب وستشير الصفحة إلى صورة مفقودة. ومع ذلك، بالنسبة للموارد التي ليس لها بالضرورة تأثير مرئي، مثل النصوص البرمجية أو الأنماط، قد يتم تجاهل مشكلات بروتوكول حماية خصوصية البيانات (COEP). لإجراء ذلك، استخدِم لوحة "شبكة أدوات مطوّري البرامج". إذا كانت هناك مشكلة في 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

مثال على حمولة بيانات 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.

المراجِع

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