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

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

Eiji Kitamura

Внимание: SharedArrayBuffer на настольном компьютере Chrome требуется изоляция между источниками, начиная с Chrome 92. Дополнительную информацию см. в обновлениях SharedArrayBuffer в Android Chrome 88 и Desktop Chrome 92 .

Обновления

• 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 allow="cross-origin-isolated" и функциях отладки в DevTools.
• 15 октября 2020 г .: self.crossOriginIsolated доступен в Chrome 87. Учитывая это, document.domain является неизменяемым, когда self.crossOriginIsolated возвращает true . performance.measureUserAgentSpecificMemory() завершает свою пробную версию и включен по умолчанию в Chrome 89. Shared Array Buffer в Android Chrome будет доступен в Chrome 88.

Некоторые веб-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: Политика открытия перекрестных источников * CORP: Политика ресурсов из разных источников * CORS: Совместное использование ресурсов из разных источников * CORB: Блокировка чтения из разных источников

Разверните 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 до тех пор, пока эта проблема не будет безопасно решена.

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

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

Попробуйте: посмотрите на влияние различных параметров COOP .

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 если это возможно.
• Для ресурсов перекрестного происхождения, над которыми вы не имеете контроля:
  • Используйте атрибут crossorigin в HTML-теге загрузки, если ресурс обслуживается с помощью CORS. (Например, <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> и т. д.

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

Ключевой термин: важно понимать разницу между «одним и тем же сайтом» и «одним и тем же источником». Узнайте о разнице в разделе «Понимание одного и того же сайта и одного и того же происхождения» .

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

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

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

4. Включите COEP

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

Попробуйте: посмотрите на влияние различных параметров COEP/CORP .

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы узнать, как настроить 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"
}]

Внимание: 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.

Ресурсы

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