راهنمای فعال کردن جداسازی با مبدا متقابل

ایزولاسیون متقابل مبدا (Cross-origin isolation) به یک صفحه وب این امکان را می‌دهد که از ویژگی‌های قدرتمندی مانند SharedArrayBuffer استفاده کند. این مقاله نحوه فعال‌سازی ایزولاسیون متقابل مبدا (Cross-origin isolation) را در وب‌سایت شما توضیح می‌دهد.

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

اگر قصد دارید ایزوله‌سازی بین‌منبعی را فعال کنید، تأثیر این کار را بر سایر منابع بین‌منبعی در وب‌سایت خود، مانند مکان‌های تبلیغات، ارزیابی کنید.

مشخص کنید که SharedArrayBuffer در کجای وب‌سایت شما استفاده شده است.

از کروم ۹۲ به بعد، قابلیت‌هایی که از SharedArrayBuffer استفاده می‌کنند، دیگر بدون ایزوله‌سازی بین‌منبعی (cross-origin isolation) کار نخواهند کرد. اگر به دلیل پیام منسوخ شدن SharedArrayBuffer به این صفحه رسیده‌اید، احتمالاً وب‌سایت شما یا یکی از منابع تعبیه‌شده در آن از SharedArrayBuffer استفاده می‌کند. برای اطمینان از اینکه هیچ مشکلی در وب‌سایت شما به دلیل منسوخ شدن وجود ندارد، ابتدا محل استفاده از آن را شناسایی کنید.

اگر مطمئن نیستید که SharedArrayBuffer در کجای سایت شما استفاده شده است، دو راه برای فهمیدن آن وجود دارد:

  • استفاده از ابزارهای توسعه کروم
  • (پیشرفته) استفاده از گزارش‌های منسوخ‌شده

اگر از قبل می‌دانید که از SharedArrayBuffer کجا استفاده می‌کنید، از بخش «تحلیل تأثیر جداسازی بین مبدا» (Analysis the impact of cross-origin isolation) صرف نظر کنید.

استفاده از ابزارهای توسعه کروم

ابزارهای توسعه کروم (Chrome DevTools) به توسعه‌دهندگان اجازه می‌دهد تا وب‌سایت‌ها را بررسی کنند.

  1. ابزار توسعه کروم (Chrome DevTools) را در صفحه‌ای که مشکوک به استفاده SharedArrayBuffer هستید، باز کنید.
  2. پنل کنسول را انتخاب کنید.
  3. اگر صفحه از SharedArrayBuffer استفاده کند، پیام زیر نمایش داده خواهد شد:
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535
  4. نام فایل و شماره خط در انتهای پیام (برای مثال، common-bundle.js:535 ) نشان می‌دهد که SharedArrayBuffer از کجا می‌آید. اگر یک کتابخانه شخص ثالث است، برای رفع مشکل با توسعه‌دهنده تماس بگیرید. اگر به عنوان بخشی از وب‌سایت شما پیاده‌سازی شده است، برای فعال کردن جداسازی بین‌منبعی، راهنمای زیر را دنبال کنید.
هشدار کنسول DevTools هنگام استفاده از SharedArrayBuffer بدون ایزولاسیون بین مبدائی.
هشدار کنسول DevTools هنگام استفاده از SharedArrayBuffer بدون ایزولاسیون بین مبدائی.

(پیشرفته) استفاده از گزارش‌های منسوخ‌شده

برخی از مرورگرها قابلیت گزارش‌دهی منسوخ شدن APIها را تا یک نقطه پایانی مشخص دارند.

  1. یک سرور گزارش منسوخ‌شده راه‌اندازی کنید و URL گزارش را دریافت کنید . می‌توانید این کار را با استفاده از یک سرویس عمومی یا ساخت خودتان انجام دهید.
  2. با استفاده از URL، هدر HTTP زیر را روی صفحاتی که به طور بالقوه از SharedArrayBuffer استفاده می‌کنند، تنظیم کنید.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. به محض اینکه هدر شروع به انتشار کند، نقطه پایانی که در آن ثبت نام کرده‌اید باید شروع به جمع‌آوری گزارش‌های منسوخ شدن کند.

یک نمونه پیاده‌سازی را ببینید.

تأثیر جداسازی بین مبدائی را تجزیه و تحلیل کنید

آیا عالی نمی‌شد اگر می‌توانستید تأثیر فعال کردن جداسازی بین مبدا (cross-origin isolation) را بر سایت خود بدون ایجاد اختلال در چیزی ارزیابی کنید؟ هدرهای HTTP مربوط به Cross-Origin-Opener-Policy-Report-Only و Cross-Origin-Embedder-Policy-Report-Only به شما این امکان را می‌دهند.

  1. در سند سطح بالای خود، Cross-Origin-Opener-Policy-Report-Only: same-origin تنظیم کنید. همانطور که از نامش پیداست، این هدر فقط گزارش‌هایی در مورد تأثیری که COOP: same-origin بر سایت شما خواهد داشت ارسال می‌کند - در واقع ارتباط با پنجره‌های بازشو را غیرفعال نمی‌کند.
  2. گزارش‌گیری را تنظیم کنید و یک وب سرور را برای دریافت و ذخیره گزارش‌ها پیکربندی کنید.
  3. در سند سطح بالای خود، Cross-Origin-Embedder-Policy-Report-Only: require-corp را تنظیم کنید. باز هم، این هدر به شما امکان می‌دهد تأثیر فعال‌سازی COEP: require-corp بدون تأثیر واقعی بر عملکرد سایت خود مشاهده کنید. می‌توانید این هدر را طوری پیکربندی کنید که گزارش‌ها را به همان سرور گزارش‌دهی که در مرحله قبل تنظیم کرده‌اید، ارسال کند.

کاهش تأثیر جداسازی بین مبدائی

بعد از اینکه مشخص کردید کدام منابع تحت تأثیر جداسازی بین مبدایی قرار می‌گیرند، در اینجا دستورالعمل‌های کلی برای نحوه‌ی انتخاب این منابع بین مبدایی ارائه شده است:

  1. برای منابع cross-origin مانند تصاویر، اسکریپت‌ها، stylesheetها، iframeها و موارد دیگر، هدر Cross-Origin-Resource-Policy:cross-origin را تنظیم کنید. برای منابع same-site، هدر Cross-Origin-Resource-Policy:same-site را تنظیم کنید.
  2. برای منابعی که با استفاده از CORS قابل بارگذاری هستند، با تنظیم ویژگی crossorigin در تگ HTML آن (برای مثال، <img src="example.jpg" crossorigin> ) مطمئن شوید که فعال است. برای درخواست واکشی جاوا اسکریپت، مطمئن شوید که request.mode روی cors تنظیم شده است.
  3. اگر می‌خواهید از ویژگی‌های قدرتمندی مانند SharedArrayBuffer درون یک iframe بارگذاری شده استفاده کنید، allow="cross-origin-isolated" را به <iframe> اضافه کنید.
  4. اگر منابع بین‌منبعی که در iframeها یا اسکریپت‌های worker بارگذاری شده‌اند، شامل لایه دیگری از iframeها یا اسکریپت‌های worker باشند، قبل از ادامه، مراحل شرح داده شده در این بخش را به صورت بازگشتی اعمال کنید.
  5. پس از تأیید انتخاب همه منابع بین‌منبعی، هدر Cross-Origin-Embedder-Policy: require-corp را روی iframeها و اسکریپت‌های worker تنظیم کنید (این کار صرف نظر از same-origin یا cross-origin الزامی است).
  6. مطمئن شوید که هیچ پنجره‌ی پاپ‌آپ بین‌منشأیی وجود ندارد که نیاز به ارتباط از طریق postMessage() داشته باشد. وقتی ایزولاسیون بین‌منشأیی فعال است، هیچ راهی برای ادامه‌ی کار آن‌ها وجود ندارد. می‌توانید ارتباط را به سند دیگری که ایزولاسیون بین‌منشأیی ندارد منتقل کنید، یا از روش ارتباطی متفاوتی (مثلاً درخواست‌های HTTP) استفاده کنید.

فعال کردن ایزولاسیون بین مبدائی

پس از اینکه تأثیر را با جداسازی بین مبدا کاهش دادید، در اینجا دستورالعمل‌های کلی برای فعال کردن جداسازی بین مبدا ارائه شده است:

  1. سربرگ Cross-Origin-Opener-Policy: same-origin را در سند سطح بالای خود تنظیم کنید. اگر Cross-Origin-Opener-Policy-Report-Only: same-origin تنظیم کرده بودید، آن را جایگزین کنید. این کار ارتباط بین سند سطح بالای شما و پنجره‌های بازشو آن را مسدود می‌کند.
  2. هدر Cross-Origin-Embedder-Policy: require-corp را در سند سطح بالای خود تنظیم کنید. اگر Cross-Origin-Embedder-Policy-Report-Only: require-corp تنظیم کرده بودید، آن را جایگزین کنید. این کار بارگیری منابع cross-origin که انتخاب نشده‌اند را مسدود می‌کند.
  3. بررسی کنید که self.crossOriginIsolated در کنسول true را برگرداند تا تأیید شود که صفحه شما از نوع cross-origin isolation است.

منابع