Chrome ปิดการแก้ไข document.domain

หากเว็บไซต์ของคุณต้องอาศัยการตั้งค่า document.domain คุณจะต้องดำเนินการ

Maud Nalpas
Eiji Kitamura

สิ่งที่จะเปลี่ยนแปลงและเหตุผล

ตั้งแต่ Chrome 115 เป็นต้นไป เว็บไซต์จะตั้งค่า document.domain ไม่ได้ โดย Chrome จะทำให้ document.domain เปลี่ยนแปลงไม่ได้ หากต้องการสื่อสารแบบข้ามต้นทาง คุณต้องใช้วิธีอื่น เช่น postMessage() หรือ Channel Messaging API

โปรดทราบว่าเราจะทยอยเปิดตัวการเปลี่ยนแปลงนี้

เราคาดว่าเบราว์เซอร์อื่นๆ จะเลิกใช้งานและนำฟังก์ชันนี้ออกในที่สุด ดูรายละเอียดได้ที่ส่วนความเข้ากันได้ของเบราว์เซอร์

เหตุใดจึงทำให้ document.domain เปลี่ยนแปลงไม่ได้

document.domain ได้รับการออกแบบมาเพื่อรับหรือตั้งค่าชื่อโฮสต์ของต้นทาง เว็บไซต์จำนวนมากตั้งค่า document.domain เพื่ออนุญาตให้มีการสื่อสารระหว่างหน้าเว็บในเว็บไซต์เดียวกันแต่มาจากต่างต้นทาง

แม้ว่าจะเป็นเทคนิคที่สะดวก แต่ก็ทำให้เกิดความเสี่ยงด้านความปลอดภัยเนื่องจากผ่อนปรนนโยบายต้นทางเดียวกัน ความกังวลด้านความปลอดภัยเกี่ยวกับ document.domain ทำให้เกิดการเปลี่ยนแปลงในข้อกำหนดที่เตือนผู้ใช้ไม่ให้ใช้

รายละเอียด: เหตุผลที่ต้องทำให้ document.domain เปลี่ยนแปลงไม่ได้

การใช้งาน document.domain ในปัจจุบัน

เว็บไซต์จำนวนมากตั้งค่า document.domain เพื่ออนุญาตให้มีการสื่อสารระหว่างหน้าเว็บในเว็บไซต์เดียวกันแต่มาจากต้นทางที่ต่างกัน

เว็บไซต์ที่มาจากเว็บไซต์เดียวกันแต่ต่างต้นทางจะมี eTLD+1 เหมือนกัน แต่มีโดเมนย่อยต่างกัน

document.domain มีการใช้งานดังนี้

สมมติว่าหน้าเว็บใน https://parent.example.com ฝังหน้า iframe จาก https://video.example.com หน้าเว็บเหล่านี้มี eTLD+1 เดียวกัน (example.com) แต่มีโดเมนย่อยที่แตกต่างกัน เมื่อตั้งค่า document.domain ของทั้ง 2 หน้าเป็น 'example.com' เบราว์เซอร์จะถือว่าต้นทางทั้ง 2 เป็นต้นทางเดียวกัน

ตั้งค่า document.domain สำหรับ https://parent.example.com ดังนี้

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

ตั้งค่า document.domain สำหรับ https://video.example.com ดังนี้

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

ตอนนี้คุณสร้างการจัดการ DOM แบบข้ามต้นทางใน https://parent.example.com กับ https://video.example.com ได้แล้ว

เว็บไซต์ตั้งค่า document.domain เพื่อให้เอกสารในเว็บไซต์เดียวกันสื่อสารกันได้ง่ายขึ้น เนื่องจากการเปลี่ยนแปลงนี้ผ่อนปรนนโยบายต้นทางเดียวกัน หน้าหลักจึงเข้าถึงเอกสารของ iframe และไปยัง แผนผัง DOM ได้ และในทางกลับกัน

แม้ว่าจะเป็นเทคนิคที่สะดวก แต่ก็มีความเสี่ยงด้านความปลอดภัย

ข้อกังวลด้านความปลอดภัยเกี่ยวกับ document.domain

ความกังวลด้านความปลอดภัยเกี่ยวกับ document.domain ทำให้เกิดการเปลี่ยนแปลงใน ข้อกำหนดที่เตือนผู้ใช้ให้หลีกเลี่ยงการใช้งาน

ตัวอย่างเช่น เมื่อหน้าเว็บ 2 หน้าตั้งค่า document.domain หน้าเว็บเหล่านั้นจะทำราวกับว่ามาจาก ต้นทางเดียวกันได้ ซึ่งถือเป็นสิ่งสำคัญอย่างยิ่งเมื่อหน้าเว็บเหล่านี้ใช้บริการโฮสติ้งที่ใช้ร่วมกันกับโดเมนย่อยที่แตกต่างกัน การตั้งค่า document.domain จะเปิด สิทธิ์เข้าถึงเว็บไซต์อื่นๆ ทั้งหมดที่โฮสต์โดยบริการเดียวกัน ซึ่งทำให้ผู้โจมตีเข้าถึงเว็บไซต์ของคุณได้ง่ายขึ้น ซึ่งเป็นไปได้เนื่องจาก document.domain ไม่สนใจส่วนหมายเลขพอร์ตของโดเมน

ดูข้อมูลเพิ่มเติมเกี่ยวกับผลกระทบด้านความปลอดภัยของการตั้งค่า document.domain, โปรดอ่านหน้า"Document.domain" ใน MDN

ความเข้ากันได้กับเบราว์เซอร์

ฉันจะทราบได้อย่างไรว่าเว็บไซต์ของฉันได้รับผลกระทบหรือไม่

หากเว็บไซต์ได้รับผลกระทบจากการเปลี่ยนแปลงนี้ Chrome จะเตือนคุณในแผงปัญหาของเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งคำเตือนนี้ได้เพิ่มเข้ามาในปี 2022 สังเกตธงสีเหลืองที่ด้านขวาบนของเครื่องมือสำหรับนักพัฒนาเว็บ

ภาพหน้าจอของคำเตือนเกี่ยวกับปัญหาในเครื่องมือสำหรับนักพัฒนาเว็บ

นอกจากนี้ คุณยังเรียกใช้เว็บไซต์ผ่านการตรวจสอบ API ที่เลิกใช้งานแล้วของ Lighthouse เพื่อค้นหา API ทั้งหมดที่กำหนดเวลาให้นำออกจาก Chrome ได้ด้วย

หากคุณตั้งค่า Reporting API ไว้ Chrome จะส่งรายงานการเลิกใช้งานให้คุณ เพื่อแจ้งให้ทราบเกี่ยวกับการเลิกใช้งานที่กำลังจะเกิดขึ้นนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ Reporting API กับบริการรวบรวมรายงานที่มีอยู่ หรือโดยการสร้างโซลูชันภายในของคุณเอง

ฉันจะดูการเปลี่ยนแปลงนี้ในการทำงานจริงได้อย่างไร

เราจะทยอยเปิดตัวการเปลี่ยนแปลงนี้โดยเริ่มใน Chrome 115 หากต้องการดูการเปลี่ยนแปลงนี้แม้ว่าจะยังไม่ได้เปิดตัวในเบราว์เซอร์ Chrome คุณก็เปิดใช้ได้โดยทำดังนี้

  1. เปิด chrome://flags/#origin-agent-cluster-default
  2. เลือกเปิดใช้
  3. รีสตาร์ท Chrome

ฉันจะใช้ตัวเลือกอื่นใดได้บ้าง

ตัวเลือกที่ดีที่สุดคือไม่แก้ไข document.domain เลย เช่น โดย โฮสต์หน้าเว็บและเฟรมทั้งหมดที่เป็นส่วนประกอบในต้นทางเดียวกัน ฟีเจอร์นี้ใช้ได้ในทุกเวอร์ชันของทุกเบราว์เซอร์ แต่การดำเนินการนี้อาจต้องมีการปรับปรุงแอปพลิเคชันใหม่จำนวนมาก ดังนั้นคุณควรพิจารณาทางเลือกอื่นที่ยังคงรองรับการเข้าถึงแบบข้ามต้นทางด้วย

ใช้ postMessage() หรือ Channel Messaging API แทน document.domain

ในกรณีการใช้งานส่วนใหญ่ Cross-Origin postMessage() หรือ Channel Messaging API สามารถแทนที่ document.domain ได้

ในตัวอย่างต่อไปนี้

  1. https://parent.example.com คำขอ https://video.example.com ภายใน iframe เพื่อจัดการ DOM โดยการส่งข้อความผ่าน postMessage()
  2. https://video.example.com จะจัดการ DOM ทันทีที่ได้รับข้อความและแจ้งผลสำเร็จกลับไปยังเฟรมหลัก
  3. https://parent.example.com รับทราบถึงความสำเร็จ

ในวันที่ https://parent.example.com

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

ในวันที่ https://video.example.com

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

ลองใช้และดูวิธีการทำงาน หากคุณมีข้อกำหนดเฉพาะที่ใช้กับ postMessage() หรือ Channel Messaging API ไม่ได้ โปรดแจ้งให้เราทราบทาง Twitter ผ่าน @ChromiumDev หรือถามใน Stack Overflow โดยใช้document.domainแท็ก

ทางเลือกสุดท้ายคือการส่งส่วนหัว Origin-Agent-Cluster: ?0

หากมีเหตุผลที่หนักแน่นในการตั้งค่า document.domain ต่อไป คุณสามารถส่งส่วนหัวการตอบกลับ Origin-Agent-Cluster: ?0 พร้อมกับเอกสารเป้าหมายได้

Origin-Agent-Cluster: ?0

ส่วนหัว Origin-Agent-Cluster จะสั่งให้เบราว์เซอร์พิจารณาว่าเอกสารควรได้รับการจัดการโดยคลัสเตอร์ Agent ที่ผูกกับต้นทางหรือไม่ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Origin-Agent-Clusterได้ที่การขอการแยกประสิทธิภาพด้วยส่วนหัว Origin-Agent-Cluster

เมื่อส่งส่วนหัวนี้ เอกสารจะยังคงตั้งค่า document.domain ได้ แม้ว่าโดยค่าเริ่มต้นจะเปลี่ยนแปลงไม่ได้แล้วก็ตาม

เอกสารอื่นๆ ทั้งหมดที่ต้องมีลักษณะการทำงานดังกล่าวจะต้องส่ง Origin-Agent-Cluster ด้วย (โปรดทราบว่า document.domain จะไม่มีผลหากมีเอกสารเพียงฉบับเดียวที่ตั้งค่านี้)

กำหนดค่า OriginAgentClusterDefaultEnabled สำหรับนโยบายขององค์กร

ผู้ดูแลระบบสามารถกำหนดค่านโยบาย OriginAgentClusterDefaultEnabled เป็น false เพื่อให้ตั้งค่า document.domain ได้โดยค่าเริ่มต้นในอินสแตนซ์ Chrome ทั่วทั้งองค์กร ดูข้อมูลเพิ่มเติมได้ที่รายการนโยบายและการจัดการ Chrome Enterprise | เอกสารประกอบ

แหล่งข้อมูล

คำขอบคุณ

รูปภาพโดย Finan Akbar บน Unsplash