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

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

Eiji Kitamura

التحديثات

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

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

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

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

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

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

يمكنك تحديد ما إذا كانت صفحة الويب تخضع لعزل عناوين URL من عدّة مصادر من خلال اتّباع الخطوات التالية: فحص 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 الذي يستخدم "إعداد التقارير فقط"، يُرجى الاطّلاع على رصد المشاكل باستخدام علامة التبويب "إعداد التقارير" API.

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

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

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

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

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

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

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

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

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

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

ملاحظة المشاكل باستخدام Reporting API

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

للتعرّف على كيفية ضبط Reporting API وإعداد خادم لتلقّي انتقِل إلى استخدام قسم إعداد التقارير 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)، ترسل 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"
}]

الخاتمة

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

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

الموارد

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