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

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

Maud Nalpas

Eiji Kitamura

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

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

ตั้งแต่ 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
• การสนทนากับผู้ให้บริการเบราว์เซอร์รายอื่นๆ
• คำขอดึงข้อมูลของกลุ่มทำงาน WHATWG / HTML (ประสบการณ์การทดสอบที่รอดำเนินการ)

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

คำเตือน: โปรดทราบว่าตั้งแต่ Chrome 115 เป็นต้นไป การใช้ตัวตั้งค่า document.domain จะไม่แสดงข้อยกเว้นตามข้อกำหนด แต่จะหยุดทำงานเท่านั้น

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