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

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

มูด นาลปาส
Maud Nalpas
Twitter GitHub
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

ในกรณีการใช้งานส่วนใหญ่ แบบข้ามต้นทาง 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