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

جداسازی منبع متقابل به یک صفحه وب امکان می دهد از ویژگی های قدرتمندی مانند SharedArrayBuffer استفاده کند. این مقاله نحوه فعال کردن جداسازی مبدا متقاطع را در وب سایت خود توضیح می دهد.

ایجی کیتامورا

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

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

محل استفاده از SharedArrayBuffer را مشخص کنید
از Chrome 92، قابلیت‌هایی که از SharedArrayBuffer استفاده می‌کنند، دیگر بدون جداسازی متقاطع کار نمی‌کنند. اگر به دلیل پیام منسوخ شدن SharedArrayBuffer وارد این صفحه شده اید، احتمالاً وب سایت شما یا یکی از منابع تعبیه شده در آن از SharedArrayBuffer استفاده می کند. برای اطمینان از اینکه هیچ چیز در وب سایت شما به دلیل قدیمی بودن خراب نمی شود، با شناسایی محل استفاده از آن شروع کنید.

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

  • با استفاده از Chrome DevTools
  • (پیشرفته) استفاده از گزارش انحلال

اگر قبلاً می‌دانید کجا از SharedArrayBuffer استفاده می‌کنید، به تجزیه و تحلیل تأثیر جداسازی مبدا متقاطع بروید.

با استفاده از Chrome DevTools

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

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

(پیشرفته) استفاده از گزارش انحلال

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

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

یک نمونه پیاده‌سازی را در اینجا ببینید: https://cross-origin-isolation.glitch.me .

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

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

منابع