ป๊อปอัปที่มีการแบ่งพาร์ติชัน: แนวทางใหม่สำหรับป๊อปอัปบนเว็บในเวอร์ชันทดลองสำหรับนักพัฒนาซอฟต์แวร์

Natalia Markoborodova

ตั้งแต่ Chrome 132 เป็นต้นไป นักพัฒนาซอฟต์แวร์สามารถเข้าร่วมช่วงทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์เพื่อทดลองใช้แนวทางใหม่สำหรับป๊อปอัปบนเว็บที่เรียกว่าป๊อปอินที่แบ่งพาร์ติชัน การทดลองใช้สำหรับนักพัฒนาแอปนี้ใช้ได้เฉพาะบนเดสก์ท็อป และฟีเจอร์นี้ยังไม่พร้อมให้บริการบน Android

ป๊อปอินที่แบ่งพาร์ติชันเป็นป๊อปอัปประเภทใหม่ ที่ออกแบบมาสำหรับการโต้ตอบระยะสั้น เช่น การเข้าสู่ระบบหรือการยืนยันอย่างรวดเร็ว โดยจะโหลดเนื้อหาเว็บด้วยฟีเจอร์ที่ไม่เหมือนใคร 2 อย่างดังนี้

• การแบ่งพาร์ติชันพื้นที่เก็บข้อมูลตามผู้เปิด
• UI ที่คล้ายกับโมดอล

เหตุใดเราจึงต้องใช้ป๊อปอินที่แบ่งพาร์ติชัน

ป๊อปอินที่แบ่งพาร์ติชันออกแบบมาเพื่อรักษาคุณสมบัติด้านความเป็นส่วนตัวของ iframe ที่แบ่งพาร์ติชันและคุณสมบัติด้านความปลอดภัยของป๊อปอัป

เมื่อมีผู้ใช้เลือกใช้การท่องเว็บโดยไม่ใช้คุกกี้ของบุคคลที่สามมากขึ้น โฟลว์ที่อาศัย การจัดเก็บข้อมูลในป๊อปอัปเพื่อดึงข้อมูลในบริบทของบุคคลที่สามในภายหลัง (เช่น เพื่อรักษาเซสชันของผู้ใช้ในเว็บไซต์ต่างๆ) อาจหยุดชะงัก Pop-in ที่แบ่งพาร์ติชัน มีจุดมุ่งหมายเพื่อแก้ไขปัญหานี้

ป๊อปอินที่แบ่งพาร์ติชันทำงานอย่างไร

ระบบจะแบ่งพาร์ติชันพื้นที่เก็บข้อมูลของป๊อปอินที่แบ่งพาร์ติชันแต่ละรายการไปยังหน้าต่างที่เปิด การแบ่งพาร์ติชันพื้นที่เก็บข้อมูลจะจำกัดการเข้าถึงข้อมูลข้ามเว็บไซต์ ซึ่งจะช่วยลดความเสี่ยงในการติดตามและการโจมตีด้วยการแทรกสคริปต์ ดูวิธีการทำงานของการแบ่งพาร์ติชันพื้นที่เก็บข้อมูลได้ในเอกสารประกอบ

พิจารณาopener.exampleเว็บไซต์ที่ฝังเนื้อหาจาก third-party.example หากต้องการแสดงเนื้อหาที่ปรับเปลี่ยนในแบบของคุณใน opener.example ผู้ใช้ต้องลงชื่อเข้าใช้ใน third-party.example เมื่อมีการบล็อกคุกกี้ของบุคคลที่สามในเบราว์เซอร์ของผู้ใช้ โฟลว์ป๊อปอัปปัจจุบันจะเป็นดังนี้

1. ผู้ใช้คลิกปุ่มเข้าสู่ระบบ
2. กล่องโต้ตอบจะเปิดขึ้น
3. ผู้ใช้เข้าสู่ระบบจากบริบทระดับบนสุดของ third-party.example และมีการเขียนคุกกี้การตรวจสอบสิทธิ์ที่ไม่ได้แบ่งพาร์ติชัน
4. third-party.example เนื้อหาที่ฝังอยู่ใน opener.example จะไม่มีสิทธิ์เข้าถึงคุกกี้ระดับบนสุดของตัวเองที่เขียนใน third-party.example เมื่อแสดงในบริบทของบุคคลที่หนึ่ง กรณีนี้เกิดขึ้นเนื่องจากคุกกี้ยืนยันตัวตนไม่ได้แบ่งพาร์ติชัน จึงเป็นคุกกี้ของบุคคลที่สาม

ระบบจะแบ่งพาร์ติชันพื้นที่เก็บข้อมูลของป๊อปอินที่แบ่งพาร์ติชันไปยังหน้าต่างที่เปิด ซึ่งจะเปลี่ยน ขั้นตอนที่ 3-4 ของโฟลว์ ดังนี้

1. ผู้ใช้เข้าสู่ระบบจากบริบทระดับบนสุดของ third-party.example เนื่องจาก เปิดในป๊อปอินที่แบ่งพาร์ติชัน ระบบจึงแบ่งพาร์ติชันพื้นที่เก็บข้อมูลตาม opener.example

2. third-party.example เนื้อหาที่ฝังใน opener.example มีสิทธิ์เข้าถึงคุกกี้ของตัวเองที่ตั้งค่าไว้ในป๊อปอิน เนื่องจากทั้ง 2 อย่างใช้พื้นที่เก็บข้อมูลที่แบ่งพาร์ติชันเดียวกัน

UI ที่คล้ายกับโมดอลที่สัมพันธ์กับแท็บที่เปิด

ป๊อปอินที่แบ่งพาร์ติชันมีจุดมุ่งหมายเพื่อช่วยให้ผู้ใช้เข้าใจว่าหน้าต่างที่เปิดและป๊อปอิน มีความเกี่ยวข้อง

• เมื่อผู้ใช้เปลี่ยนไปใช้แท็บอื่น ป๊อปอินจะกลายเป็น มองไม่เห็นและเข้าถึงไม่ได้โดยอัตโนมัติ เช่นเดียวกับที่โมดอลจะมองเห็นได้เมื่อ แท็บที่เปิดอยู่ทำงานเท่านั้น
• เมื่อผู้ใช้กลับไปที่แท็บที่เปิด ป๊อปอินจะแสดงอีกครั้ง
• ผู้ใช้จะทำการเปลี่ยนแปลงในแถบที่อยู่ของเบราว์เซอร์ของป๊อปอินไม่ได้

ลองเลย

Chrome 132 ขอแนะนำการทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์สำหรับฟีเจอร์ป๊อปอินที่แบ่งพาร์ติชัน ซึ่งหมายความว่า ฟีเจอร์นี้จะพร้อมใช้งานหลัง Flag วิธีลองใช้ป๊อปอินที่แบ่งพาร์ติชันมีดังนี้

1. ตรวจสอบว่าคุณใช้ Chrome 132 ขึ้นไป
2. ไปที่ chrome://flags#partitioned-popins แล้วเปิดใช้ฟีเจอร์ Flag
3. รีสตาร์ท Chrome
4. ลองใช้เดโมของเรา

ใช้ป๊อปอินที่แบ่งพาร์ติชันในเว็บไซต์

หากต้องการใช้ป๊อปอินที่แบ่งพาร์ติชันในเว็บไซต์ ให้เรียกใช้เมธอด window.open() โดยส่งพารามิเตอร์ popin

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

แชร์ความคิดเห็น

เรากำลังสำรวจป๊อปอินที่แบ่งพาร์ติชันและมองหาความคิดเห็นจากนักพัฒนาแอป ตัวอย่างสถานการณ์จำลองกรณีการใช้งานที่เป็นไปได้มีดังนี้

• ขั้นตอนการตรวจสอบสิทธิ์ของผู้ใช้ หากคุณใช้โฟลว์การตรวจสอบสิทธิ์ที่กําหนดเอง และมีการตรวจสอบสิทธิ์ในโดเมนอื่นที่ไม่ใช่เว็บไซต์ของคุณ (เช่น site.example ผู้ใช้ลงชื่อเข้าใช้ใน auth-site.example) ให้ลอง เปิดหน้าการตรวจสอบสิทธิ์ในป๊อปอินเพื่อใช้คุกกี้เซสชันในหน้าเปิด
• เนื้อหาที่ฝัง ลองใช้ป๊อปอินที่แบ่งพาร์ติชันเพื่อแสดงเนื้อหาเพิ่มเติม จากวิดเจ็ตของบุคคลที่สาม เช่น กล่องโต้ตอบการตั้งค่า รูปภาพ หรือ PDF (หรือ เนื้อหาอื่นๆ ที่มักจะโหลดในป๊อปอัป) ซึ่งแสดงในหน้าต่างที่ใหญ่ขึ้น ในกรณีนี้ ป๊อปอินที่แบ่งพาร์ติชันมีจุดมุ่งหมายเพื่อรักษาสถานะเซสชันของผู้ใช้ ระหว่างวิดเจ็ตของบุคคลที่สามกับเว็บไซต์ของคุณ

หากคุณมีสถานการณ์เหล่านี้ในโซลูชัน มีกรณีการใช้งานอื่นๆ ในใจ หรือต้องการช่วยกำหนดอนาคตของฟีเจอร์นี้ โปรดลองใช้และแจ้งให้เราทราบ

• คุณพบปัญหาไหม
• คุณมีคำแนะนำใดๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้นไหม
• คุณมีคำแนะนำในการปรับปรุง UI ไหม กล่าวโดยละเอียดคือ คุณคิดว่า UI ระบุอย่างชัดเจนว่าหน้าต่างที่เปิดและป๊อปอินมีความเกี่ยวข้องหรือไม่
• คุณคิดว่าฟีเจอร์นี้มีประโยชน์มากน้อยเพียงใด
• มีกรณีการใช้งานอื่นๆ ที่คุณต้องการใช้ป๊อปอินที่แบ่งพาร์ติชันไหม

แจ้งปัญหาใน GitHub เพื่อแชร์ความคิดเห็น