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

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

Arthur Hemery
Maud Nalpas
Maud Nalpas

ค่าใหม่สำหรับ นโยบาย Open Cross-Origin (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 ในทำนองเดียวกัน คุณจะสามารถเปิดป๊อปอัปชุดเดิม ที่เปิดได้ในวันนี้
  • หากทั้งเครื่องมือเปิดและ Openee กำหนดส่วนหัวไว้ และหน้าเป็นแบบข้ามต้นทาง หน้าดังกล่าวจะทำงานคล้ายกับอันใดอันหนึ่งที่ตั้งค่าส่วนหัวไว้ หากทั้ง 2 มาจากต้นทางเดียวกัน ระบบจะมอบสิทธิ์โดยสมบูรณ์

แยกเว็บไซต์แบบข้ามต้นทาง

เหตุใดเราจึงต้องมีการแยกแบบข้ามต้นทาง

API ของเว็บบางรายการเพิ่มความเสี่ยงในการโจมตีแบบ Side-channel เช่น 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 เพียงพอสำหรับเวิร์กโฟลว์ส่วนใหญ่ แต่เรายังพิจารณาเปิดให้พร็อพเพอร์ตี้อื่นๆ ใช้งานได้ หากมี Use Case ที่แก้ไขไม่ได้โดยการใช้เพียง postMessage และ closed โปรดแสดงความคิดเห็นในชุดข้อความ "Intent to Experiment"

แหล่งข้อมูล