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

از 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 پشتیبانی کند.
  • برای 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) را در ستون وضعیت ببینید.

مشکلات COEP در ستون وضعیت پانل شبکه.

سپس می توانید برای مشاهده جزئیات بیشتر روی ورودی کلیک کنید.

جزئیات مشکل COEP پس از کلیک بر روی یک منبع شبکه در پانل شبکه در تب Headers نشان داده می شود.

همچنین می توانید وضعیت iframe ها و پنجره های بازشو را از طریق پنل Application تعیین کنید. به بخش «قاب‌ها» در سمت چپ بروید و «بالا» را باز کنید تا ساختار منبع را ببینید.

می توانید وضعیت iframe مانند در دسترس بودن SharedArrayBuffer و غیره را بررسی کنید.

بازرس iframe Chrome DevTools

همچنین می‌توانید وضعیت پنجره‌های بازشو را بررسی کنید.

بازرس پنجره بازشو Chrome DevTools

مشکلات را با استفاده از 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 انجام می‌شود.

منابع