از COOP و COEP برای راهاندازی یک محیط جدا شده با منبع متقابل استفاده کنید و ویژگیهای قدرتمندی مانند SharedArrayBuffer
، performance.measureUserAgentSpecificMemory()
و تایمر با وضوح بالا را با دقت بهتر فعال کنید.
به روز رسانی ها
- 21 ژوئن 2022 : اسکریپتهای Worker هنگام فعال کردن جداسازی مبدا متقاطع نیز نیاز به مراقبت دارند. توضیحاتی اضافه شد
- 5 اوت 2021 : JS Self-Profiling API به عنوان یکی از APIهایی که نیاز به جداسازی با مبدا متقاطع دارد، ذکر شده است، اما با توجه به تغییر اخیر جهت ، حذف شده است.
- 6 مه 2021 : بر اساس بازخوردها و مشکلات گزارش شده، تصمیم گرفتیم جدول زمانی استفاده از
SharedArrayBuffer
در هیچ یک از سایتهای جدا شده با منبع متقاطع تنظیم کنیم تا در Chrome M92 محدود شود. - 16 آوریل 2021 : یادداشتهایی درباره حالت جدید بدون اعتبار COEP و پنجرههای بازشو با همان مبدأ COOP اضافه شد تا شرایطی آرام برای جداسازی با مبدا متقابل باشد .
- 5 مارس 2021 : حذف محدودیتها برای
SharedArrayBuffer
،performance.measureUserAgentSpecificMemory()
و عملکردهای اشکال زدایی، که اکنون به طور کامل در Chrome 89 فعال شدهاند. قابلیتهای آتی اضافه شده،performance.now()
وperformance.timeOrigin
که دقت بالاتری دارند. - 19 فوریه 2021 : یادداشتی در مورد خطمشی ویژگیهای
allow="cross-origin-isolated"
و عملکرد اشکالزدایی در DevTools اضافه شد. - 15 اکتبر 2020 :
self.crossOriginIsolated
از Chrome 87 در دسترس است. با بازتاب آن،document.domain
تغییرناپذیر است وقتیself.crossOriginIsolated
true
برمیگرداند.performance.measureUserAgentSpecificMemory()
در حال پایان آزمایش اولیه خود است و به طور پیش فرض در Chrome 89 فعال است. بافر آرایه مشترک در Android Chrome از Chrome 88 در دسترس خواهد بود.
برخی از APIهای وب خطر حملات کانال جانبی مانند Spectre را افزایش می دهند. برای کاهش این خطر، مرورگرها یک محیط ایزوله مبتنی بر انتخاب به نام cross-origin isolated ارائه میدهند. با حالت ایزوله از مبدأ متقابل، صفحه وب میتواند از ویژگیهای ممتاز از جمله:
API | توضیحات |
---|---|
SharedArrayBuffer | برای موضوعات WebAssembly مورد نیاز است. این در Android Chrome 88 در دسترس است. نسخه دسکتاپ در حال حاضر بهطور پیشفرض با کمک Site Isolation فعال است، اما به حالت جدا شده از مبدا متقابل نیاز دارد و بهطور پیشفرض در 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
این سرصفحهها به مرورگر دستور میدهند که بارگیری منابع یا آیفریمهایی را که تصمیم به بارگیری اسناد متقاطع انتخاب نکردهاند را مسدود کند و از تعامل مستقیم پنجرههای متقاطع با سند شما جلوگیری کند. این همچنین به این معنی است که آن منابعی که بارگیری می شوند، نیاز به انتخاب دارند.
با بررسی self.crossOriginIsolated
می توانید تعیین کنید که آیا یک صفحه وب در حالت ایزوله از مبدا متقاطع است یا خیر.
این مقاله نحوه استفاده از این هدرهای جدید را نشان می دهد. در یک مقاله بعدی، زمینه و زمینه بیشتری را ارائه خواهم داد.
COOP و COEP را به کار بگیرید تا وب سایت خود را از مبدا متقابل جدا کنید
COOP و COEP را ادغام کنید
1. سرصفحه Cross-Origin-Opener-Policy: same-origin
در سند سطح بالا تنظیم کنید
با فعال کردن COOP: same-origin
در یک سند سطح بالا، پنجرههایی با مبدا یکسان، و پنجرههایی که از سند باز میشوند، یک گروه زمینه مرور جداگانه خواهند داشت، مگر اینکه در یک مبدا با تنظیم COOP یکسان باشند. بنابراین، ایزوله برای پنجره های باز اعمال می شود و ارتباط متقابل بین هر دو پنجره غیرفعال می شود.
گروه زمینه مرورگر مجموعه ای از پنجره ها است که می توانند به یکدیگر ارجاع دهند. به عنوان مثال، یک سند سطح بالا و اسناد فرزند آن که از طریق <iframe>
جاسازی شده است. اگر یک وب سایت ( https://a.example
) یک پنجره بازشو ( https://b.example
) باز کند، پنجره بازکننده و پنجره بازشو زمینه مرور یکسانی دارند، بنابراین از طریق API های DOM به یکدیگر دسترسی دارند. به عنوان window.opener
.
میتوانید بررسی کنید که آیا بازکننده پنجره و بازکننده آن در گروههای زمینه مرور جداگانه از DevTools قرار دارند.
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
تنظیم کنید. - برای منابع متقاطع که کنترلی روی آنها ندارید:
- اگر منبع با CORS ارائه می شود، از ویژگی
crossorigin
در تگ HTML بارگیری استفاده کنید. (به عنوان مثال،<img src="***" crossorigin>
.) - از صاحب منبع بخواهید از CORS یا CORP پشتیبانی کند.
- اگر منبع با CORS ارائه می شود، از ویژگی
- برای iframes، از همان اصول بالا پیروی کنید و
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. برای ارزیابی منابع جاسازی شده از سربرگ COEP Report-Only HTTP استفاده کنید
قبل از فعال کردن کامل COEP، میتوانید با استفاده از سربرگ Cross-Origin-Embedder-Policy-Report-Only
یک اجرا خشک انجام دهید تا بررسی کنید که آیا این خطمشی واقعاً کار میکند یا خیر. گزارشهایی را بدون مسدود کردن محتوای تعبیهشده دریافت خواهید کرد.
به صورت بازگشتی این را برای همه اسناد از جمله سند سطح بالا، iframes و اسکریپت های کارگر اعمال کنید. برای اطلاعات در مورد هدر HTTP فقط گزارش، به مشاهده مشکلات با استفاده از گزارش API مراجعه کنید.
4. COEP را فعال کنید
هنگامی که تأیید کردید که همه چیز کار می کند و همه منابع می توانند با موفقیت بارگیری شوند، هدر Cross-Origin-Embedder-Policy-Report-Only
را به سربرگ Cross-Origin-Embedder-Policy
با مقدار یکسان برای همه اسناد از جمله تغییر دهید. آنهایی که از طریق iframes و اسکریپت های کارگر تعبیه شده اند.
تعیین کنید که آیا جداسازی با self.crossOriginIsolated
موفقیت آمیز بود یا خیر
ویژگی self.crossOriginIsolated
زمانی که صفحه وب در حالت ایزوله با مبدا متقابل باشد و همه منابع و پنجره ها در یک گروه زمینه مرورگر ایزوله شده باشند، مقدار true
را برمی گرداند. میتوانید از این API برای تعیین اینکه آیا گروه زمینه مرور را با موفقیت ایزوله کردهاید و به ویژگیهای قدرتمندی مانند performance.measureUserAgentSpecificMemory()
دسترسی پیدا کردهاید استفاده کنید.
اشکال زدایی با استفاده از Chrome DevTools
برای منابعی که روی صفحه نمایش داده می شوند مانند تصاویر، تشخیص مسائل COEP نسبتاً آسان است زیرا درخواست مسدود می شود و صفحه یک تصویر گم شده را نشان می دهد. با این حال، برای منابعی که لزوماً تأثیر بصری ندارند، مانند اسکریپت ها یا سبک ها، ممکن است مسائل COEP مورد توجه قرار نگیرد. برای آنها، از پنل DevTools Network استفاده کنید. اگر مشکلی با COEP وجود دارد، باید (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
را در ستون وضعیت ببینید.
سپس می توانید برای مشاهده جزئیات بیشتر روی ورودی کلیک کنید.
همچنین می توانید وضعیت iframe ها و پنجره های بازشو را از طریق پنل Application تعیین کنید. به بخش «قابها» در سمت چپ بروید و «بالا» را باز کنید تا ساختار منبع را ببینید.
می توانید وضعیت iframe مانند در دسترس بودن SharedArrayBuffer
و غیره را بررسی کنید.
همچنین میتوانید وضعیت پنجرههای بازشو را بررسی کنید.
مشکلات را با استفاده از Reporting API مشاهده کنید
Reporting API مکانیسم دیگری است که از طریق آن می توانید مسائل مختلف را شناسایی کنید. میتوانید API گزارشدهی را طوری پیکربندی کنید که به مرورگر کاربران خود دستور ارسال گزارش را هر زمان که COEP بارگیری یک منبع را مسدود میکند یا COOP یک پنجره بازشو را جدا میکند، تنظیم کنید. Chrome از نسخه ۶۹ از Reporting API برای کاربردهای مختلف از جمله 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"
}]
نتیجه گیری
از ترکیبی از هدرهای COOP و COEP HTTP برای انتخاب یک صفحه وب در حالت ایزوله شده با مبدا متقابل خاص استفاده کنید. شما می توانید self.crossOriginIsolated
را بررسی کنید تا تعیین کنید که آیا یک صفحه وب در حالت ایزوله با مبدا متقاطع است یا خیر.
ما این پست را بهروز نگه میداریم زیرا ویژگیهای جدیدی در این حالت جدا شده از مبدأ متقاطع در دسترس قرار میگیرد و بهبودهای بیشتری در DevTools در اطراف COOP و COEP انجام میشود.