Обеспечьте "кросс-доменную изоляцию" вашего веб-сайта с помощью COOP и COEP.

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

Eiji Kitamura

Опубликовано: 13 апреля 2020 г., Последнее обновление: 21 июня 2022 г.

Внимание: начиная с Chrome 92, для SharedArrayBuffer в настольной версии Chrome требуется междоменная изоляция. Подробнее см. в разделе «Обновления SharedArrayBuffer» .

В этом документе показано, как использовать COOP и COEP. Подробнее о том, почему это важно, вы можете прочитать в статье «Сделайте свой веб-сайт "изолированным от других источников" с помощью COOP и COEP» .

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

Функции, которые будут доступны в изолированном состоянии между источниками.

API	Описание
SharedArrayBuffer	Требуется для работы с потоками WebAssembly. Эта функция доступна начиная с Android Chrome 88. В настольной версии она включена по умолчанию с помощью изоляции сайтов , но потребует состояния изоляции между источниками и будет отключена по умолчанию в 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

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

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

Примечание: Этот документ предназначен для тех, кто хотел бы подготовить свои веб-сайты к использованию SharedArrayBuffer , потоков WebAssembly, performance.measureUserAgentSpecificMemory() или таймера высокого разрешения с большей точностью и более надежной работой на разных браузерных платформах.

Глоссарий

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

• COEP: Политика внедрения перекрестного происхождения
• COOP: Политика открытия сделок между странами происхождения
• КОРПОРАЦИЯ: Политика использования ресурсов из разных источников
• CORS: Межстрановое совместное использование ресурсов
• CORB: блокировка чтения из разных источников.

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

Совет: Изучите практические шаги для включения изоляции источников (cross-origin isolation ).

1. Установите параметр Cross-Origin-Opener-Policy: same-origin для документа верхнего уровня.

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

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

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

2. Включите CORP или CORS для ресурсов.

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

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

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

Ключевые термины: Сайты с одинаковым адресом (same-site) — это сайты, имеющие одинаковую схему и один и тот же eTLD+1. Сайты с одинаковым адресом (same-origin) — это сайты, имеющие одинаковую комбинацию схемы, имени хоста и порта. Подробнее о различиях между сайтами с одинаковым адресом и адресами с одинаковым адресом можно прочитать здесь.

Изоляция в iframe

Включить междоменную изоляцию для документа, встроенного в iframe, можно, применив политику разрешений allow="cross-origin-isolated" к тегу <iframe> и выполнив следующие условия. Вся цепочка документов, включая родительские и дочерние фреймы, также должна быть изолирована от источников.

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

Перед полным включением COEP можно провести пробный запуск, используя заголовок Cross-Origin-Embedder-Policy-Report-Only чтобы проверить, действительно ли политика работает. Вы будете получать отчеты, не блокируя встроенный контент.

Примените это рекурсивно ко всем документам, включая документ верхнего уровня, iframe и скрипты рабочих процессов. Для получения информации о заголовке HTTP Report-Only см. раздел « Отслеживание проблем с помощью API отчетов» .

4. Включите COEP

Этот шаг можно выполнить только после того, как вы убедитесь, что для ресурсов включены CORP или CORS .

После того, как вы убедитесь, что всё работает и все ресурсы успешно загружаются, замените заголовок Cross-Origin-Embedder-Policy-Report-Only на заголовок Cross-Origin-Embedder-Policy с тем же значением для всех документов, включая те, которые встроены с помощью iframe и скриптов рабочих процессов.

Примечание: Squoosh , PWA для оптимизации изображений, использует COOP/COEP для доступа к потокам Wasm (и общему буферу массива) в Android Chrome.

Внимание: Мы изучаем возможности масштабируемого развертывания Cross-Origin-Resource-Policy , поскольку для обеспечения междоменной изоляции требуется явное согласие всех подресурсов. Один из вариантов — режим COEP без учетных данных , который позволяет загружать ресурсы без заголовка CORP, удаляя все их учетные данные. Режим без учетных данных доступен в Chrome 96 и Edge, но пока не поддерживается другими браузерами.

Определите, удалось ли осуществить изоляцию.

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

Проблемы отладки

У вас могут возникнуть проблемы с COOP и COEP. Для отладки вы можете использовать инструменты разработчика браузера или API отчетов.

Отладка с помощью инструментов разработчика Chrome.

Для ресурсов, отображаемых на экране, таких как изображения, проблемы COEP довольно легко обнаружить, поскольку запрос блокируется, и страница должна указывать на отсутствие изображения. Однако для ресурсов, которые не обязательно оказывают визуальное воздействие, таких как скрипты или стили, проблемы COEP могут остаться незамеченными. В таких случаях используйте панель «Сеть» в инструментах разработчика.

Если возникла проблема с COEP, в столбце «Статус» вы увидите сообщение (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) .

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

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

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

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

Отслеживайте проблемы с помощью API для создания отчетов.

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

Примечание: Используете ли вы уже API отчетов с заголовком Report-To ? Chrome переходит на новую версию API отчетов, в которой Report-To заменен на Reporting-Endpoints ; рассмотрите возможность перехода на новую версию. Подробности см. в разделе «Переход на API отчетов версии 1» .

Узнайте, как настроить 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"
}]

Внимание: blocked-url существует только для обеспечения обратной совместимости и будет удален .

Пример отчета 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.

Ресурсы

• Почему вам необходима "изоляция между источниками" для использования мощных функций
• Руководство по обеспечению междоменной изоляции
• Отслеживайте общее использование памяти вашей веб-страницы с помощью measureUserAgentSpecificMemory()

Обновления документов

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