يمكنك استخدام أداة COOP وCOEP لإعداد بيئة معزولة عن مصادر متعددة وتفعيل ميزات فعّالة، مثل "SharedArrayBuffer
" و"performance.measureUserAgentSpecificMemory()
" وموقّت عالي الدقة بدقة أفضل.
آخر الأخبار
- 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. للحدّ من هذه المخاطر، توفّر المتصفِّحات بيئة معزولة تستند إلى الموافقة تُسمى "حظر الوصول من نطاقات أخرى". في حال عزل المحتوى من نطاقات أخرى، سيكون بإمكان صفحة الويب استخدام ميزات خاصة، بما في ذلك:
API | الوصف |
---|---|
SharedArrayBuffer
|
هذا الإجراء مطلوب لسلاسل WebAssembly. تتوفّر هذه الميزة في الإصدار Android Chrome 88. في الوقت الحالي، يتم تفعيل إصدار الموقع الإلكتروني المخصّص لأجهزة الكمبيوتر بشكل تلقائي بمساعدة عزل الموقع الإلكتروني، ولكنه يتطلّب تفعيل حالة حظر الوصول من نطاقات أخرى وسيتم إيقافها تلقائيًا في Chrome 92. |
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 التي لم يتم السماح بتحميلها من خلال المستندات المتعددة المصادر، وتمنع النوافذ المتعددة المصادر من التفاعل مباشرةً مع المستند. يعني ذلك أيضًا أن تلك الموارد التي يتم تحميلها من مصادر متعددة تتطلب الحصول على موافقة.
يمكنك تحديد ما إذا كانت صفحة الويب خاضعة لعزل المحتوى من نطاقات أخرى من خلال فحص السمة 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)
في عمود الحالة.
![مشاكل COEP في عمود "الحالة" بلوحة الشبكة](https://web.dev/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=6&hl=ar)
يمكنك بعد ذلك النقر على الإدخال للاطّلاع على مزيد من التفاصيل.
![يتم عرض تفاصيل مشكلة COEP في علامة تبويب "العناوين" بعد النقر على أحد موارد الشبكة في لوحة الشبكة.](https://web.dev/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=6&hl=ar)
يمكنك أيضًا تحديد حالة إطارات iframe والنوافذ المنبثقة من خلال لوحة التطبيق. انتقل إلى قسم "الإطارات" على الجانب الأيمن ووسِّع "الأعلى" لمشاهدة تقسيم بنية الموارد.
يمكنك التحقّق من حالة إطار iframe، مثلاً مدى توفّر SharedArrayBuffer
وغير ذلك.
![أداة فحص إطار iframe في "أدوات مطوري البرامج في Chrome"](https://web.dev/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=6&hl=ar)
يمكنك أيضًا التحقّق من حالة النوافذ المنبثقة، مثلاً ما إذا كانت معزولة عن مصادر متعددة.
![أداة فحص النوافذ المنبثقة في "أدوات مطوري البرامج في Chrome"](https://web.dev/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=6&hl=ar)
رصد المشاكل باستخدام 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.