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

Natalia Markoborodova

Начиная с Chrome 132, разработчики могут принять участие в пробном запуске новой функции всплывающих окон в веб-интерфейсе: разделённых всплывающих окон (Partitioned Popins). Эта пробная версия доступна только для настольных компьютеров, и функция пока недоступна для Android.

Разделенное всплывающее окно — это новый тип всплывающих окон, предназначенный для кратковременных взаимодействий, таких как вход в систему или быстрое подтверждение. Оно загружает веб-контент с двумя уникальными функциями:

• Хранилище разделено по типу открывателя.
• Пользовательский интерфейс в виде модального окна

Зачем нам нужны всплывающие подсказки с разделением по разделам?

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

Поскольку все больше пользователей предпочитают просматривать сайты без использования сторонних файлов cookie, процессы, основанные на хранении данных во всплывающем окне для последующего получения в контексте стороннего сервиса (например, для поддержания пользовательской сессии на разных сайтах), могут быть нарушены. Разделенные всплывающие окна призваны решить эту проблему.

Как работают всплывающие окна с разделением экрана?

Для каждого разделенного на разделы хранилища popin, доступ к ним осуществляется через его открывающий сервер. Разделение хранилища ограничивает доступ к данным между сайтами, снижая риски отслеживания и атаки с внедрением скриптов. Узнайте, как работает разделение хранилища, в нашей документации .

Рассмотрим веб-сайт opener.example , который встраивает контент с third-party.example . Для отображения персонализированного контента на opener.example пользователю необходимо войти в систему на third-party.example . Когда сторонние файлы cookie заблокированы в браузере пользователя, текущий процесс всплывающего окна выглядит следующим образом:

1. Пользователь нажимает кнопку входа в систему.
2. Открывается диалоговое окно.
3. Пользователь входит в систему из контекста верхнего уровня third-party.example , и записывается неразделённый аутентификационный cookie.
4. Встроенный в opener.example контент third-party.example не имеет доступа к собственным куки верхнего уровня, записанным в third-party.example при его представлении в контексте первого лица. Это происходит потому, что аутентификационный куки не разделен на разделы и, следовательно, является куки третьего лица.

Хранилище для разделенного всплывающего окна распределяется между открывающим окно. Это изменяет шаги 3-4 потока:

1. Пользователь входит в систему из контекста верхнего уровня third-party.example . Поскольку приложение открыто в секционированном popin-файле, хранилище разделяется по opener.example .

2. Встроенный в opener.example контент third-party.example имеет доступ к собственному cookie-файлу, установленному во всплывающем окне, поскольку они используют одно и то же разделенное хранилище.

Интерфейс, похожий на модальное окно, относительно открывающей его вкладки.

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

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

Попробуйте!

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

1. Убедитесь, что вы используете Chrome версии 132 или более поздней.
2. Перейдите по адресу chrome://flags#partitioned-popins и включите флаг функции.
3. Перезапустите Chrome.
4. Попробуйте нашу демо-версию .

Используйте всплывающие окна с разделителями на вашем сайте.

Чтобы использовать всплывающее окно с разделением на вашем веб-сайте, вызовите метод window.open() и передайте в качестве параметра popin :

window.open("third-party-popin.example", "_blank", "popin");

Поделитесь своим мнением.

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

• Процесс аутентификации пользователя . Если у вас реализован собственный процесс аутентификации, и аутентификация происходит на другом домене, отличном от вашего сайта (например, пользователи site.example входят в систему на auth-site.example ), попробуйте открыть страницу аутентификации во всплывающем окне, чтобы использовать cookie-файл сессии на странице, открывающей страницу.
• Встроенный контент. Попробуйте использовать разделенные всплывающие окна для отображения дополнительного контента из стороннего виджета, например, диалогового окна настроек, изображения или PDF-файла (или другого контента, обычно загружаемого во всплывающем окне), в большем окне. В этом случае разделенные всплывающие окна стремятся сохранить состояние пользовательской сессии между сторонним виджетом и вашим сайтом.

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

• Возникли ли у вас какие-либо проблемы?
• Есть ли у вас какие-либо предложения по улучшению пользовательского опыта?
• Есть ли у вас какие-либо предложения по улучшению пользовательского интерфейса? В частности, считаете ли вы, что интерфейс четко указывает на взаимосвязь между открывающим окном и всплывающим окном?
• Насколько полезной вы считаете эту функцию?
• Есть ли другие варианты использования, для которых вы хотели бы применять всплывающие окна с разделением по разделам?

Создайте заявку на GitHub , чтобы поделиться своими мыслями.