คำแนะนำในการเปิดใช้การแยกแบบข้ามต้นทาง

การแยกแบบข้ามต้นทางทำให้หน้าเว็บใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น SharedArrayBuffer บทความนี้อธิบายวิธีเปิดใช้การแยกแบบข้ามต้นทาง ในเว็บไซต์

Eiji Kitamura

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

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

ระบุว่ามีการใช้ SharedArrayBuffer ที่ใดบ้างในเว็บไซต์ของคุณ
ตั้งแต่ Chrome 92 เป็นต้นไป ฟังก์ชันที่ใช้ SharedArrayBuffer จะใช้งานไม่ได้อีกต่อไปหากไม่มีการแยกแบบข้ามต้นทาง หากคุณมาที่หน้านี้เนื่องจากมีข้อความการเลิกใช้งาน SharedArrayBuffer เป็นไปได้ว่าเว็บไซต์ของคุณหรือทรัพยากรใดทรัพยากรหนึ่งที่ฝังอยู่ในเว็บไซต์ดังกล่าวใช้ SharedArrayBuffer เพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในเว็บไซต์เนื่องจากการเลิกใช้งาน ให้เริ่มด้วยการระบุตำแหน่งที่มีการใช้งาน

หากไม่แน่ใจว่ามีการใช้ SharedArrayBuffer ที่ตำแหน่งใดของเว็บไซต์ คุณจะดูได้ 2 วิธีดังนี้

  • การใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
  • (ขั้นสูง) การใช้การรายงานการเลิกใช้งาน

หากคุณทราบตําแหน่งที่ใช้ SharedArrayBuffer อยู่แล้ว ให้ข้ามไปที่วิเคราะห์ผลกระทบของการแยกแบบข้ามต้นทาง

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

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในหน้าที่คุณสงสัยว่าอาจใช้ SharedArrayBuffer
  2. เลือกแผงคอนโซล
  3. หากหน้าเว็บใช้ 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
  4. ชื่อไฟล์และหมายเลขบรรทัดท้ายข้อความ (เช่น common-bundle.js:535) จะระบุว่า SharedArrayBuffer มาจากที่ใด หากเป็นไลบรารีของบุคคลที่สาม โปรดติดต่อนักพัฒนาซอฟต์แวร์เพื่อแก้ไขปัญหา หากติดตั้งใช้งานเป็นส่วนหนึ่งของเว็บไซต์ ให้ทำตามคำแนะนำด้านล่างเพื่อเปิดใช้การแยกแบบข้ามต้นทาง
คำเตือนของคอนโซล DevToools เมื่อใช้ SharedArrayBuffer โดยไม่มีการแยกแบบข้ามต้นทาง
คำเตือนของคอนโซล DevToools เมื่อใช้ SharedArrayBuffer โดยไม่มีการแยกแบบข้ามต้นทาง

(ขั้นสูง) การใช้การรายงานการเลิกใช้งาน

บางเบราว์เซอร์มีฟังก์ชันการรายงานการเลิกใช้งาน API ที่ปลายทางที่ระบุ

  1. ตั้งค่าเซิร์ฟเวอร์รายงานการเลิกใช้งานและรับ URL การรายงาน ซึ่งทำได้โดยใช้บริการสาธารณะหรือสร้างบริการด้วยตนเอง
  2. ใช้ URL เพื่อตั้งค่าส่วนหัว HTTP ต่อไปนี้ไปยังหน้าเว็บที่อาจแสดงโฆษณา SharedArrayBuffer
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. เมื่อส่วนหัวเริ่มเผยแพร่แล้ว ปลายทางที่คุณลงทะเบียนไว้ควรเริ่มรวบรวมรายงานการเลิกใช้งาน

ดูตัวอย่างการใช้งานได้ที่ https://cross-origin-isolation.glitch.me

วิเคราะห์ผลกระทบของการแยกแบบข้ามต้นทาง

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

  1. ตั้งค่า Cross-Origin-Opener-Policy-Report-Only: same-origin ในเอกสารระดับบนสุด ส่วนหัวนี้จะส่งเฉพาะรายงานเกี่ยวกับผลกระทบที่ COOP: same-origin อาจมีต่อเว็บไซต์ของคุณเท่านั้น โดยจะไม่ปิดการสื่อสารกับหน้าต่างป๊อปอัป
  2. ตั้งค่าการรายงานและกำหนดค่าเว็บเซิร์ฟเวอร์เพื่อรับและบันทึกรายงาน
  3. ตั้งค่า Cross-Origin-Embedder-Policy-Report-Only: require-corp ในเอกสารระดับบนสุด ขอย้ำอีกครั้งว่าส่วนหัวนี้ช่วยให้คุณเห็นผลของการเปิดใช้ COEP: require-corp โดยไม่ส่งผลต่อการทํางานของเว็บไซต์จริงๆ คุณสามารถกำหนดค่าส่วนหัวนี้ให้ส่งรายงานไปยังเซิร์ฟเวอร์การรายงานเดียวกับที่คุณตั้งค่าในขั้นตอนก่อนหน้า

ลดผลกระทบของการแยกแบบข้ามต้นทาง

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

  1. ในทรัพยากรแบบข้ามต้นทาง เช่น รูปภาพ, สคริปต์, สไตล์ชีต, iframe และอื่นๆ ให้ตั้งค่าส่วนหัว Cross-Origin-Resource-Policy: cross-origin ตั้งค่าส่วนหัว Cross-Origin-Resource-Policy: same-site สำหรับทรัพยากรในเว็บไซต์เดียวกัน
  2. สำหรับทรัพยากรที่โหลดโดยใช้ CORS ให้ตรวจสอบว่าได้เปิดใช้แล้ว โดยตั้งค่าแอตทริบิวต์ crossorigin ในแท็ก HTML (เช่น <img src="example.jpg" crossorigin>) สำหรับคำขอดึงข้อมูล JavaScript ให้ตรวจสอบว่าตั้งค่า request.mode เป็น cors แล้ว
  3. หากคุณต้องการใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น SharedArrayBuffer ภายใน iframe ที่โหลด ให้เพิ่ม allow="cross-origin-isolated" ต่อท้าย <iframe>
  4. หากทรัพยากรแบบข้ามต้นทางที่โหลดลงใน iframe หรือสคริปต์สำหรับผู้ปฏิบัติงานเกี่ยวข้องกับ iframe อีกชั้นหนึ่งหรือสคริปต์สำหรับผู้ปฏิบัติงาน ให้ใช้ขั้นตอนที่อธิบายไว้ในส่วนนี้ซ้ำๆ ก่อนดำเนินการต่อ
  5. เมื่อยืนยันว่าเลือกใช้ทรัพยากรแบบข้ามต้นทางทั้งหมดแล้ว ให้ตั้งค่าส่วนหัว Cross-Origin-Embedder-Policy: require-corp บน iframe และสคริปต์ผู้ปฏิบัติงาน (จำเป็นต้องมีโดยไม่คำนึงถึงต้นทางเดียวกันหรือข้ามต้นทาง)
  6. ตรวจสอบว่าไม่มีหน้าต่างป๊อปอัปแบบข้ามต้นทางที่ต้องมีการสื่อสารผ่าน postMessage() เมื่อเปิดใช้การแยกแบบข้ามต้นทางแล้ว จะคงการทำงานไว้ไม่ได้ คุณจะย้ายการสื่อสารไปยังเอกสารอื่นที่ไม่ได้แยกต่างหากแบบข้ามต้นทาง หรือใช้วิธีการสื่อสารแบบอื่น (เช่น คำขอ HTTP) ก็ได้

เปิดใช้การแยกแบบข้ามต้นทาง

หลังจากที่ลดผลกระทบด้วยการแยกแบบข้ามต้นทางแล้ว หลักเกณฑ์ทั่วไปในการเปิดใช้การแยกแบบข้ามต้นทางมีดังนี้

  1. ตั้งค่าส่วนหัว Cross-Origin-Opener-Policy: same-origin ในเอกสารระดับบนสุด หากคุณตั้งค่า Cross-Origin-Opener-Policy-Report-Only: same-origin ไว้ ให้แทนที่ ซึ่งจะบล็อกการสื่อสารระหว่างเอกสารระดับบนสุดและหน้าต่างป๊อปอัป
  2. ตั้งค่าส่วนหัว Cross-Origin-Embedder-Policy: require-corp ในเอกสารระดับบนสุด หากคุณตั้งค่า Cross-Origin-Embedder-Policy-Report-Only: require-corp ไว้ ให้แทนที่ การดำเนินการนี้จะบล็อกการโหลดทรัพยากรแบบข้ามต้นทางที่ไม่ได้เลือกใช้
  3. ตรวจสอบว่า self.crossOriginIsolated แสดงผล true ในคอนโซลเพื่อยืนยันว่าหน้าเว็บเป็นแบบข้ามต้นทาง

แหล่งข้อมูล