หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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 ให้เลือกช่วงทดลองใช้ต้นทาง

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

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

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

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

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

ชุดพร็อพเพอร์ตี้ที่อนุญาตเป็นแบบคงที่หรือไม่

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