Chrome จะปิดใช้การแก้ไข document.domain เพื่อผ่อนคลายนโยบายต้นทางเดียวกัน

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

Eiji Kitamura

ข้อมูลอัปเดต

  • 30 พฤษภาคม 2023: เราได้ประกาศว่าการเลิกใช้งานตัวตั้งค่า document.domain จะมีผลใน Chrome 115
  • 7 เมษายน 2023: เราตรวจพบปัญหาก่อนส่งการเปลี่ยนแปลงนี้ใน Chrome 112 ขณะนี้มีการระงับการตั้งค่า document.domain ที่จะนำออกโดยค่าเริ่มต้นและยังไม่ได้กำหนดเป้าหมายการจัดส่งใหม่ โปรดกลับมาดูบล็อกโพสต์นี้อีกครั้งหรือติดตาม blink-dev และชุดข้อความนี้
  • 20 มกราคม 2023: อัปเดตไทม์ไลน์ - ระบบจะนำการตั้งค่า document.domain ออกโดยค่าเริ่มต้นเริ่มตั้งแต่ Chrome 112 นอกจากนี้ ระบบจะเพิ่มการพูดถึงนโยบายองค์กรเพื่อควบคุมลักษณะการทำงานของ document.domain ด้วย
  • 25 กรกฎาคม 2022: อัปเดตไทม์ไลน์ - ระบบจะนำการตั้งค่า document.domain ออกโดยค่าเริ่มต้นเริ่มตั้งแต่ Chrome 109
  • 4 กุมภาพันธ์ 2022: อัปเดตไทม์ไลน์ใหม่ เราจะแสดงคำเตือนในแผงปัญหาโดยเริ่มตั้งแต่ Chrome 100 เป็นต้นไป ซึ่งจะนำตัวตั้งค่า document.domain ออกโดยค่าเริ่มต้นเริ่มตั้งแต่ Chrome 106 เป็นต้นไป

document.domain ออกแบบมาเพื่อรับหรือตั้งค่าชื่อโฮสต์ของต้นทาง

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

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

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

เว็บไซต์จำนวนมากกำหนดให้ 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 วางแผนที่จะทำให้ document.domain จะเปลี่ยนแปลงไม่ได้ใน Chrome 112

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

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

เมื่อมีการแก้ไข document.domain คำเตือนจะแสดงในแผง "ปัญหา"
เมื่อมีการแก้ไข document.domain คำเตือนจะแสดงในแผง "ปัญหา"

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

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

การสื่อสารข้ามต้นทางแบบอื่น

ปัจจุบันคุณมี 3 ตัวเลือกในการแทนที่ document.domain สำหรับเว็บไซต์ของคุณ

ใช้ postMessage() หรือ Channel Messaging API

ในกรณีการใช้งานส่วนใหญ่ แบบข้ามต้นทาง 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 ต่อไปได้แม้ว่าจะเปลี่ยนแปลงไม่ได้โดยค่าเริ่มต้นก็ตาม

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

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

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

แหล่งข้อมูล

กิตติกรรมประกาศ

รูปภาพโดย Braydon Anderson ใน Unsplash