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

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

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

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

  • ۲۱ ژوئن ۲۰۲۲ : اسکریپت‌های Worker نیز هنگام فعال بودن جداسازی بین مبدا نیاز به مراقبت دارند. توضیحاتی اضافه شد.
  • ۵ آگوست ۲۰۲۱ : API خود-پروفایل‌سازی JS به عنوان یکی از APIهایی که نیاز به جداسازی بین مبدایی دارند، ذکر شده بود، اما با توجه به تغییر اخیر مسیر ، این مورد حذف شده است.
  • ۶ مه ۲۰۲۱ : بر اساس بازخوردها و مشکلات گزارش‌شده، تصمیم گرفتیم جدول زمانی استفاده از SharedArrayBuffer را در سایت‌های غیرمتمرکز در Chrome M92 محدود کنیم.
  • ۱۶ آوریل ۲۰۲۱ : نکاتی در مورد حالت جدید بدون نیاز به اعتبارنامه COEP و پنجره‌های بازشو با منشأ یکسان COOP به عنوان یک شرط آسان برای جداسازی بین مبدأها اضافه شد.
  • ۵ مارس ۲۰۲۱ : محدودیت‌های SharedArrayBuffer ، performance.measureUserAgentSpecificMemory() و قابلیت‌های اشکال‌زدایی که اکنون به‌طور کامل در Chrome ۸۹ فعال شده‌اند، حذف شد. قابلیت‌های آینده، performance.now() و performance.timeOrigin که دقت بالاتری خواهند داشت، اضافه شدند.
  • ۱۹ فوریه ۲۰۲۱ : یادداشتی در مورد سیاست ویژگی allow="cross-origin-isolated" و عملکرد اشکال‌زدایی در DevTools اضافه شد.
  • ۱۵ اکتبر ۲۰۲۰ : self.crossOriginIsolated از کروم ۸۷ در دسترس است. با توجه به این موضوع، document.domain زمانی که self.crossOriginIsolated true را برمی‌گرداند، تغییرناپذیر است. performance.measureUserAgentSpecificMemory() در حال پایان دادن به دوره آزمایشی اولیه خود است و به طور پیش‌فرض در کروم ۸۹ فعال است. Shared Array Buffer در کروم اندروید از کروم ۸۸ در دسترس خواهد بود.

برخی از APIهای وب، خطر حملات کانال جانبی مانند Spectre را افزایش می‌دهند. برای کاهش این خطر، مرورگرها یک محیط ایزوله مبتنی بر انتخاب به نام cross-origin isolation ارائه می‌دهند. با حالت cross-origin isolation، صفحه وب قادر به استفاده از ویژگی‌های ممتاز از جمله موارد زیر خواهد بود:

رابط برنامه‌نویسی کاربردی توضیحات
SharedArrayBuffer برای رشته‌های WebAssembly مورد نیاز است. این قابلیت از اندروید کروم ۸۸ در دسترس است. نسخه دسکتاپ در حال حاضر به طور پیش‌فرض با کمک Site Isolation فعال است، اما به حالت ایزوله بین مبدا نیاز دارد و به طور پیش‌فرض در کروم ۹۲ غیرفعال خواهد شد .
performance.measureUserAgentSpecificMemory() از کروم ۸۹ در دسترس است.
performance.now() ، performance.timeOrigin در حال حاضر در بسیاری از مرورگرها با وضوح محدود به ۱۰۰ میکروثانیه یا بالاتر در دسترس است. با جداسازی متقابل مبدا، وضوح می‌تواند ۵ میکروثانیه یا بالاتر باشد.
 ویژگی‌هایی که در حالت ایزوله بین مبدا (cross-origin) در دسترس خواهند بود.

حالت ایزوله بین مبدایی همچنین از تغییر document.domain جلوگیری می‌کند. (قابلیت تغییر document.domain امکان ارتباط بین اسناد هم‌مکان را فراهم می‌کند و به عنوان یک راه گریز در سیاست هم‌مکانی در نظر گرفته شده است.)

برای ورود به حالت ایزوله بین مبدا، باید هدرهای HTTP زیر را در سند اصلی ارسال کنید:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

این هدرها به مرورگر دستور می‌دهند که بارگذاری منابع یا iframeهایی را که برای بارگذاری توسط اسناد cross-origin انتخاب نشده‌اند، مسدود کند و از تعامل مستقیم پنجره‌های cross-origin با سند شما جلوگیری کند. این همچنین به این معنی است که منابعی که به صورت cross-origin بارگذاری می‌شوند، نیاز به انتخاب دارند.

شما می‌توانید با بررسی self.crossOriginIsolated تشخیص دهید که آیا یک صفحه وب در حالت ایزوله بین مبدا (cross-origin isolation) قرار دارد یا خیر.

این مقاله نحوه استفاده از این هدرهای جدید را نشان می‌دهد. در مقاله بعدی، پیشینه و زمینه بیشتری را ارائه خواهم داد.

COOP و COEP را برای ایزوله کردن وب‌سایت خود بین مبدا و مبدا پیاده‌سازی کنید.

ادغام COOP و COEP

۱. سربرگ Cross-Origin-Opener-Policy: same-origin در سند سطح بالا تنظیم کنید.

با فعال کردن COOP: same-origin در یک سند سطح بالا، پنجره‌هایی با منشأ یکسان و پنجره‌هایی که از سند باز می‌شوند، یک گروه زمینه مرور جداگانه خواهند داشت، مگر اینکه در منشأ یکسانی با تنظیمات COOP یکسان باشند. بنابراین، جداسازی برای پنجره‌های باز اعمال می‌شود و ارتباط متقابل بین هر دو پنجره غیرفعال می‌شود.

یک گروه زمینه مرور، مجموعه‌ای از پنجره‌ها است که می‌توانند به یکدیگر ارجاع دهند. برای مثال، یک سند سطح بالا و اسناد فرزند آن که از طریق <iframe> جاسازی شده‌اند. اگر یک وب‌سایت ( https://a.example ) یک پنجره بازشو ( https://b.example ) را باز کند، پنجره بازشو و پنجره بازشو، زمینه مرور یکسانی را به اشتراک می‌گذارند، بنابراین از طریق APIهای DOM مانند window.opener به یکدیگر دسترسی دارند.

گروه زمینه مرور

می‌توانید بررسی کنید که آیا بازکننده‌ی پنجره و بازشونده‌ی آن در گروه‌های زمینه‌ی مرور جداگانه‌ای از DevTools قرار دارند یا خیر.

۲. مطمئن شوید که منابع CORP یا CORS را فعال کرده‌اند

مطمئن شوید که تمام منابع موجود در صفحه با هدرهای CORP یا CORS HTTP بارگذاری شده‌اند. این مرحله برای مرحله چهارم، فعال کردن COEP ، ضروری است.

بسته به ماهیت منبع، کارهایی که باید انجام دهید به شرح زیر است:

  • اگر انتظار می‌رود منبع فقط از همان مبدا بارگیری شود، هدر Cross-Origin-Resource-Policy: same-origin را تنظیم کنید.
  • اگر انتظار می‌رود منبع فقط از همان سایت اما با منشاء متقابل بارگیری شود، هدر Cross-Origin-Resource-Policy: same-site تنظیم کنید.
  • اگر منبع از cross origin(s) تحت کنترل شما بارگذاری می‌شود، در صورت امکان هدر Cross-Origin-Resource-Policy: cross-origin را تنظیم کنید.
  • برای منابع چندمنبعی که هیچ کنترلی روی آنها ندارید:
    • اگر منبع با CORS ارائه می‌شود، از ویژگی crossorigin در تگ بارگذاری HTML استفاده کنید. (برای مثال، <img src="***" crossorigin> ).
    • از صاحب منبع بخواهید که از CORS یا CORP پشتیبانی کند.
  • برای iframeها، همان اصول بالا را دنبال کنید و Cross-Origin-Resource-Policy: cross-origin (یا same-site ، same-origin بسته به متن) تنظیم کنید.
  • اسکریپت‌هایی که با WebWorker بارگذاری می‌شوند باید از همان مبدا ارائه شوند، بنابراین به هدرهای CORP یا CORS نیازی ندارید.
  • برای یک سند یا ورکر که با COEP: require-corp ارائه می‌شود، زیرمنابع cross-origin که بدون CORS بارگذاری می‌شوند، باید هدر Cross-Origin-Resource-Policy: cross-origin را طوری تنظیم کنند که قابلیت جاسازی داشته باشد. برای مثال، این مورد در مورد <script> ، importScripts ، <link> ، <video> ، <iframe> و غیره صدق می‌کند.

۳. از هدر HTTP مربوط به COEP Report-Only برای ارزیابی منابع تعبیه‌شده استفاده کنید.

قبل از فعال‌سازی کامل COEP، می‌توانید با استفاده از هدر Cross-Origin-Embedder-Policy-Report-Only یک آزمایش عملی انجام دهید تا بررسی کنید که آیا این سیاست واقعاً کار می‌کند یا خیر. گزارش‌ها را بدون مسدود کردن محتوای جاسازی‌شده دریافت خواهید کرد.

این را به صورت بازگشتی روی همه اسناد از جمله سند سطح بالا، iframe ها و اسکریپت‌های worker اعمال کنید. برای اطلاعات بیشتر در مورد هدر HTTP فقط برای گزارش، به بخش «مسائل مربوط به استفاده از Reporting API» مراجعه کنید.

۴. فعال کردن COEP

وقتی مطمئن شدید که همه چیز کار می‌کند و همه منابع با موفقیت بارگذاری می‌شوند، هدر Cross-Origin-Embedder-Policy-Report-Only را به هدر Cross-Origin-Embedder-Policy تغییر دهید و مقدار آن را برای همه اسناد، از جمله اسنادی که از طریق iframeها و اسکریپت‌های worker جاسازی شده‌اند، یکسان کنید.

تعیین اینکه آیا جداسازی با self.crossOriginIsolated موفقیت‌آمیز بوده است یا خیر

ویژگی self.crossOriginIsolated زمانی true را برمی‌گرداند که صفحه وب در حالت ایزوله بین مبدا (cross-origin) باشد و همه منابع و پنجره‌ها در یک گروه زمینه مرور (browsing context group) ایزوله شده باشند. می‌توانید از این API برای تعیین اینکه آیا با موفقیت گروه زمینه مرور را ایزوله کرده‌اید و به ویژگی‌های قدرتمندی مانند performance.measureUserAgentSpecificMemory() دسترسی پیدا کرده‌اید یا خیر، استفاده کنید.

اشکال‌زدایی مشکلات با استفاده از Chrome DevTools

برای منابعی که روی صفحه نمایش داده می‌شوند، مانند تصاویر، تشخیص مشکلات COEP نسبتاً آسان است زیرا درخواست مسدود می‌شود و صفحه، فقدان تصویر را نشان می‌دهد. با این حال، برای منابعی که لزوماً تأثیر بصری ندارند، مانند اسکریپت‌ها یا استایل‌ها، مشکلات COEP ممکن است مورد توجه قرار نگیرند. برای این موارد، از پنل DevTools Network استفاده کنید. اگر مشکلی با COEP وجود دارد، باید در ستون وضعیت (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) را مشاهده کنید.

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

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

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

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

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

بازرس iframe Chrome DevTools

همچنین می‌توانید وضعیت پنجره‌های بازشو را بررسی کنید، مثلاً اینکه آیا از نوع cross-origin isolation هستند یا خیر.

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

مشاهده مشکلات با استفاده از Reporting API

API گزارش‌دهی (Reporting API) مکانیزم دیگری است که از طریق آن می‌توانید مشکلات مختلف را تشخیص دهید. می‌توانید API گزارش‌دهی را طوری پیکربندی کنید که به مرورگر کاربران خود دستور دهد هر زمان که COEP بارگذاری یک منبع را مسدود کرد یا COOP یک پنجره پاپ‌آپ را ایزوله کرد، گزارشی ارسال کند. کروم از نسخه ۶۹ از API گزارش‌دهی برای کاربردهای متنوعی از جمله COEP و COOP پشتیبانی می‌کند.

برای یادگیری نحوه پیکربندی Reporting API و تنظیم سرور برای دریافت گزارش‌ها، به بخش Using the 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"
}]

وقتی گروه‌های مختلف زمینه مرور سعی می‌کنند به یکدیگر دسترسی پیدا کنند (فقط در حالت "report-only")، 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"
}]

نتیجه‌گیری

از ترکیبی از هدرهای HTTP COOP و COEP برای قرار دادن یک صفحه وب در حالت ایزوله بین مبدائی خاص استفاده کنید. شما قادر خواهید بود self.crossOriginIsolated را بررسی کنید تا مشخص شود که آیا یک صفحه وب در حالت ایزوله بین مبدائی قرار دارد یا خیر.

با در دسترس قرار گرفتن ویژگی‌های جدید برای این حالت ایزوله بین مبدا و بهبودهای بیشتر در DevTools پیرامون COOP و COEP، این پست را به‌روزرسانی خواهیم کرد.

منابع