Руководство по включению изоляции между источниками

Междоменная изоляция позволяет веб-странице использовать мощные функции, такие как SharedArrayBuffer. В этой статье объясняется, как включить междоменную изоляцию на вашем веб-сайте.

Эйдзи Китамура

В этом руководстве показано, как включить междоменную изоляцию. Междоменная изоляция необходима, если вы хотите использовать SharedArrayBuffer , performance.measureUserAgentSpecificMemory() или таймер с высоким разрешением и большей точностью .

Если вы планируете включить изоляцию между источниками, оцените влияние этого на другие ресурсы вашего веб-сайта, расположенные в других местах, например, на рекламные площадки.

Определите, где на вашем веб-сайте используется SharedArrayBuffer

Начиная с Chrome 92, функции, использующие SharedArrayBuffer больше не будут работать без междоменной изоляции. Если вы попали на эту страницу из-за сообщения об устаревании SharedArrayBuffer , скорее всего, ваш веб-сайт или один из встроенных в него ресурсов использует SharedArrayBuffer . Чтобы избежать проблем на вашем веб-сайте из-за устаревания, начните с определения мест его использования.

Если вы не уверены, где именно на вашем сайте используется SharedArrayBuffer , есть два способа это выяснить:

  • Использование инструментов разработчика Chrome
  • (Расширенные возможности) Использование отчетов об устаревании

Если вы уже знаете, где используете SharedArrayBuffer , перейдите к разделу «Анализ влияния междоменной изоляции» .

Использование инструментов разработчика Chrome

Инструменты разработчика Chrome позволяют разработчикам проверять веб-сайты.

  1. Откройте инструменты разработчика Chrome на странице, которая, как вы подозреваете, может использовать 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. Как только заголовок начнет распространяться, зарегистрированная вами конечная точка должна начать собирать отчеты об устаревании.

См. пример реализации .

Проанализируйте влияние изоляции между источниками происхождения.

Было бы здорово, если бы вы могли оценить влияние включения междоменной изоляции на ваш сайт, не нарушая при этом ничего? 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. Для ресурсов, находящихся в разных местах (например, изображений, скриптов, таблиц стилей, iframe и других), установите заголовок Cross-Origin-Resource-Policy:cross-origin . Для ресурсов, находящихся в пределах одного сайта, установите заголовок Cross-Origin-Resource-Policy:same-site .
  2. Для ресурсов, загружаемых с использованием CORS , убедитесь, что он включен, установив атрибут crossorigin в их HTML-теге (например, <img src="example.jpg" crossorigin> ). Для запросов на получение данных с помощью JavaScript убедитесь, что 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 в консоли, чтобы проверить, что ваша страница изолирована от других источников.

Ресурсы