Cửa sổ bật lên được phân vùng: một phương pháp mới cho cửa sổ bật lên trên web trong Bản dùng thử dành cho nhà phát triển

Natalia Markoborodova

Từ Chrome 132, nhà phát triển có thể tham gia Thử nghiệm dành cho nhà phát triển đối với một phương pháp mới về cửa sổ bật lên trên web: Partitioned Popins. Chương trình dùng thử dành cho nhà phát triển này chỉ có trên máy tính và tính năng này chưa có trên Android.

Pop-in được phân vùng là một loại cửa sổ bật lên mới được thiết kế cho các hoạt động tương tác ngắn hạn, chẳng hạn như đăng nhập hoặc xác nhận nhanh. Trình xem này tải nội dung trên web bằng 2 tính năng riêng biệt:

• Bộ nhớ được phân vùng theo người mở
• Giao diện người dùng tương tự như phương thức

Tại sao chúng ta cần các pop-in được phân vùng?

Pop-in được phân vùng được thiết kế để duy trì các thuộc tính về quyền riêng tư của iframe được phân vùng và các thuộc tính bảo mật của cửa sổ bật lên.

Khi ngày càng có nhiều người dùng chọn duyệt web mà không dùng cookie của bên thứ ba, những luồng dựa vào việc lưu trữ dữ liệu trong một cửa sổ bật lên để truy xuất trong bối cảnh của bên thứ ba sau này (ví dụ: để duy trì phiên người dùng trên các trang web) có thể bị gián đoạn. Các pop-in được phân vùng nhằm giải quyết vấn đề này.

Cửa sổ bật lên được phân vùng hoạt động như thế nào?

Bộ nhớ của mỗi cửa sổ bật lên được phân vùng sẽ được phân vùng cho trình mở của cửa sổ đó. Việc phân vùng bộ nhớ hạn chế quyền truy cập vào dữ liệu trên nhiều trang web, giảm thiểu rủi ro theo dõi và các cuộc tấn công chèn tập lệnh. Tìm hiểu cách phân vùng bộ nhớ hoạt động trong tài liệu của chúng tôi.

Hãy xem xét một trang web opener.example nhúng nội dung từ third-party.example. Để hiển thị nội dung được cá nhân hoá trên opener.example, người dùng cần đăng nhập trên third-party.example. Khi cookie của bên thứ ba bị chặn trong trình duyệt của người dùng, quy trình bật lên hiện tại sẽ như sau:

1. Người dùng nhấp vào nút đăng nhập.
2. Một hộp thoại sẽ mở ra.
3. Người dùng đăng nhập từ ngữ cảnh cấp cao nhất của third-party.example và một cookie xác thực không được phân vùng sẽ được ghi.
4. Nội dung third-party.example được nhúng trên opener.example không có quyền truy cập vào cookie cấp cao nhất của riêng nội dung đó được ghi trên third-party.example khi nội dung đó xuất hiện trong bối cảnh bên thứ nhất. Điều này xảy ra vì cookie xác thực không được phân vùng và do đó là cookie của bên thứ ba.

Bộ nhớ của một popin được phân vùng sẽ được phân vùng cho trình mở. Điều này sẽ thay đổi các bước 3-4 của quy trình:

1. Người dùng đăng nhập từ ngữ cảnh cấp cao nhất của third-party.example. Vì được mở trong một popin được phân vùng, nên bộ nhớ được phân vùng theo opener.example.

2. Nội dung third-party.example được nhúng trên opener.example có quyền truy cập vào cookie riêng được đặt trong cửa sổ bật lên, vì chúng dùng chung cùng một bộ nhớ được phân vùng.

Giao diện người dùng tương tự như phương thức tương đối với thẻ mở

Cửa sổ bật lên được phân vùng nhằm giúp người dùng hiểu rằng cửa sổ mở và cửa sổ bật lên có liên quan với nhau:

• Khi người dùng chuyển sang một thẻ khác, cửa sổ bật lên sẽ tự động trở nên không nhìn thấy được và không truy cập được, giống như cách một cửa sổ phương thức chỉ hiển thị khi thẻ mở đang hoạt động.
• Khi người dùng quay lại thẻ trình mở, cửa sổ pop-in sẽ xuất hiện lại.
• Người dùng không thể thay đổi nội dung trong thanh địa chỉ của trình duyệt trong cửa sổ bật lên.

Dùng thử

Chrome 132 sẽ ra mắt Bản dùng thử dành cho nhà phát triển cho tính năng Partitioned Popins. Điều này có nghĩa là tính năng này sẽ có sẵn sau một cờ. Sau đây là cách bạn có thể thử pop-in được phân vùng:

1. Đảm bảo bạn đang dùng Chrome 132 trở lên.
2. Chuyển đến chrome://flags#partitioned-popins rồi bật cờ tính năng.
3. Khởi động lại Chrome.
4. Hãy dùng thử bản minh hoạ của chúng tôi.

Sử dụng pop-in được phân vùng trên trang web của bạn

Để sử dụng một popin được phân vùng trên trang web của bạn, hãy gọi phương thức window.open() với tham số popin được truyền:

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

Chia sẻ ý kiến phản hồi của bạn

Chúng tôi đang khám phá các cửa sổ bật lên được phân vùng và tìm kiếm ý kiến phản hồi của nhà phát triển. Sau đây là một số trường hợp sử dụng tiềm năng:

• Quy trình xác thực người dùng. Nếu bạn đã triển khai một quy trình xác thực tuỳ chỉnh và quá trình xác thực diễn ra trên một miền khác với trang web của bạn (ví dụ: người dùng site.example đăng nhập trên auth-site.example), hãy thử mở trang xác thực trong một cửa sổ bật lên để sử dụng cookie phiên trên trang mở.
• Nội dung được nhúng. Hãy thử sử dụng popin được phân vùng để hiển thị nội dung bổ sung từ một tiện ích của bên thứ ba, chẳng hạn như hộp thoại cài đặt, hình ảnh hoặc tệp PDF (hoặc nội dung khác thường được tải trong cửa sổ bật lên), được kết xuất trong một cửa sổ lớn hơn. Trong trường hợp này, các pop-in được phân vùng nhằm duy trì trạng thái phiên hoạt động của người dùng giữa tiện ích của bên thứ ba và trang web của bạn.

Nếu bạn có bất kỳ trường hợp nào trong số này trong các giải pháp của mình, hãy cân nhắc các trường hợp sử dụng khác hoặc muốn giúp định hình tương lai của tính năng này, hãy dùng thử và cho chúng tôi biết:

• Bạn có gặp phải vấn đề nào không?
• Bạn có đề xuất nào để cải thiện trải nghiệm người dùng không?
• Bạn có đề xuất nào để cải thiện giao diện người dùng không? Cụ thể, bạn có thấy rằng giao diện người dùng cho biết rõ ràng rằng cửa sổ mở và cửa sổ bật lên có liên quan với nhau không?
• Bạn thấy tính năng này hữu ích đến mức nào?
• Bạn có muốn sử dụng cửa sổ bật lên được phân vùng cho các trường hợp sử dụng khác không?

Gửi vấn đề trên GitHub để chia sẻ ý kiến của bạn.