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

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

Feb 9, 2021 — Обновлено Aug 5, 2021

Available in: Deutsch, English, Español, Français, Português, 中文, 日本語, and 한국어

Appears in: Безопасность и надежность

Eiji Kitamura

Twitter GitHub Homepage

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

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

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

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

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

примените Chrome DevTools;
(дополнительно) соберите отчеты о нежелательных функциях.

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

Chrome DevTools #

С помощью Chrome DevTools можно проверить качество кода на сайте.

Откройте Chrome DevTools на странице, где может использоваться SharedArrayBuffer.
Выберите панель Console (Консоль).

Если на странице используется 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

Имя файла и номер строки в конце сообщения (например, common-bundle.js:535) указывают на источник происхождения SharedArrayBuffer. Если это сторонняя библиотека, попросите ее разработчика устранить проблему. Если же это часть кода вашего сайта, включите межсайтовую изоляцию, как указано ниже.

Предупреждение в консоли DevTools об использовании SharedArrayBuffer без межсайтовой изоляции.

(Дополнительно) Отчеты о нежелательных функциях #

В некоторых браузерах есть функция отчетности о нежелательных API на маршруте до указанной конечной точки.

Настройте сервер отчетов о нежелательных функциях и получите URL-адрес отчета. Это можно сделать с помощью общедоступной службы или самостоятельно.
Используя полученный URL-адрес, установите следующий HTTP-заголовок для страниц, на которых может применяться SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Как только заголовок начнет передаваться дальше, конечная точка, которую вы зарегистрировали, станет собирать отчеты о нежелательных функциях.

Пример реализации приведен здесь: https://cross-origin-isolation.glitch.me.

Анализ влияния межсайтовой изоляции #

Правда было бы здорово оценивать влияние межсайтовой изоляции, не нарушая работу сайта? Именно это позволяют сделать HTTP-заголовки Cross-Origin-Opener-Policy-Report-Only и Cross-Origin-Embedder-Policy-Report-Only.

Задайте заголовок Cross-Origin-Opener-Policy-Report-Only: same-origin в документе верхнего уровня. Как следует из названия, этот заголовок только лишь отправляет отчеты о влиянии, которое COOP: same-origin может оказать на сайт, но не отключает связь с всплывающими окнами.
Настройте функцию отчетности и веб-сервер для получения и сохранения отчетов.
Задайте заголовок Cross-Origin-Embedder-Policy-Report-Only: require-corp в документе верхнего уровня. Именно этот заголовок позволяет, не нарушая работу сайта, проследить, как включение COEP: require-corp повлияет на него. Вы можете настроить этот заголовок для отправки отчетов на тот же сервер отчетов, который настроили на предыдущем шаге.

Внимание

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

Снижение влияния межсайтовой изоляции #

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

Для таких межсайтовых ресурсов, как изображения, скрипты, таблицы стилей, блоки iframe и другие, задайте заголовок Cross-Origin-Resource-Policy: cross-origin. Для локальных ресурсов сайта установите заголовок Cross-Origin-Resource-Policy: same-site.
Добавьте атрибут crossorigin в тег HTML документа верхнего уровня, если ресурс загружается с помощью CORS (пример: <img src="example.jpg" crossorigin>).
Если межсайтовые ресурсы, загруженные в блоки iframe, включают в себя еще один уровень блоков iframe, то рекурсивно выполните действия, описанные в этом разделе, прежде чем двигаться дальше.
Убедившись, что все межсайтовые ресурсы имеют разрешение на загрузку, установите заголовок Cross-Origin-Embedder-Policy: require-corp для межсайтовых ресурсов, которые загружаются в блоки iframe.
Убедитесь в отсутствии межсайтовых всплывающих окон, использующих функцию postMessage(). После включения межсайтовой изоляции они точно перестанут работать. Переместите эту функциональность в другой документ, на который не действует межсайтовая изоляция, или используйте другой способ передачи данных (например, HTTP-запросы).

Включение межсайтовой изоляции #

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

Задайте заголовок Cross-Origin-Opener-Policy: same-origin в документе верхнего уровня. Если ранее вы уже задали заголовок Cross-Origin-Opener-Policy-Report-Only: same-origin, замените его. Это заблокирует обмен данными между документом верхнего уровня и его всплывающими окнами.
Задайте заголовок Cross-Origin-Embedder-Policy: require-corp в документе верхнего уровня. Если ранее вы уже задали заголовок Cross-Origin-Embedder-Policy-Report-Only: require-corp, замените его. Это заблокирует загрузку межсайтовых ресурсов, не имеющих явного разрешения на загрузку.
Убедитесь, что self.crossOriginIsolated возвращает true в консоли—это означает, что на странице включена межсайтовая изоляция.

Ресурсы #

Последнее обновление

Aug 5, 2021 — Улучшить статью

Return to all articles