Начиная с Chrome 132, разработчики могут принять участие в пробной версии для разработчиков нового подхода к всплывающим окнам в Интернете: разделенных всплывающих окон. Эта пробная версия для разработчиков доступна только для настольных компьютеров, а на Android эта функция пока недоступна.
Разделенное всплывающее окно — это новый тип всплывающего окна, предназначенный для кратковременных взаимодействий, таких как вход в систему или быстрое подтверждение. Он загружает веб-контент с двумя уникальными функциями:
Зачем нам нужны секционированные попины?
Разделенные всплывающие окна предназначены для сохранения свойств конфиденциальности разделенного iframe и свойств безопасности всплывающих окон.
Поскольку все больше пользователей выбирают просмотр без сторонних файлов cookie, потоки, которые полагаются на сохранение данных во всплывающем окне для последующего извлечения в стороннем контексте (например, для поддержания сеанса пользователя на разных сайтах), могут быть нарушены. Разделенные попины призваны решить эту проблему.
Как работают разделенные попины?
Хранилище каждого секционированного попина разделено на его открыватель. Разделение хранилища ограничивает доступ к межсайтовым данным, снижая риски отслеживания и атаки путем внедрения сценариев. Узнайте, как работает разделение хранилища, в нашей документации .
Рассмотрим веб-сайт opener.example , в который встраивается контент из third-party.example . Чтобы отображать персонализированный контент на opener.example , пользователю необходимо войти в систему на third-party.example . Когда сторонние файлы cookie блокируются в браузере пользователя, текущий порядок всплывающих окон выглядит следующим образом:
- Пользователь нажимает кнопку входа.
- Откроется диалоговое окно.
- Пользователь входит в систему из контекста верхнего уровня
third-party.example, и записывается неразделенный файл cookie аутентификации. - Содержимое
third-party.example, встроенное вopener.exampleне имеет доступа к собственным файлам cookie верхнего уровня, записанным вthird-party.example, когда оно было представлено в собственном контексте. Это происходит потому, что файл cookie аутентификации не разделен и, следовательно, является сторонним файлом cookie.
third-party.example , встроенный в opener.example , не имеет доступа к собственному неразделенному набору файлов cookie в контексте верхнего уровня всплывающего окна third-party.example .Хранилище разделенного попина разделено на открыватель. Это меняет шаги 3-4 потоков:
Пользователь входит в систему из контекста верхнего уровня
third-party.example. Поскольку оно открыто в секционированном всплывающем окне, хранилище разделеноopener.example.Содержимое
third-party.exampleвстроенное вopener.exampleимеет доступ к собственному файлу cookie, установленному во всплывающем окне, поскольку они используют одно и то же секционированное хранилище.
third-party.example , встроенный в opener.example имеет доступ к собственному секционированному набору файлов cookie в контексте верхнего уровня всплывающего окна third-party.example , поскольку файл cookie секционируется opener.example .Модальный пользовательский интерфейс относительно начальной вкладки
Разделенные попины призваны помочь пользователю понять, что открывающий элемент и попин связаны между собой:
- Когда пользователь переключается на другую вкладку, всплывающее окно автоматически становится невидимым и недоступным, точно так же, как модальное окно видно только тогда, когда активна открывающая вкладка.
- Когда пользователь возвращается на вкладку открытия, всплывающее окно отображается снова.
- Пользователь не может вносить изменения в адресную строку браузера попина.
Попробуйте это
В Chrome 132 представлена пробная версия для разработчиков функции Partitioned Popins. Это означает, что функция будет доступна под флагом. Вот как вы можете попробовать секционированные попины:
- Убедитесь, что вы используете Chrome 132 или новее.
- Перейдите по адресу
chrome://flags#partitioned-popinsи включите флаг функции. - Перезапустите Хром.
- Попробуйте нашу демо-версию .
Используйте секционированные всплывающие окна на своем веб-сайте
Чтобы использовать секционированный всплывающий элемент на своем веб-сайте, вызовите метод window.open() с переданным параметром popin :
window.open("third-party-popin.example", "_blank", "popin");
Поделитесь своим отзывом
Мы изучаем секционированные всплывающие окна и ждем отзывов разработчиков. Вот несколько потенциальных сценариев использования:
- Процесс аутентификации пользователя . Если у вас реализован собственный поток аутентификации, и аутентификация происходит в домене, отличном от вашего сайта (например, пользователи
site.exampleвходят в систему черезauth-site.example), попробуйте открыть страницу аутентификации в всплывающем окне, чтобы использовать сеанс. cookie на первой странице. - Встроенный контент. Попробуйте секционированные всплывающие окна, чтобы отображать дополнительный контент из стороннего виджета, например диалоговое окно настроек, изображение или PDF-файл (или другой контент, который обычно загружается во всплывающем окне), отображаемый в большем окне. В этом случае секционированные всплывающие окна предназначены для сохранения состояния пользовательского сеанса между сторонним виджетом и вашим сайтом.
Если в ваших решениях есть какой-либо из этих сценариев, вы имеете в виду другие варианты использования или хотите помочь сформировать будущее этой функции, попробуйте ее и сообщите нам:
- Возникли ли у вас какие-либо проблемы?
- Есть ли у вас какие-либо предложения по улучшению пользовательского опыта?
- Есть ли у вас какие-либо предложения по улучшению пользовательского интерфейса? В частности, считаете ли вы, что пользовательский интерфейс четко указывает на то, что открыватель и всплывающее окно связаны между собой?
- Насколько полезной вы считаете эту функцию?
- Есть ли другие варианты использования, для которых вы хотели бы использовать секционированные всплывающие окна?
Сообщите о проблеме на GitHub, чтобы поделиться своими мыслями.