Partycjonowane okienka: nowe podejście do okienek w przeglądarce w wersji próbnej dla deweloperów

Natalia Markoborodova

Od Chrome 132 deweloperzy mogą wziąć udział w testach deweloperskich nowego podejścia do wyskakujących okien w internecie: podzielonych wyskakujących okien. Wersja próbna dla deweloperów jest dostępna tylko na komputerach, a funkcja nie jest jeszcze dostępna na urządzeniach z Androidem.

Podzielone wyskakujące okienko to nowy rodzaj wyskakującego okienka przeznaczony do krótkotrwałych interakcji, takich jak logowanie lub szybkie potwierdzenia. Wczytuje treści internetowe z 2 unikalnymi funkcjami:

• Miejsce na dane podzielone według otwierającego
• Interfejs podobny do okna modalnego

Dlaczego potrzebujemy podzielonych wyskakujących okienek?

Wyskakujące okienka z podziałem na partycje zostały zaprojektowane tak, aby zachować właściwości prywatności ramki iframe z podziałem na partycje i właściwości bezpieczeństwa wyskakujących okienek.

Większa liczba użytkowników, którzy zdecydują się na przeglądanie bez plików cookie innych firm, może spowodować zakłócenia w przepływach opartych na przechowywaniu danych w wyskakującym okienku w celu późniejszego pobrania ich w kontekście innej firmy (np. w celu utrzymania sesji użytkownika w różnych witrynach). Partycjonowane wyskakujące okienka mają rozwiązać ten problem.

Jak działają podzielone wyskakujące okienka?

Miejsce na dane każdego podzielonego wyskakującego okienka jest podzielone na partycje dla otwierającego. Partycjonowanie pamięci ogranicza dostęp do danych z różnych witryn, co zmniejsza ryzyko śledzenia i ataków polegających na wstrzykiwaniu skryptów. Więcej informacji o podziale miejsca na dane znajdziesz w naszej dokumentacji.

Rozważmy opener.examplewitrynę, która osadza treści z third-party.example. Aby wyświetlać spersonalizowane treści na opener.example, użytkownik musi zalogować się na third-party.example. Gdy pliki cookie innych firm są blokowane w przeglądarce użytkownika, bieżący proces wyświetlania wyskakującego okienka wygląda tak:

1. Użytkownik klika przycisk logowania.
2. Otworzy się okno.
3. Użytkownik loguje się w kontekście najwyższego poziomu third-party.example i zapisywany jest niepodzielony plik cookie uwierzytelniania.
4. Treści third-party.example umieszczone na stronie opener.example nie mają dostępu do własnych plików cookie najwyższego poziomu zapisanych na stronie third-party.example, gdy są wyświetlane w kontekście własnym. Dzieje się tak, ponieważ plik cookie uwierzytelniania nie jest podzielony na partycje, a więc jest plikiem cookie innej firmy.

Pamięć podzielonego okienka pop-in jest podzielona na potrzeby otwierającego. Zmienia to kroki 3–4 w procesach:

1. Użytkownik loguje się w kontekście najwyższego poziomu third-party.example. Ponieważ jest otwierana w wyskakującym okienku z podziałem na partycje, pamięć jest dzielona na partycje według opener.example.

2. Treści third-party.example osadzone w opener.example mają dostęp do własnego pliku cookie ustawionego w wyskakującym okienku, ponieważ korzystają z tego samego podzielonego miejsca na dane.

Interfejs podobny do okna modalnego względem karty otwierającej

Podzielone wyskakujące okienka mają pomóc użytkownikowi zrozumieć, że strona otwierająca i wyskakujące okienko są ze sobą powiązane:

• Gdy użytkownik przełączy się na inną kartę, wyskakujące okienko automatycznie stanie się niewidoczne i niedostępne, tak jak okno modalne jest widoczne tylko wtedy, gdy aktywna jest karta otwierająca.
• Gdy użytkownik wróci na kartę otwierającą, ponownie wyświetli się wyskakujące okienko.
• Użytkownik nie może wprowadzać zmian na pasku adresu przeglądarki w wyskakującym okienku.

Wypróbuj

W Chrome 132 wprowadzamy wersję próbną dla deweloperów funkcji podzielonych wyskakujących okienek. Oznacza to, że funkcja będzie dostępna za flagą. Oto jak możesz wypróbować podzielone wyskakujące okienka:

1. Upewnij się, że używasz Chrome w wersji 132 lub nowszej.
2. Przejdź do chrome://flags#partitioned-popins i włącz flagę funkcji.
3. Uruchom ponownie Chrome.
4. Wypróbuj naszą wersję demonstracyjną.

Używanie w witrynie wyskakujących okienek z podziałem na sekcje

Aby użyć w witrynie podzielonego wyskakującego okienka, wywołaj metodę window.open() z przekazanym parametrem popin:

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

Prześlij opinię

Testujemy podzielone wyskakujące okienka i czekamy na opinie deweloperów. Oto kilka potencjalnych scenariuszy użycia:

• Proces uwierzytelniania użytkownika. Jeśli masz wdrożony niestandardowy proces uwierzytelniania, a uwierzytelnianie odbywa się w innej domenie niż Twoja witryna (np. site.example użytkownicy logują się na stronie auth-site.example), spróbuj otworzyć stronę uwierzytelniania w wyskakującym okienku, aby użyć pliku cookie sesji na stronie otwierającej.
• Umieszczone treści Wypróbuj podzielone wyskakujące okienka, aby wyświetlać dodatkowe treści z widżetu innej firmy, takie jak okno dialogowe ustawień, obraz lub plik PDF (lub inne treści, które zwykle są wczytywane w wyskakującym okienku), renderowane w większym oknie. W tym przypadku podzielone wyskakujące okienka mają na celu zachowanie stanu sesji użytkownika między widżetem innej firmy a Twoją witryną.

Jeśli w swoich rozwiązaniach masz takie scenariusze, znasz inne przypadki użycia lub chcesz pomóc w kształtowaniu przyszłości tej funkcji, wypróbuj ją i daj nam znać:

• Czy wystąpiły jakieś problemy?
• Czy masz jakieś sugestie dotyczące poprawy komfortu użytkowników?
• Masz jakieś sugestie dotyczące lepszego interfejsu? Czy interfejs wyraźnie wskazuje, że strona otwierająca i wyskakujące okienko są ze sobą powiązane?
• Na ile przydatna jest dla Ciebie ta funkcja?
• Czy są inne zastosowania, w których chcesz używać podzielonych wyskakujących okienek?

Aby podzielić się swoimi przemyśleniami, zgłoś problem na GitHubie.