Как настроить межсайтовую изоляцию с помощью COOP и COEP

Используйте COOP и COEP, чтобы настроить изолированную среду с несколькими источниками и включить мощные функции, такие как SharedArrayBuffer,
performance.measureUserAgentSpecificMemory() и таймер высокой точности.

Apr 13, 2020 — Обновлено Nov 26, 2021

Available in: English, 中文, 日本語, and 한국어

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

Eiji Kitamura

Twitter GitHub Homepage

Обновления

5 августа 2021 г.: JS Self-Profiling API был упомянут как один из API-интерфейсов, требующих межсайтовой изоляции, но из-за недавнего изменения направления он был удален.
6 мая 2021 г.: Основываясь на отзывах и сообщениях о проблемах, мы решили скорректировать временную шкалу для того, чтобы ограничить использование SharedArrayBuffer на сайтах без изоляции между источниками в Chrome M92.
16 апреля 2021 г.: добавлены примечания о новом режиме без учетных данных COEP и всплывающих окнах COOP same-origin-allow-popups, которые будут смягченным условием для межсайтовой изоляции.
5 марта 2021 г.: Удалены ограничения для SharedArrayBuffer, performance.measureUserAgentSpecificMemory() и функций отладки, которые теперь полностью включены в Chrome 89. Добавлены новые возможности, performance.now() и performance.timeOrigin, которые будут иметь более высокую точность.
19 февраля 2021 г.: добавлено примечание о политике функций allow="cross-origin-isolated" и функциях отладки в DevTools.
15 октября 2020 г.: Свойство self.crossOriginIsolated доступно в Chrome 87. В связи с этим, document.domain является неизменным, когда self.crossOriginIsolated возвращает true. Метод performance.measureUserAgentSpecificMemory() завершает испытания Origin Trial и по умолчанию включен в Chrome 89. Shared Array Buffer в Chrome для Android будет доступен начиная с Chrome 88.

Некоторые веб-API повышают риск атак по сторонним каналам, например Spectre. Чтобы снизить этот риск, браузеры предлагают изолированную среду на основе согласия, называемую межсайтовой изоляцией. В состоянии межсайтовой изоляции веб-страница сможет использовать привилегированные функции, в том числе:

Функции, которые будут доступны в состоянии межсайтовой изоляции.
API	Описание
`SharedArrayBuffer`	Требуется для потоков WebAssembly. Доступен в Android Chrome 88. Версия для десктопов в настоящее время включена по умолчанию с помощью Site Isolation, но для нее требуется состояние межсайтовой изоляции, и она будет отключена по умолчанию в Chrome 92.
`performance.measureUserAgentSpecificMemory()`	Доступно в Chrome 89.
`performance.now()`, `performance.timeOrigin`	В настоящее время доступно во многих браузерах с разрешением до 100 микросекунд или выше. При межсайтовой изоляции разрешение может составлять 5 микросекунд или выше.

Состояние межсайтовой изоляции также предотвращает модификации document.domain. (Возможность изменять document.domain позволяет взаимодействовать между документами одного и того же сайта и считается лазейкой в политике одного и того же источника.)

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

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

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

Вы можете определить, находится ли веб-страница в состоянии межсайтовой изоляции, проверив значение self.crossOriginIsolated.

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

Развертывание COOP и COEP для межсайтовой изоляции #

Интеграция COOP и COEP #

1. Задайте заголовок `Cross-Origin-Opener-Policy: same-origin` в документе верхнего уровня #

Если включить COOP: same-origin в документе верхнего уровня, окна с одинаковым источником и окна, открытые из документа, будут иметь отдельную группу контекста просмотра, если они не находятся в одном источнике с одинаковыми настройками COOP. Таким образом, для открытых окон принудительно включена изоляция, а взаимодействие между обоими окнами отключено.

Внимание

Это нарушит те интеграции, которым требуется взаимодействие между окнами из разных источников, например, OAuth и платежные формы. Чтобы хотя бы частично решить эту проблему, мы изучаем возможность ослабления условия включения межсайтовой изоляции для Cross-Origin-Opener-Policy: same-origin-allow-popups, что позволит сохранить связь с окном, которое открылось самостоятельно. Если вам не удается включить межсайтовую изоляцию из-за этой проблемы, рекомендуем зарегистрироваться для испытаний Origin Trial и подождать, пока не станет доступно новое условие. Мы не планируем завершать испытания до тех пор, пока эта проблема не будет разрешена.

Группа контекста просмотра — это группа вкладок, окон или фреймов, которые используют один и тот же контекст. Например, если веб-сайт (https://a.example) открывает всплывающее окно (https://b.example), открывающее и всплывающее окна используют один и тот же контекст просмотра, и они имеют доступ друг к другу через DOM API, такие как window.opener.

Вы можете проверить, находятся ли открывающее и открытое окна в отдельных группах контекста просмотра в DevTools.

2. Убедитесь, что для ресурсов включены CORP или CORS #

Убедитесь, что все ресурсы на странице загружены с заголовками CORP или CORS HTTP. Этот шаг необходим для четвертого шага, включающего COEP.

Вот что нужно сделать в зависимости от характера ресурса:

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

3. Используйте HTTP-заголовок COEP Report-Only для оценки встроенных ресурсов #

Перед тем, как полностью включить COEP, вы можете выполнить формальный прогон, используя заголовок Cross-Origin-Embedder-Policy-Report-Only, чтобы проверить, действительно ли работает политика. Вы будете получать отчеты без блокировки встроенного контента. Рекурсивно примените это ко всем документам. Информацию о HTTP-заголовке только для отчетов см. в разделе Наблюдение за проблемами с помощью Reporting API.

4. Включите COEP #

Убедившись, что все работает и все ресурсы могут быть успешно загружены, примените HTTP-заголовок Cross-Origin-Embedder-Policy: require-corp ко всем документам, включая те, которые встроены через iframe.

Внимание

Мы изучали разные способы масштабирования Cross-Origin-Resource-Policy, поскольку межсайтовая изоляция требует явного разрешения на загрузку для всех вспомогательных ресурсов. В итоге было решено пойти от обратного и ввести новый «безучетный» (credentialless) режим COEP, который позволяет загружать ресурсы без заголовка CORP, удаляя все их учетные данные. Мы еще окончательно не определились с тем, как это должно работать, но надеемся, что данный режим снизит для вас трудоемкость проверки того, что вспомогательные ресурсы отправляют заголовок Cross-Origin-Resource-Policy. Если вам не удается включить межсайтовую изоляцию из-за этой проблемы, рекомендуем зарегистрироваться для испытаний Origin Trial и подождать, пока не появится новый режим. Мы не планируем завершать испытания до тех пор, пока новый режим не будет доступен.

Определение, удалась ли изоляция, с помощью `self.crossOriginIsolated` #

Свойство self.crossOriginIsolated возвращает true, когда веб-страница находится в состоянии межсайтовой изоляции и все ресурсы и окна изолированы в одной и той же группе контекста просмотра. Вы можете использовать этот API, чтобы определить, успешно ли вы изолировали группу контекста просмотра и получили ли доступ к мощным функциям, таким как performance.measureUserAgentSpecificMemory().

Отладка с помощью Chrome DevTools #

Для ресурсов, которые отображаются на экране, таких как изображения, довольно легко обнаружить проблемы COEP, поскольку запрос будет заблокирован, а на странице будет указано отсутствующее изображение. Однако для ресурсов, которые не обязательно имеют визуальный эффект, например, сценарии или стили, проблемы COEP могут остаться незамеченными. Для них используйте панель «Сеть» в DevTools. Если есть проблема с COEP, вы должны увидеть (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) в столбце «Статус».

Проблемы с COEP в столбце «Статус» на панели «Сеть».

Затем вы можете нажать на запись, чтобы увидеть более подробную информацию.

Подробная информация о проблеме COEP отображается на вкладке «Заголовки» после щелчка по сетевому ресурсу на панели «Сеть».

Вы также можете определить статус iframe и всплывающих окон через панель «Приложения». Перейдите в раздел «Фреймы» слева и разверните «верх», чтобы увидеть разбор структуры ресурсов.

Вы можете проверить статус iframe, например, доступность SharedArrayBuffer и т. д.

Вы также можете проверить статус всплывающих окон, например, изолированы ли они от разных источников.

Инспектор всплывающих окон Chrome DevTools

Наблюдение за проблемами с помощью Reporting API #

Reporting API — еще один механизм, с помощью которого вы можете обнаруживать различные проблемы. Вы можете настроить Reporting API так, чтобы браузер ваших пользователей отправлял отчет всякий раз, когда COEP блокирует загрузку ресурса или COOP изолирует всплывающее окно. Chrome поддерживает Reporting API с версии 69 для различных целей, включая COEP и COOP.

Чтобы узнать, как настроить Reporting API и сервер для получения отчетов, перейдите в раздел «Использование 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"
}]

Когда разные группы контекста просмотра пытаются получить доступ друг к другу (в режиме «только отчет»), 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.

Ресурсы #

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

Nov 26, 2021 — Улучшить статью

Return to all articles