การแยกแบบข้ามต้นทางทำให้หน้าเว็บใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น SharedArrayBuffer บทความนี้อธิบายวิธีเปิดใช้การแยกแบบข้ามต้นทาง ในเว็บไซต์
คู่มือนี้จะแสดงวิธีเปิดใช้การแยกแบบข้ามต้นทาง คุณต้องแยกการแยกแบบข้ามต้นทางหากต้องการใช้
SharedArrayBuffer
,
performance.measureUserAgentSpecificMemory()
หรือตัวจับเวลาความละเอียดสูงที่แม่นยำยิ่งขึ้น
หากคุณต้องการเปิดใช้การแยกแบบข้ามต้นทาง ให้ประเมินผลกระทบที่จะเกิดขึ้นกับทรัพยากรแบบข้ามต้นทางอื่นๆ ในเว็บไซต์ เช่น ตำแหน่งโฆษณา
SharedArrayBuffer
ที่ใดบ้างในเว็บไซต์ของคุณSharedArrayBuffer
จะใช้งานไม่ได้อีกต่อไปหากไม่มีการแยกแบบข้ามต้นทาง หากคุณมาที่หน้านี้เนื่องจากมีข้อความการเลิกใช้งาน SharedArrayBuffer
เป็นไปได้ว่าเว็บไซต์ของคุณหรือทรัพยากรใดทรัพยากรหนึ่งที่ฝังอยู่ในเว็บไซต์ดังกล่าวใช้ SharedArrayBuffer
เพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในเว็บไซต์เนื่องจากการเลิกใช้งาน ให้เริ่มด้วยการระบุตำแหน่งที่มีการใช้งานหากไม่แน่ใจว่ามีการใช้ SharedArrayBuffer
ที่ตำแหน่งใดของเว็บไซต์ คุณจะดูได้ 2 วิธีดังนี้
- การใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- (ขั้นสูง) การใช้การรายงานการเลิกใช้งาน
หากคุณทราบตําแหน่งที่ใช้ SharedArrayBuffer
อยู่แล้ว ให้ข้ามไปที่วิเคราะห์ผลกระทบของการแยกแบบข้ามต้นทาง
การใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจสอบเว็บไซต์ได้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในหน้าที่คุณสงสัยว่าอาจใช้
SharedArrayBuffer
- เลือกแผงคอนโซล
- หากหน้าเว็บใช้
SharedArrayBuffer
ข้อความต่อไปนี้จะปรากฏขึ้น:[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
- ชื่อไฟล์และหมายเลขบรรทัดท้ายข้อความ (เช่น
common-bundle.js:535
) จะระบุว่าSharedArrayBuffer
มาจากที่ใด หากเป็นไลบรารีของบุคคลที่สาม โปรดติดต่อนักพัฒนาซอฟต์แวร์เพื่อแก้ไขปัญหา หากติดตั้งใช้งานเป็นส่วนหนึ่งของเว็บไซต์ ให้ทำตามคำแนะนำด้านล่างเพื่อเปิดใช้การแยกแบบข้ามต้นทาง
![คำเตือนของคอนโซล DevToools เมื่อใช้ SharedArrayBuffer โดยไม่มีการแยกแบบข้ามต้นทาง](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=5&hl=th)
(ขั้นสูง) การใช้การรายงานการเลิกใช้งาน
บางเบราว์เซอร์มีฟังก์ชันการรายงานการเลิกใช้งาน API ที่ปลายทางที่ระบุ
- ตั้งค่าเซิร์ฟเวอร์รายงานการเลิกใช้งานและรับ URL การรายงาน ซึ่งทำได้โดยใช้บริการสาธารณะหรือสร้างบริการด้วยตนเอง
- ใช้ URL เพื่อตั้งค่าส่วนหัว HTTP ต่อไปนี้ไปยังหน้าเว็บที่อาจแสดงโฆษณา
SharedArrayBuffer
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- เมื่อส่วนหัวเริ่มเผยแพร่แล้ว ปลายทางที่คุณลงทะเบียนไว้ควรเริ่มรวบรวมรายงานการเลิกใช้งาน
ดูตัวอย่างการใช้งานได้ที่ https://cross-origin-isolation.glitch.me
วิเคราะห์ผลกระทบของการแยกแบบข้ามต้นทาง
คงจะดีไม่น้อยหากคุณสามารถประเมินผลที่การเปิดใช้การแยกแบบข้ามต้นทาง
จะมีต่อเว็บไซต์โดยไม่ทำให้ข้อมูลเสียหาย ส่วนหัว HTTP
Cross-Origin-Opener-Policy-Report-Only
และ
Cross-Origin-Embedder-Policy-Report-Only
ช่วยให้คุณทำเช่นนั้นได้
- ตั้งค่า
Cross-Origin-Opener-Policy-Report-Only: same-origin
ในเอกสารระดับบนสุด ส่วนหัวนี้จะส่งเฉพาะรายงานเกี่ยวกับผลกระทบที่COOP: same-origin
อาจมีต่อเว็บไซต์ของคุณเท่านั้น โดยจะไม่ปิดการสื่อสารกับหน้าต่างป๊อปอัป - ตั้งค่าการรายงานและกำหนดค่าเว็บเซิร์ฟเวอร์เพื่อรับและบันทึกรายงาน
- ตั้งค่า
Cross-Origin-Embedder-Policy-Report-Only: require-corp
ในเอกสารระดับบนสุด ขอย้ำอีกครั้งว่าส่วนหัวนี้ช่วยให้คุณเห็นผลของการเปิดใช้COEP: require-corp
โดยไม่ส่งผลต่อการทํางานของเว็บไซต์จริงๆ คุณสามารถกำหนดค่าส่วนหัวนี้ให้ส่งรายงานไปยังเซิร์ฟเวอร์การรายงานเดียวกับที่คุณตั้งค่าในขั้นตอนก่อนหน้า
ลดผลกระทบของการแยกแบบข้ามต้นทาง
หลังจากที่คุณระบุว่าทรัพยากรใดจะได้รับผลกระทบจากการแยกแบบข้ามต้นทางแล้ว หลักเกณฑ์ทั่วไปสำหรับการเลือกใช้ทรัพยากรแบบข้ามต้นทางมีดังนี้
- ในทรัพยากรแบบข้ามต้นทาง เช่น รูปภาพ, สคริปต์, สไตล์ชีต, iframe และอื่นๆ ให้ตั้งค่าส่วนหัว
Cross-Origin-Resource-Policy: cross-origin
ตั้งค่าส่วนหัวCross-Origin-Resource-Policy: same-site
สำหรับทรัพยากรในเว็บไซต์เดียวกัน - สำหรับทรัพยากรที่โหลดโดยใช้ CORS ให้ตรวจสอบว่าได้เปิดใช้แล้ว โดยตั้งค่าแอตทริบิวต์
crossorigin
ในแท็ก HTML (เช่น<img src="example.jpg" crossorigin>
) สำหรับคำขอดึงข้อมูล JavaScript ให้ตรวจสอบว่าตั้งค่าrequest.mode
เป็นcors
แล้ว - หากคุณต้องการใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น
SharedArrayBuffer
ภายใน iframe ที่โหลด ให้เพิ่มallow="cross-origin-isolated"
ต่อท้าย<iframe>
- หากทรัพยากรแบบข้ามต้นทางที่โหลดลงใน iframe หรือสคริปต์สำหรับผู้ปฏิบัติงานเกี่ยวข้องกับ iframe อีกชั้นหนึ่งหรือสคริปต์สำหรับผู้ปฏิบัติงาน ให้ใช้ขั้นตอนที่อธิบายไว้ในส่วนนี้ซ้ำๆ ก่อนดำเนินการต่อ
- เมื่อยืนยันว่าเลือกใช้ทรัพยากรแบบข้ามต้นทางทั้งหมดแล้ว ให้ตั้งค่าส่วนหัว
Cross-Origin-Embedder-Policy: require-corp
บน iframe และสคริปต์ผู้ปฏิบัติงาน (จำเป็นต้องมีโดยไม่คำนึงถึงต้นทางเดียวกันหรือข้ามต้นทาง) - ตรวจสอบว่าไม่มีหน้าต่างป๊อปอัปแบบข้ามต้นทางที่ต้องมีการสื่อสารผ่าน
postMessage()
เมื่อเปิดใช้การแยกแบบข้ามต้นทางแล้ว จะคงการทำงานไว้ไม่ได้ คุณจะย้ายการสื่อสารไปยังเอกสารอื่นที่ไม่ได้แยกต่างหากแบบข้ามต้นทาง หรือใช้วิธีการสื่อสารแบบอื่น (เช่น คำขอ HTTP) ก็ได้
เปิดใช้การแยกแบบข้ามต้นทาง
หลังจากที่ลดผลกระทบด้วยการแยกแบบข้ามต้นทางแล้ว หลักเกณฑ์ทั่วไปในการเปิดใช้การแยกแบบข้ามต้นทางมีดังนี้
- ตั้งค่าส่วนหัว
Cross-Origin-Opener-Policy: same-origin
ในเอกสารระดับบนสุด หากคุณตั้งค่าCross-Origin-Opener-Policy-Report-Only: same-origin
ไว้ ให้แทนที่ ซึ่งจะบล็อกการสื่อสารระหว่างเอกสารระดับบนสุดและหน้าต่างป๊อปอัป - ตั้งค่าส่วนหัว
Cross-Origin-Embedder-Policy: require-corp
ในเอกสารระดับบนสุด หากคุณตั้งค่าCross-Origin-Embedder-Policy-Report-Only: require-corp
ไว้ ให้แทนที่ การดำเนินการนี้จะบล็อกการโหลดทรัพยากรแบบข้ามต้นทางที่ไม่ได้เลือกใช้ - ตรวจสอบว่า
self.crossOriginIsolated
แสดงผลtrue
ในคอนโซลเพื่อยืนยันว่าหน้าเว็บเป็นแบบข้ามต้นทาง