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

ใช้ 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