รักษาความปลอดภัยให้การโต้ตอบกับป๊อปอัปด้วยพร็อพเพอร์ตี้แบบจำกัด

รับการแยกต้นทางแบบข้ามต้นทางและการป้องกันการรั่วไหลข้ามเว็บไซต์ขณะโต้ตอบกับป๊อปอัป

Arthur Hemery

Maud Nalpas

ค่าใหม่สำหรับนโยบายเครื่องมือเปิดแบบข้ามต้นทาง (COOP) พร้อมใช้งานแล้ว: restrict-properties ซึ่งจะช่วยเพิ่มประโยชน์ด้านความปลอดภัยและทำให้การใช้การแยกต้นทางข้ามง่ายขึ้น พร้อมทั้งอนุญาตให้เว็บไซต์โต้ตอบกับป๊อปอัปของบุคคลที่สามสำหรับการชำระเงิน การตรวจสอบสิทธิ์ หรือกรณีการใช้งานอื่นๆ

หากต้องการเริ่มทดสอบ restrict-properties ให้เข้าร่วมช่วงทดลองใช้จากต้นทางซึ่งจะเริ่มใน Chrome 116

เหตุผลที่ควรใช้ `restrict-properties`

restrict-properties มีกรณีการใช้งานหลัก 2 กรณีดังนี้

การป้องกันการรั่วไหลข้ามเว็บไซต์โดยไม่ทำให้เกิดการหยุดทำงาน
การทำให้เว็บไซต์มีการแยกแบบข้ามต้นทาง

ป้องกันการรั่วไหลข้ามเว็บไซต์โดยไม่ทำให้เกิดข้อขัดข้อง

โดยค่าเริ่มต้นแล้ว เว็บไซต์ใดก็ได้จะเปิดแอปพลิเคชันของคุณในป๊อปอัปและรับ การอ้างอิงถึงแอปพลิเคชันนั้นได้

เว็บไซต์ที่เป็นอันตรายอาจใช้ประโยชน์จากสิ่งนี้เพื่อทำการโจมตี เช่น การรั่วไหลข้ามเว็บไซต์ คุณสามารถใช้ส่วนหัว Cross-Origin-Opener-Policy (COOP) เพื่อลดความเสี่ยงนี้ได้

ก่อนหน้านี้ ตัวเลือกสำหรับ Cross-Origin-Opener-Policy ของคุณมีจำกัด คุณทำอย่างใดอย่างหนึ่งต่อไปนี้ได้

ตั้งค่า same-origin, ซึ่งจะบล็อกการโต้ตอบข้ามต้นทางทั้งหมดกับป๊อปอัป
ตั้งค่า same-origin-allow-popups ซึ่งจะบล็อกการโต้ตอบแบบข้ามต้นทางทั้งหมดที่เปิดเว็บไซต์ของคุณในป๊อปอัป
ตั้งค่า unsafe-none ซึ่งอนุญาตการโต้ตอบแบบข้ามต้นทางทั้งหมดกับป๊อปอัป

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

Cross-Origin-Opener-Policy: restrict-properties จะช่วยแก้ปัญหานี้ได้

เมื่อใช้ restrict-properties คุณจะใช้พร็อพเพอร์ตี้ที่ใช้ในการนับเฟรมและ การโจมตีแบบการรั่วไหลข้ามเว็บไซต์อื่นๆ ไม่ได้ แต่ระบบจะอนุญาตให้มีการสื่อสารพื้นฐานระหว่าง หน้าต่างผ่าน postMessage และ closed

ซึ่งจะช่วยปรับปรุงความปลอดภัยของเว็บไซต์ในขณะที่ยังคงกรณีการใช้งานที่สำคัญไว้ เช่น

หากคุณให้บริการในป๊อปอัป การตั้งค่า Cross-Origin-Opener-Policy: restrict-properties จะช่วยป้องกันการโจมตีแบบการรั่วไหลข้ามเว็บไซต์ได้หลายรูปแบบ คุณยังคงเปิดหน้าเว็บทั้งหมดที่เคยเปิดได้ก่อนหน้านี้
หากต้องการเข้าถึงป๊อปอัปแบบข้ามต้นทาง การตั้งค่า Cross-Origin-Opener-Policy: restrict-properties จะช่วยปกป้อง เว็บไซต์จากการนับ iframe ได้เช่นกัน คุณจะเปิดป๊อปอัปชุดเดียวกันกับที่เปิดได้ในปัจจุบัน
หากทั้งหน้าต่างที่เปิดและหน้าต่างที่ถูกเปิดตั้งค่าส่วนหัว และหน้าเว็บอยู่ต่างโดเมนกัน ลักษณะการทำงานจะคล้ายกับกรณีที่หน้าต่างใดหน้าต่างหนึ่งตั้งค่าส่วนหัว หากเป็นแบบมีต้นทางเดียวกัน ระบบจะให้สิทธิ์เข้าถึงแบบเต็ม

ทำให้เว็บไซต์มีการแยกแบบข้ามต้นทาง

เหตุผลที่เราต้องมีการแยกแบบข้ามต้นทาง

Web API บางรายการเพิ่มความเสี่ยงของการโจมตีแบบช่องทางข้าง เช่น Spectre เบราว์เซอร์จึงมีสภาพแวดล้อมที่แยกกันซึ่งต้องเลือกใช้ที่เรียกว่าการแยกแบบข้ามต้นทางเพื่อลดความเสี่ยงดังกล่าว เมื่ออยู่ในสถานะแยกแบบข้ามต้นทาง หน้าเว็บจะใช้ฟีเจอร์ที่มีสิทธิ์ได้ ซึ่งรวมถึง SharedArrayBuffer, performance.measureUserAgentSpecificMemory() และ ตัวจับเวลาที่มีความแม่นยำสูง ที่มีความละเอียดดีขึ้น ในขณะที่แยกต้นทางออกจากต้นทางอื่นๆ เว้นแต่จะมีการเลือกใช้

ก่อนหน้านี้ หากต้องการใช้ API เหล่านี้ คุณต้องตั้งค่า Cross-Origin-Opener-Policy: same-origin อย่างไรก็ตาม การดำเนินการนี้จะทำให้โฟลว์ป๊อปอัปข้ามต้นทางที่คุณอาจ ต้องใช้ เช่น การลงชื่อเพียงครั้งเดียวและการชำระเงิน ใช้งานไม่ได้

ตอนนี้คุณใช้ Cross-Origin-Opener-Policy: restrict-properties แทน Cross-Origin-Opener-Policy: same-origin เพื่อเปิดใช้การแยกแบบข้ามต้นทางได้แล้ว แทนที่จะตัดความสัมพันธ์ของโอเพนเนอร์ แต่จะจำกัดไว้เฉพาะ ชุดย่อยของการสื่อสารขั้นต่ำของ window.postMessage() และ window.closed

คุณจะเปิดใช้การแยกต้นทางข้ามได้ด้วยส่วนหัว 2 รายการต่อไปนี้

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

หรือ

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

ดูข้อมูลเพิ่มเติมเกี่ยวกับ credentialless ที่ โหลดทรัพยากรข้ามต้นทางโดยไม่มีส่วนหัว CORP โดยใช้ COEP: credentialless

สาธิต

ลองใช้ตัวเลือกส่วนหัวต่างๆ ในการสาธิตการแยกแบบข้ามต้นทางนี้

ทดลองใช้ช่วงทดลองใช้จากต้นทาง

หากต้องการทดลองใช้ Cross-Origin-Opener-Policy: restrict-properties ให้เลือกเข้าร่วมช่วงทดลองใช้จากต้นทาง

การสนับสนุนเบราว์เซอร์

Cross-Origin-Opener-Policy: restrict-properties ปัจจุบันรองรับเฉพาะใน Chrome เบราว์เซอร์อื่นๆ มีส่วนร่วมในการพูดคุยเรื่องการกำหนดมาตรฐาน

คำถามที่พบบ่อย

เว็บไซต์ของฉันต้องสื่อสารกับป๊อปอัปที่มีต้นทางเดียวกัน ฉันควรใช้ `COOP: restrict-properties` เพื่อเปิดใช้การแยกแบบข้ามต้นทางไหม

การตั้งค่า COOP: restrict-properties ทั้งในป๊อปอัปและหน้าหลักจะไม่ทำให้เกิดข้อจำกัด การตั้งค่าเฉพาะในป๊อปอัปหรือเฉพาะในหน้าหลักจะป้องกันการเข้าถึงพร็อพเพอร์ตี้อื่นๆ นอกเหนือจาก postMessage และ closed ในหน้าต่างที่เปิด แม้ว่าจะเป็นต้นทางเดียวกันก็ตาม

ชุดพร็อพเพอร์ตี้ที่อนุญาตมีการเปลี่ยนแปลงไหม

จากความคิดเห็นที่ได้รับจนถึงตอนนี้ เราสงสัยว่า window.postMessage และ window.closed น่าจะเพียงพอสำหรับเวิร์กโฟลว์ส่วนใหญ่ แต่เรายังคงพิจารณาที่จะเปิดให้ใช้กับพร็อพเพอร์ตี้อื่นๆ หากคุณมีกรณีการใช้งานที่แก้ปัญหาไม่ได้โดยใช้เฉพาะ postMessage และ closed โปรดแสดงความคิดเห็นในเธรดความตั้งใจที่จะทดสอบ