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

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

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

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

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

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

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

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

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

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

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 при использовании SharedArrayBuffer без изоляции между источниками
Предупреждение консоли DevToools при использовании 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. Для ресурсов с перекрестным происхождением, таких как изображения, сценарии, таблицы стилей, 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 в консоли, чтобы убедиться, что ваша страница изолирована от перекрестного происхождения.

Ресурсы