ایجاد وب سایت شما "منشا متقاطع ایزوله» با استفاده از COOP و COEP

از COOP و COEP برای راه‌اندازی یک محیط جدا شده با منبع متقابل استفاده کنید و ویژگی‌های قدرتمندی مانند SharedArrayBuffer ، performance.measureUserAgentSpecificMemory() و تایمر با وضوح بالا را با دقت بهتر فعال کنید.

Eiji Kitamura

به روز رسانی ها

• 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 ارائه می‌دهند. با حالت ایزوله از مبدأ متقابل، صفحه وب می‌تواند از ویژگی‌های ممتاز از جمله:

حالت جدا شده از مبدأ متقاطع نیز از تغییرات 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 پشتیبانی کند.
• برای 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 انجام می‌شود.

منابع

• چرا برای ویژگی‌های قدرتمند به «منشا متقاطع جدا شده» نیاز دارید
• راهنمای فعال کردن جداسازی با مبدا متقابل
• به‌روزرسانی‌های SharedArrayBuffer در Android Chrome 88 و Desktop Chrome 92
• با استفاده از measureUserAgentSpecificMemory() کل مصرف حافظه صفحه وب خود را نظارت کنید.