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

การแยกแบบข้ามต้นทางช่วยให้หน้าเว็บใช้ฟีเจอร์ที่มีประสิทธิภาพได้ เช่น 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 หากเป็นไลบรารีของบุคคลที่สาม ให้ติดต่อนักพัฒนาแอปเพื่อแก้ไขปัญหา หากติดตั้งใช้งานเป็นส่วนหนึ่งของเว็บไซต์ ให้ทําตามคู่มือด้านล่างเพื่อเปิดใช้การแยกแหล่งที่มาหลายแห่ง
คําเตือนในคอนโซลของ DevTools เมื่อใช้ SharedArrayBuffer โดยไม่แยกต่างหากแบบข้ามต้นทาง
คําเตือนของคอนโซล DevTools เมื่อใช้ 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 หรือสคริปต์ Worker เกี่ยวข้องกับ iframe หรือสคริปต์ Worker อีกเลเยอร์หนึ่ง ให้ใช้ขั้นตอนที่อธิบายในส่วนนี้ซ้ำๆ ก่อนดำเนินการต่อ
  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 ในคอนโซลเพื่อยืนยันว่าหน้าเว็บของคุณแยกกันหลายแหล่งที่มา

แหล่งข้อมูล