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

Natalia Markoborodova

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

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

• Хранилище, разделенное открывателем
• Модальный пользовательский интерфейс

Зачем нам нужны разделенные попины?

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

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

Как работают разделенные попины?

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

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

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

Хранилище секционированного popin'а секционируется для opener'а. Это изменяет шаги 3-4 потоков:

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

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

Модально-подобный пользовательский интерфейс относительно его открывающей вкладки

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

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

Попробуйте это

Chrome 132 представляет пробную версию Developer Trial для функции Partitioned Popins. Это означает, что функция будет доступна за флагом. Вот как можно попробовать partitioned popins:

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

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

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

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

Поделитесь своим отзывом

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

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

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

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

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