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

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

• ข้อกำหนด HTML ระบุว่าควรนำฟีเจอร์นี้ออก
• Mozilla พิจารณาว่าการปิดใช้ document.domain โดยค่าเริ่มต้นเป็นการสร้างต้นแบบที่ควรทำ
• WebKit ระบุว่าเห็นด้วยในระดับปานกลางเกี่ยวกับการเลิกใช้งานdocument.domain setter
• การสนทนากับผู้ให้บริการเบราว์เซอร์รายอื่นๆ
• คำขอดึงข้อมูลของกลุ่มทำงาน WHATWG / HTML (ประสบการณ์การทดสอบที่รอดำเนินการ)

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

หากเว็บไซต์ได้รับผลกระทบจากการเปลี่ยนแปลงนี้ 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

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

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

1. https://parent.example.com ส่งคําขอ https://video.example.com ภายใน div แบบ 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 | เอกสาร

แหล่งข้อมูล

• Document.domain - Web API | MDN
• การแยกต้นทางและการเลิกใช้งาน document.domain
• การเลิกใช้งาน document.domain · ปัญหา #564 · w3ctag/design-reviews

ขอขอบคุณ

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