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

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

Eiji Kitamura

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

التحديثات

• 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. إلى للتخفيف من هذه المخاطر، توفر المتصفحات بيئة معزولة تعتمد على التمكين تسمى يحظر الوصول من نطاقات آخرى. ومع فرض عزل الوصول من نطاقات أخرى، ستتم إزالة استخدام الميزات الخاصة، بما في ذلك:

الميزات التي ستكون متاحة بعد حظر الوصول من نطاقات أخرى الولاية.

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

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

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

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

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

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

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

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

مصطلح رئيسي: تستخدم هذه المقالة العديد من المصطلحات التي تشبهها في الأساس. لتوضيح الأمور أكثر، يجب تحديد النقاط التالية أولاً: * COEP: سياسة أداة تضمين المحتوى المتقاطع * COOP: سياسة التطبيقات المتعددة المصادر * CORP: سياسة الموارد المتعددة المصادر * CORS: مشاركة الموارد المتعددة المصادر * CORB: حظر القراءة من مصادر متعددة

نشر سياسة COOP وCOEP لتعزيز عزل موقعك الإلكتروني من الوصول من نطاقات أخرى

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

دمج COOP وCOEP

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

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

تنبيه: سيؤدي ذلك إلى إيقاف عمليات الدمج التي تتطلب تفاعلات مشتركة بين مصادر مختلفة، مثل OAuth والدفعات. للتخفيف من حدة هذه المشكلة، ندرس حاليًا تخفيف الشرط لإتاحة حظر الوصول من نطاقات أخرى إلى Cross-Origin-Opener-Policy: same-origin-allow-popups. وبهذه الطريقة سيكون التواصل مع النافذة مفتوحة تلقائيًا ممكنًا. إذا كنت تريد تفعيل حظر الوصول من نطاقات أخرى ولكن تم حظرك بسبب هذه المشكلة، ننصحك بالتسجيل في تجربة مصدر والانتظار إلى أن يصبح الشرط الجديد متاحًا. ولا نخطّط لإنهاء مرحلة التجربة والتقييم إلى أن يتم حلّ هذه المشكلة بأمان.

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

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

جرِّبه: اطّلِع على تأثير معلَمات COOP المختلفة.

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>" وغير ذلك

يمكنك تفعيل ميزة حظر الوصول من نطاقات أخرى على مستند مضمّن في إطار iframe من خلال تطبيق سياسة أذونات allow="cross-origin-isolated" على العلامة <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 والنصوص البرمجية للمشغِّلات.

التجربة الآن: اطّلِع على تأثير معلَمات COEP / CORP المختلفة.

ملاحظة: Squoosh (تطبيق ويب تقدّمي لتحسين الصور) يستخدم الآن COOP / COEP للوصول إلى Wasm Threads (ومخزن المصفوفة المشترك) أيضًا على Android Chrome.

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

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

للتعرّف على كيفية ضبط 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"
}]

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

مثال على تقرير 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()