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

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

Eiji Kitamura

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

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

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

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

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

Некоторые браузеры имеют функцию отчетности об устаревших 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 фактически не влияя при этом на функционирование вашего сайта. Вы можете настроить этот заголовок для отправки отчетов на тот же сервер отчетов, который вы настроили на предыдущем шаге.

Примечание. Вы также можете включить столбец «Домен» на панели «Сеть» Chrome DevTools, чтобы получить общее представление о том, какие ресурсы будут затронуты.

Внимание: включение изоляции между источниками заблокирует загрузку ресурсов из разных источников, на которые вы явно не согласились, и не позволит вашему документу верхнего уровня взаимодействовать со всплывающими окнами. Мы изучаем способы масштабного развертывания Cross-Origin-Resource-Policy , поскольку изоляция между источниками требует явного согласия всех подресурсов. И нам пришла в голову идея пойти в противоположном направлении: новый режим COEP «без учетных данных» , который позволяет загружать ресурсы без заголовка CORP, удаляя все их учетные данные. Мы надеемся, что это облегчит вам задачу проверки того, что подресурсы отправляют заголовок Cross-Origin-Resource-Policy . Хотя режим credentialless доступен в Chrome начиная с версии 96, он пока не поддерживается другими браузерами, поэтому некоторым разработчикам может быть сложно развернуть COOP или COEP на этом этапе. Кроме того, известно, что заголовок Cross-Origin-Opener-Policy: same-origin нарушит интеграцию, требующую взаимодействия окон между источниками, например OAuth и платежи. Чтобы смягчить эту проблему, мы изучаем возможность смягчения условия , позволяющего включить изоляцию между источниками для Cross-Origin-Opener-Policy: same-origin-allow-popups . Таким образом, связь с окном, открытым само по себе, станет возможной. Если вы хотите включить изоляцию между источниками, но заблокированы этими проблемами, мы рекомендуем зарегистрироваться для участия в пробной версии источника и подождать, пока станут доступны новые режимы. Мы не планируем прекращать пробную версию Origin до тех пор, пока не станут доступны эти новые режимы.

Смягчить влияние изоляции между источниками

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

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

Включение изоляции между источниками на локальном сервере может оказаться затруднительным, поскольку простые серверы не поддерживают отправку заголовков. Вы можете запустить Chrome с флагом командной строки --enable-features=SharedArrayBuffer , чтобы включить SharedArrayBuffer без включения изоляции между источниками. Узнайте , как запустить Chrome с флагом командной строки на соответствующих платформах .

Ресурсы

• Сделайте ваш сайт «изолированным от перекрестного происхождения» с помощью COOP и COEP.
• Обновления SharedArrayBuffer в Android Chrome 88 и Desktop Chrome 92