Сделайте свой веб-сайт «изолированным от разных источников»; использование COOP и COEP

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

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

Обновления

  • 21 июня 2022 г .: Скрипты рабочих процессов также требуют внимания при включенной изоляции между источниками. Добавлены некоторые пояснения.
  • 5 августа 2021 г .: JS Self-Profiling API упоминался как один из API, требующих изоляции между источниками, но, отражая недавнее изменение направления , он был удален.
  • 6 мая 2021 г .: На основе отзывов и сообщений о проблемах мы решили скорректировать временную шкалу для ограничения использования SharedArrayBuffer на сайтах, не являющихся изолированными между источниками, в Chrome M92.
  • 16 апреля 2021 г .: добавлены заметки о новом режиме без учетных данных COEP и разрешении всплывающих окон COOP для одного и того же источника в качестве смягченного условия для изоляции между источниками.
  • 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() завершает свою пробную версию и включен по умолчанию в Chrome 89. Общий буфер массива в 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

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

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

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

Используйте COOP и COEP, чтобы сделать ваш сайт изолированным от всех источников

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

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

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

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

Просмотр контекстной группы

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

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

Убедитесь, что все ресурсы на странице загружены с HTTP-заголовками CORP или CORS. Это необходимо для шага 4, включающего 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.
  • Для iframes следуйте тем же принципам, что и выше, и задайте Cross-Origin-Resource-Policy: cross-origin (или same-site , same-origin в зависимости от контекста).
  • Скрипты, загруженные с помощью WebWorker должны обслуживаться из того же источника, поэтому вам не нужны заголовки CORP или CORS.
  • Для документа или объекта Worker, обслуживаемого с помощью COEP: require-corp , кросс-оригинальные подресурсы, загруженные без CORS, должны устанавливать заголовок Cross-Origin-Resource-Policy: cross-origin для включения встраивания. Например, это относится к <script> , importScripts , <link> , <video> , <iframe> и т. д.

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

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

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

4. Включить COEP

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

Определите, была ли изоляция успешной с помощью self.crossOriginIsolated

The self.crossOriginIsolated property returns true when the web page is in a cross-origin isolated state and all resources and windows are isolated within the same browsing context group. You can use this API to determine whether you have successfully isolated the browsing context group and gained access to powerful features like performance.measureUserAgentSpecificMemory() .

Отладка проблем с помощью Chrome DevTools

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

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

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

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

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

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

Chrome DevTools iframe inspector

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

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

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

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

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

Ресурсы