استخدِم COOP وCOEP لإعداد بيئة معزولة من مصادر متعددة وتفعيل ميزات قوية، مثل SharedArrayBuffer وperformance.measureUserAgentSpecificMemory() والمؤقّت عالي الدقة بدقة أفضل.
آخر الأخبار
- 21 يونيو 2022: يجب أيضًا الاهتمام بنصوص Worker البرمجية عند تفعيل ميزة "العزل بين المصادر". تمت إضافة بعض التفسيرات.
- 5 أغسطس 2021: تم ذكر JS Self-Profiling API كإحدى واجهات برمجة التطبيقات التي تتطلب عزل المصدر المشترك، ولكن تم إزالتها بسبب التغيير الأخير في التوجيه.
- 6 أيار (مايو) 2021: استنادًا إلى الملاحظات والمشاكل التي تم الإبلاغ عنها، قرّرنا تعديل الجدول الزمني لحظر استخدام
SharedArrayBufferفي المواقع الإلكترونية غير المعزولة المشتركة المصدر في الإصدار Chrome M92. - 16 أبريل 2021: أضفنا ملاحظات حول وضع جديد بدون بيانات اعتماد في سياسة COEP وسياسة COOP same-origin-allow-popups كشرط أقل صرامة لتحقيق العزل على مستوى المصادر المختلفة.
- 5 مارس 2021: تمت إزالة القيود المفروضة على
SharedArrayBufferوperformance.measureUserAgentSpecificMemory()ووظائف تصحيح الأخطاء، التي أصبحت متاحة بالكامل الآن في الإصدار 89 من Chrome. تمت إضافة الإمكانات القادمة،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. ستتوفّر ميزة Shared Array Buffer على متصفّح Chrome لنظام التشغيل Android بدءًا من الإصدار 88.
تزيد بعض واجهات برمجة التطبيقات على الويب من خطر هجمات القنوات الجانبية، مثل Spectre. للحدّ من هذا الخطر، توفّر المتصفّحات بيئة معزولة تستند إلى الموافقة، وتُعرف باسم "العزل من مصادر متعددة". في حالة العزل من مصادر متعددة، ستتمكّن صفحة الويب من استخدام الميزات المميّزة، بما في ذلك:
| واجهة برمجة التطبيقات | الوصف |
|---|---|
SharedArrayBuffer
|
مطلوب لسلاسل WebAssembly. تتوفّر هذه الميزة من الإصدار 88 من متصفّح Chrome على Android. يتم حاليًا تفعيل إصدار الكمبيوتر تلقائيًا باستخدام ميزة عزل المواقع الإلكترونية، ولكن سيتطلب حالة حظر الوصول من نطاقات آخرى، وسيتم إيقافه تلقائيًا في الإصدار 92 من Chrome. |
performance.measureUserAgentSpecificMemory()
|
تتوفّر هذه الميزة بدءًا من الإصدار 89 من متصفّح Chrome. |
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 API، مثل 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، يجب أن يضبط المورد الفرعي المشترك المنشأ الذي يتم تحميله بدون CORS العنوانCross-Origin-Resource-Policy: cross-originللموافقة على تضمينه. على سبيل المثال، ينطبق ذلك على<script>وimportScriptsو<link>و<video>و<iframe>وما إلى ذلك.
3- استخدام عنوان HTTP Report-Only الخاص بسياسة COEP لتقييم الموارد المضمّنة
قبل تفعيل COEP بالكامل، يمكنك إجراء تجربة وهمية باستخدام العنوان Cross-Origin-Embedder-Policy-Report-Only لمعرفة ما إذا كانت السياسة تعمل بالفعل. ستتلقّى التقارير بدون حظر المحتوى المضمّن.
يجب تطبيق ذلك بشكل متكرّر على جميع المستندات، بما في ذلك المستند ذو المستوى الأعلى وإطارات iframe وبرامج العاملين النصية. للحصول على معلومات حول عنوان HTTP الذي يتضمّن Report-Only، يُرجى الاطّلاع على مراقبة المشاكل باستخدام 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 في الموارد التي لا يكون لها تأثير مرئي بالضرورة، مثل النصوص البرمجية أو الأنماط. في هذه الحالة، استخدِم لوحة "الشبكة" في DevTools. في حال حدوث مشكلة في COEP، من المفترض أن تظهر لك
(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) في عمود الحالة.
يمكنك بعد ذلك النقر على الإدخال للاطّلاع على مزيد من التفاصيل.
يمكنك أيضًا تحديد حالة إطارات iframe والنوافذ المنبثقة من خلال لوحة التطبيق. انتقِل إلى قسم "الإطارات" (Frames) على يمين الصفحة، ثم وسِّع "أعلى" (top) للاطّلاع على تفاصيل بنية المرجع.
يمكنك التحقّق من حالة إطار 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 في الإصدار 88 من Chrome على Android والإصدار 92 من Chrome على الكمبيوتر
- مراقبة إجمالي استخدام الذاكرة في صفحة الويب باستخدام
measureUserAgentSpecificMemory()