การทำให้เว็บไซต์ "แยกแบบข้ามต้นทาง" โดยใช้ COOP และ COEP

ใช้ COOP และ COEP เพื่อตั้งค่าสภาพแวดล้อมแยกแบบข้ามต้นทางและเปิดใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น SharedArrayBuffer, performance.measureUserAgentSpecificMemory() และตัวจับเวลาความละเอียดสูงที่แม่นยำยิ่งขึ้น

Eiji Kitamura

ข้อมูลอัปเดต

• 21 มิถุนายน 2022: สคริปต์สำหรับผู้ปฏิบัติงานยังต้องระมัดระวังเมื่อทำการแยกแบบข้ามต้นทาง ไว้ เพิ่มคำอธิบาย
• 5 ส.ค. 2021: JS Self-Profiling API ได้รับการกล่าวถึงว่าเป็นหนึ่งใน API ที่ ต้องการการแยกแบบข้ามต้นทาง แต่จะแสดง การเปลี่ยนแปลงล่าสุดของ ทิศทาง ถูกนำออกไปแล้ว
• 6 พฤษภาคม 2021: จากความคิดเห็นและปัญหาที่รายงาน เราได้ตัดสินใจที่จะปรับ ไทม์ไลน์สําหรับการใช้งาน SharedArrayBuffer ในเว็บไซต์ที่แยกต่างหากแบบข้ามต้นทาง ใน Chrome M92 เท่านั้น
• 16 เมษายน 2021: เพิ่มโน้ตเกี่ยวกับCOEP แบบใหม่ที่ไม่มีข้อมูลเข้าสู่ระบบ โหมดและ COOP ป๊อปอัปต้นทางเดียวกันเพื่อให้ผ่อนคลาย condition สำหรับข้ามต้นทาง การแยก
• 5 มีนาคม 2021: นำข้อจำกัดสำหรับ SharedArrayBuffer ออกแล้ว performance.measureUserAgentSpecificMemory() และฟังก์ชันการแก้ไขข้อบกพร่อง ซึ่งตอนนี้เปิดใช้อย่างสมบูรณ์ใน Chrome 89 แล้ว เพิ่มความสามารถที่กำลังจะเปิดตัว performance.now() และ performance.timeOrigin จะมีค่าสูงกว่า ได้แม่นยำ
• 19 กุมภาพันธ์ 2021: เพิ่มหมายเหตุเกี่ยวกับนโยบายฟีเจอร์ allow="cross-origin-isolated" และฟังก์ชันการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บ
• 15 ตุลาคม 2020: self.crossOriginIsolated มีให้บริการใน Chrome 87 เพื่อสะท้อนว่า document.domain จะเปลี่ยนแปลงไม่ได้เมื่อ self.crossOriginIsolated แสดงผล true performance.measureUserAgentSpecificMemory() กำลังสิ้นสุดช่วงทดลองใช้จากต้นทางและ เปิดใช้โดยค่าเริ่มต้นใน Chrome 89 แล้ว บัฟเฟอร์อาร์เรย์ที่แชร์ใน Android Chrome จะ จาก Chrome 88 เท่านั้น

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

นอกจากนี้ สถานะการแยกแบบข้ามต้นทางยังป้องกันการแก้ไข document.domain (ความสามารถในการปรับเปลี่ยน document.domain จะช่วยให้การสื่อสาร ระหว่างเอกสารในไซต์เดียวกัน และถือเป็นช่องโหว่ใน นโยบายต้นทางเดียวกัน)

หากต้องการเลือกใช้สถานะแยกแบบข้ามต้นทาง คุณต้องส่งข้อมูลต่อไปนี้ ส่วนหัว HTTP ในเอกสารหลัก

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

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

คุณระบุได้ว่าหน้าเว็บอยู่ในสถานะแยกแบบข้ามต้นทางหรือไม่โดยใช้ กำลังตรวจสอบ self.crossOriginIsolated

บทความนี้จะแสดงวิธีใช้ส่วนหัวใหม่ ในการติดตามผล ฉันจะให้ข้อมูลพื้นฐานและบริบทเพิ่มเติม

ทำให้ COOP และ COEP ใช้งานได้เพื่อทำให้เว็บไซต์ของคุณแยกแบบข้ามต้นทาง

ผสานรวม COOP และ COEP

1. ตั้งค่าส่วนหัว Cross-Origin-Opener-Policy: same-origin ในเอกสารระดับบนสุด

เมื่อเปิดใช้ COOP: same-origin ในเอกสารระดับบนสุด หน้าต่างที่มีตัวเลือก และหน้าต่างที่เปิดจากเอกสาร จะมีการเรียกดูแยกต่างหาก กลุ่มบริบท เว้นแต่จะอยู่ในต้นทางเดียวกันที่มีการตั้งค่า COOP เดียวกัน ดังนั้น ระบบจะบังคับใช้การแยกสําหรับหน้าต่างที่เปิดอยู่และการสื่อสารระหว่าง ทั้ง 2 หน้าต่างปิดอยู่

กลุ่มบริบทสำหรับการเรียกดูคือชุดหน้าต่างที่สามารถอ้างอิงกันและกันได้ สำหรับ เช่น เอกสารระดับบนสุดและเอกสารย่อยที่ฝังผ่าน <iframe> หากเว็บไซต์ (https://a.example) เปิดหน้าต่างป๊อปอัป (https://b.example) หน้าต่างเปิดและหน้าต่างป๊อปอัปจะใช้บริบทการท่องเว็บแบบเดียวกัน ดังนั้น แต่จะสามารถเข้าถึงกันผ่าน DOM API เช่น window.opener

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

2. ตรวจสอบว่าทรัพยากรเปิดใช้ CORP หรือ CORS

ตรวจสอบว่าทรัพยากรทั้งหมดในหน้าโหลดด้วย CORP หรือ CORS HTTP ส่วนหัว ขั้นตอนนี้จำเป็นสำหรับขั้นตอนที่ 4 ซึ่งเปิดใช้งาน COEP

ต่อไปนี้เป็นสิ่งที่คุณต้องทำ ทั้งนี้ขึ้นอยู่กับลักษณะของทรัพยากร:

• หากคาดว่าทรัพยากรจะโหลดจากต้นทางเดียวกันเท่านั้น ให้ตั้งค่า ส่วนหัว Cross-Origin-Resource-Policy: same-origin
• หากมีการคาดหวังทรัพยากรว่าจะโหลดจากเว็บไซต์เดียวกันเท่านั้น แต่โหลดข้ามแพลตฟอร์ม ต้นทาง ให้ตั้งค่าส่วนหัว Cross-Origin-Resource-Policy: same-site
• หากทรัพยากรโหลดจากหลายต้นทางภายใต้การควบคุมของคุณ ให้ตั้งค่า Cross-Origin-Resource-Policy: cross-origin หากเป็นไปได้
• สำหรับทรัพยากรแบบข้ามต้นทางที่คุณไม่มีสิทธิ์ควบคุม
  • ใช้แอตทริบิวต์ crossorigin ในแท็ก HTML ที่โหลดหากทรัพยากร ให้บริการกับ CORS (เช่น <img src="***" crossorigin>)
  • โปรดขอให้เจ้าของทรัพยากรสนับสนุน CORS หรือ CORP
• สำหรับ iframe ให้ทำตามหลักการเดียวกันกับด้านบนและตั้งค่า Cross-Origin-Resource-Policy: cross-origin (หรือ same-site, same-origin ขึ้นอยู่กับบริบท)
• สคริปต์ที่โหลดด้วย WebWorker ต้องแสดงจากต้นทางเดียวกัน จึงไม่จำเป็นต้องใช้ส่วนหัว CORP หรือ CORS
• สำหรับเอกสารหรือผู้ปฏิบัติงานที่รับหน้าด้วย COEP: require-corp แบบข้ามต้นทาง ทรัพยากรย่อยที่โหลดโดยไม่มี CORS ต้องตั้งค่าส่วนหัว Cross-Origin-Resource-Policy: cross-origin เพื่อเลือกใช้การฝัง ตัวอย่างเช่น <script>, importScripts, <link>, <video>, <iframe> ฯลฯ

3. ใช้ส่วนหัว HTTP แบบรายงานเท่านั้นของ COEP เพื่อประเมินทรัพยากรที่ฝัง

ก่อนที่จะเปิดใช้ COEP โดยสมบูรณ์ คุณสามารถทดลองเรียกใช้โดยใช้ Cross-Origin-Embedder-Policy-Report-Onlyเพื่อตรวจสอบว่านโยบาย ใช้งานได้จริง คุณจะได้รับรายงานโดยไม่บล็อกเนื้อหาที่ฝัง

ใช้การตั้งค่านี้แบบวนซ้ำกับเอกสารทั้งหมด รวมถึงเอกสารระดับบนสุด iframe และสคริปต์สำหรับผู้ปฏิบัติงาน สำหรับข้อมูลเกี่ยวกับส่วนหัว HTTP แบบรายงานเท่านั้น โปรดดู สังเกตปัญหาโดยใช้การรายงาน API

4. เปิดใช้ COEP

เมื่อคุณยืนยันแล้วว่าทุกอย่างใช้งานได้ และทรัพยากรทั้งหมดสามารถ โหลดสำเร็จแล้ว เปลี่ยนโหมดของ Cross-Origin-Embedder-Policy-Report-Only ไปยังส่วนหัว Cross-Origin-Embedder-Policy ที่มีค่าเดียวกันทั้งหมด ซึ่งรวมถึงเอกสารที่ฝังผ่าน iframe และสคริปต์ผู้ปฏิบัติงาน

พิจารณาว่าการแยกสำเร็จหรือไม่เมื่อใช้ self.crossOriginIsolated

พร็อพเพอร์ตี้ self.crossOriginIsolated แสดงผล true เมื่อหน้าเว็บอยู่ใน สถานะการแยกแบบข้ามต้นทางและทรัพยากรและหน้าต่างทั้งหมดจะถูกแยกไว้ภายใน กลุ่มบริบทการท่องเว็บเดียวกัน คุณใช้ API นี้เพื่อระบุได้ว่า ได้แยกกลุ่มบริบทของการท่องเว็บ และได้รับสิทธิ์เข้าถึง ฟีเจอร์ที่มีประสิทธิภาพ เช่น performance.measureUserAgentSpecificMemory()

แก้ไขข้อบกพร่องโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

สำหรับแหล่งข้อมูลที่แสดงบนหน้าจอ เช่น รูปภาพ นั้นค่อนข้างง่าย เพื่อตรวจหาปัญหา COEP เนื่องจากคำขอจะถูกบล็อกและหน้าเว็บจะ แสดงว่าไม่มีรูปภาพ แต่สำหรับทรัพยากรที่ไม่มี ที่ต้องมีผลกระทบด้านภาพ เช่น สคริปต์หรือรูปแบบ ปัญหาเกี่ยวกับ COEP อาจ ไม่มีใครเห็น สำหรับการดำเนินการเหล่านั้น ให้ใช้แผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บ ถ้า หากพบปัญหาเกี่ยวกับ COEP คุณควร (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) ในสถานะ

จากนั้นคุณสามารถคลิกที่รายการเพื่อดูรายละเอียดเพิ่มเติม

นอกจากนี้ คุณยังสามารถระบุสถานะของ iframe และหน้าต่างป๊อปอัปผ่าน แผงแอปพลิเคชัน ไปที่ "เฟรม" ทางด้านซ้ายมือและ ขยาย "ด้านบน" เพื่อดูรายละเอียดของโครงสร้างทรัพยากร

คุณสามารถตรวจสอบสถานะของ iframe เช่น ความพร้อมใช้งานของ SharedArrayBuffer อื่นๆ

คุณยังตรวจสอบสถานะของหน้าต่างป๊อปอัปได้ด้วย เช่น เป็นข้ามต้นทางหรือไม่ เป็นแห่งๆ

ตรวจสอบปัญหาโดยใช้ Reporting API

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

หากต้องการทราบวิธีกำหนดค่า Reporting API และตั้งค่าเซิร์ฟเวอร์เพื่อรับ โปรดไปที่การใช้ API

ตัวอย่างรายงาน COEP

ตัวอย่างของ COEP รายงาน เพย์โหลดเมื่อทรัพยากรข้ามต้นทางถูกบล็อกจะมีลักษณะดังนี้

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

ตัวอย่างรายงาน COOP

ตัวอย่าง COOP เพย์โหลด report เมื่อเปิดหน้าต่างป๊อปอัป จะมีลักษณะดังนี้

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

เมื่อกลุ่มบริบทในการท่องเว็บที่ต่างกันพยายามเข้าถึงกัน (เฉพาะเมื่อเปิด "รายงานเท่านั้น" ) COOP ก็จะส่งรายงานด้วย ตัวอย่างเช่น รายงานเมื่อ การพยายามใช้ postMessage() จะมีลักษณะดังนี้

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

บทสรุป

ใช้ส่วนหัว HTTP ของ COOP และ COEP ร่วมกันเพื่อเลือกให้หน้าเว็บใช้แบบพิเศษ สถานะแยกแบบข้ามต้นทาง คุณจะสามารถตรวจสอบ self.crossOriginIsolated เพื่อระบุว่าหน้าเว็บอยู่ในแบบข้ามต้นทางหรือไม่ สถานะที่โดดเดี่ยว

เราจะอัปเดตโพสต์นี้เมื่อมีฟีเจอร์ใหม่พร้อมใช้งาน สถานะการแยกแบบข้ามต้นทางและการปรับปรุงเพิ่มเติมสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ เกี่ยวกับ COOP และ COEP

แหล่งข้อมูล

• เหตุใดจึงต้องมี "แยกต่างหากแบบข้ามต้นทาง" สำหรับฟีเจอร์ที่มีประสิทธิภาพ
• คำแนะนำในการเปิดใช้การแยกแบบข้ามต้นทาง
• การอัปเดต SharedArrayBuffer ใน Android Chrome 88 และ Chrome ในเดสก์ท็อป 92
• ตรวจสอบการใช้หน่วยความจำทั้งหมดของหน้าเว็บด้วย measureUserAgentSpecificMemory()