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

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

Eiji Kitamura

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

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

ระบุตำแหน่งที่ใช้ SharedArrayBuffer ในเว็บไซต์

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

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

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

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

ดูตัวอย่างการติดตั้งใช้งาน

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

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

แหล่งข้อมูล