Безопасное взаимодействие всплывающих окон с помощью свойств ограничения

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

Arthur Hemery
GitHub
Мод Налпас
Maud Nalpas
X GitHub

Доступно новое значение для политики открытия перекрестных источников (COOP) : restrict-properties . Это дает преимущества в области безопасности и упрощает внедрение изоляции между источниками , позволяя вашему сайту взаимодействовать со сторонними всплывающими окнами для платежей, аутентификации или других вариантов использования.

Чтобы начать экспериментировать со restrict-properties примите участие в пробной версии Origin, начиная с Chrome 116 .

Зачем использовать restrict-properties

restrict-properties имеют два основных варианта использования:

Предотвратите межсайтовые утечки без поломок

По умолчанию любой веб-сайт может открыть ваше приложение во всплывающем окне и получить ссылку на него.

Вредоносный веб-сайт может использовать это в своих интересах для проведения атак, таких как межсайтовая утечка информации . Чтобы снизить этот риск, вы можете использовать заголовок Cross-Origin-Opener-Policy (COOP).

До сих пор ваши возможности для Cross-Origin-Opener-Policy были ограничены. Вы можете:

  • Установите same-origin, который блокирует все взаимодействия между источниками и всплывающими окнами.
  • Установите параметр same-origin-allow-popups , который блокирует все взаимодействия между источниками, при которых ваш сайт открывается во всплывающем окне.
  • Установите unsafe-none , который разрешает все взаимодействия между источниками и всплывающими окнами.

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

Cross-Origin-Opener-Policy: restrict-properties решают эту проблему.

При использовании restrict-properties свойства, которые можно использовать для подсчета кадров и других атак с утечками между сайтами, недоступны, но базовая связь между окнами через postMessage и closed разрешена.

Это повышает безопасность сайта, сохраняя при этом ключевые варианты использования. Например:

  • Если вы предоставляете услугу во всплывающем окне, установка Cross-Origin-Opener-Policy: restrict-properties защитит вас от ряда атак с межсайтовыми утечками. Вы по-прежнему можете открывать все страницы, которые могли открыть ранее.
  • Если вам нужен доступ к всплывающему окну из разных источников, установка Cross-Origin-Opener-Policy: restrict-properties аналогичным образом защитит ваш сайт от подсчета iframe. Вы сможете открывать тот же набор всплывающих окон, что и сегодня.
  • Если и открывающий, и открывающий объект устанавливают заголовок, а страницы имеют перекрестное происхождение, это ведет себя аналогично тому, как если бы один из них установил заголовок. Если они одного происхождения, предоставляется полный доступ.

Сделайте свой сайт изолированным от перекрестного происхождения

Зачем нам нужна изоляция между источниками

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

До сих пор, чтобы использовать эти API, вам нужно было установить Cross-Origin-Opener-Policy: same-origin . Однако это нарушит любой поток всплывающих окон из разных источников, который может вам понадобиться, например, единый вход и платежи.

Cross-Origin-Opener-Policy: restrict-properties теперь можно использовать вместо Cross-Origin-Opener-Policy: same-origin чтобы включить изоляцию между источниками. Вместо разрыва отношения открытия он просто ограничивает его минимальным подмножеством коммуникаций window.postMessage() и window.closed .

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

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

или

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Узнайте больше о credentialless в разделе Загрузка ресурсов из разных источников без заголовков CORP с помощью COEP: credentialless .

Демо

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

Поэкспериментируйте с исходной пробной версией

Чтобы поэкспериментировать с Cross-Origin-Opener-Policy: restrict-properties , выберите пробную версию Origin .

Поддержка браузера

Cross-Origin-Opener-Policy: restrict-properties в настоящее время поддерживаются только в Chrome. Другие браузеры активно участвуют в обсуждении стандартизации .

Часто задаваемые вопросы

Мой веб-сайт должен взаимодействовать с всплывающими окнами одного и того же происхождения. Должен ли я использовать COOP: restrict-properties чтобы включить изоляцию между источниками?

Установка COOP: restrict-properties как во всплывающем окне, так и на главной странице не приведет к ограничениям. Установка его только во всплывающем окне или только на главной странице предотвратит любой доступ к свойствам, кроме postMessage , и closed в открывающем окне, даже если они имеют одно и то же происхождение.

Фиксирован ли набор разрешенных свойств?

Судя по полученным отзывам, window.postMessage и window.closed предположительно достаточны для большинства рабочих процессов, но мы все еще рассматриваем возможность открытия их для других свойств. Если у вас есть вариант использования, который невозможно решить, используя только postMessage и closed оставьте свой отзыв в ветке Intent to Experiment .

Ресурсы