ใช้ COOP และ COEP เพื่อตั้งค่าสภาพแวดล้อมที่แยกแบบข้ามต้นทางและเปิดใช้ฟีเจอร์ประสิทธิภาพสูง เช่น SharedArrayBuffer
, performance.measureUserAgentSpecificMemory()
และตัวจับเวลาความละเอียดสูงที่แม่นยำยิ่งขึ้น
ข้อมูลอัปเดต
- 21 มิถุนายน 2022: สคริปต์ของผู้ปฏิบัติงานก็ต้องได้รับการดูแลเมื่อมีการเปิดใช้การแยกแบบข้ามต้นทาง เพิ่มคำอธิบาย
- 5 ส.ค. 2021: มีการกล่าวถึง JS Self-Profiling API ว่าเป็น API หนึ่งที่ต้องมีการแยกแบบข้ามต้นทาง แต่แสดงถึงการเปลี่ยนแปลงทิศทางล่าสุด จึงถูกนำออก
- 6 พฤษภาคม 2021: จากความคิดเห็นและปัญหาที่รายงาน เราได้ตัดสินใจที่จะปรับไทม์ไลน์สำหรับการใช้งาน
SharedArrayBuffer
ในเว็บไซต์ที่ไม่มีการแยกแบบข้ามต้นทางที่จะถูกจำกัดใน Chrome M92 - 16 เมษายน 2021: เพิ่มหมายเหตุเกี่ยวกับโหมดใหม่ของ COEP แบบไม่มีข้อมูลเข้าสู่ระบบ และ COOP ที่มาจากแหล่งเดียวกันที่อนุญาตสำหรับการแยกแบบข้ามต้นทาง
- 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 Shared Array Buffer ใน Android Chrome จะพร้อมใช้งานจาก Chrome 88
โดย API ของเว็บบางอย่างจะเพิ่มความเสี่ยงในการโจมตีแบบ Side-channel อย่างเช่น Spectre เบราว์เซอร์จะเสนอสภาพแวดล้อมแยกต่างหากที่อิงจากการเลือกใช้ซึ่งเรียกว่าการแยกแบบข้ามต้นทางเพื่อลดความเสี่ยงดังกล่าว ด้วยสถานะแยกแบบข้ามต้นทาง หน้าเว็บจะสามารถใช้ฟีเจอร์พิเศษต่อไปนี้
API | คำอธิบาย |
---|---|
SharedArrayBuffer
|
ต้องระบุสำหรับชุดข้อความ WebAssembly มีให้บริการใน Android Chrome 88 ปัจจุบันเวอร์ชันเดสก์ท็อปจะเปิดใช้โดยค่าเริ่มต้นด้วยความช่วยเหลือจาก การแยกเว็บไซต์ แต่จะต้องใช้สถานะการแยกเว็บไซต์แบบข้ามต้นทางและ จะปิดใช้โดยค่าเริ่มต้นใน Chrome 92 |
performance.measureUserAgentSpecificMemory()
|
พร้อมใช้งานใน Chrome 89 |
performance.now() performance.timeOrigin
|
ซึ่งขณะนี้พร้อมให้บริการในเบราว์เซอร์ต่างๆ ที่มีความละเอียดจำกัดอยู่ที่ 100 ไมโครวินาทีขึ้นไป การแยกแบบข้ามต้นทางจะทำให้มีความละเอียดไม่เกิน 5 ไมโครวินาที |
สถานะที่แยกแบบข้ามต้นทางยังป้องกันไม่ให้แก้ไข 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
ตรวจสอบว่าทรัพยากรทั้งหมดในหน้าเว็บโหลดด้วยส่วนหัว HTTP ของ CORP หรือ CORS จำเป็นต้องมีขั้นตอนนี้สำหรับขั้นตอนที่ 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 สำหรับการรายงานเท่านั้น โปรดดูสังเกตปัญหาโดยใช้ Reporting 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 และตั้งค่าเซิร์ฟเวอร์ให้รับรายงาน ให้ไปที่การใช้ Reporting 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 เมื่อมีการเปิดหน้าต่างป๊อปอัปแยกออกมาเป็นแบบนี้
[{
"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 เพิ่มเติม