หากเว็บไซต์ของคุณใช้การตั้งค่า 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
Setter - หารือกับผู้ให้บริการเบราว์เซอร์รายอื่น
- การดึงคำขอของกลุ่มทำงาน WHATWG / HTML (ประสบการณ์การทดสอบที่รอดำเนินการ)
ฉันจะทราบได้อย่างไรว่าเว็บไซต์ของฉันได้รับผลกระทบหรือไม่
หากเว็บไซต์ได้รับผลกระทบจากการเปลี่ยนแปลงนี้ Chrome จะเตือนคุณในแผงปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บว่ามีการเพิ่มคำเตือนนี้ในปี 2022 คุณจะเห็นธงสีเหลืองที่ด้านขวาบนของเครื่องมือสำหรับนักพัฒนาเว็บ
นอกจากนี้คุณยังสามารถเรียกใช้เว็บไซต์ผ่านการตรวจสอบ API ที่ LightHouse เลิกใช้งาน เพื่อค้นหา API ทั้งหมดที่กำหนดเวลาไว้ให้นำออกจาก Chrome
หากคุณตั้งค่า Reporting API ไว้ Chrome จะส่งรายงานการเลิกใช้งานเพื่อแจ้งให้คุณทราบเกี่ยวกับการเลิกใช้งานที่กําลังจะเกิดขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ Reporting API กับบริการรวบรวมรายงานที่มีอยู่หรือโดยการสร้างโซลูชันภายในองค์กรของคุณเอง
ฉันจะดูการเปลี่ยนแปลงนี้ในสถานการณ์จริงได้อย่างไร
การเปลี่ยนแปลงนี้จะทยอยเปิดตัวเรื่อยๆ โดยจะเริ่มใน Chrome 115 หากต้องการดูการทำงานของการเปลี่ยนแปลงนี้แม้ว่าจะยังไม่ได้เปิดตัวในเบราว์เซอร์ Chrome ก็ตาม คุณสามารถเปิดได้ด้วยวิธีการต่อไปนี้
- เปิด
chrome://flags/#origin-agent-cluster-default
- เลือกเปิดใช้
- รีสตาร์ท Chrome
ฉันจะใช้ทางเลือกใดได้บ้าง
ตัวเลือกที่ดีที่สุดคือไม่แก้ไข document.domain
เลย เช่น โดยการโฮสต์หน้าเว็บและเฟรมส่วนประกอบทั้งหมดบนต้นทางเดียวกัน วิธีนี้ได้ผลกับ
ทุกเวอร์ชันของเบราว์เซอร์ แต่วิธีนี้อาจต้องมีการปรับปรุงแอปพลิเคชันค่อนข้างใหม่ คุณจึงควรมองหาทางเลือกที่รองรับการเข้าถึงแบบข้ามต้นทางต่อไป
ใช้ postMessage()
หรือ Channel Messaging API แทน document.domain
ในกรณีการใช้งานส่วนใหญ่ แบบข้ามต้นทาง
postMessage()
หรือ Channel Messaging API
สามารถแทนที่ document.domain
ได้
ในตัวอย่างต่อไปนี้
https://parent.example.com
ขอhttps://video.example.com
ภายใน iframe ในการจัดการ DOM โดยส่งข้อความผ่านpostMessage()
https://video.example.com
จัดการ DOM ทันทีที่ได้รับข้อความและแจ้งความสำเร็จกลับไปให้ระดับบนสุด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
- API ของเว็บ | MDN- การแยกต้นทางและการเลิกใช้งาน
document.domain
- การเลิกใช้งาน
document.domain
· ปัญหา #564 · w3ctag/design-reviews
กิตติกรรมประกาศ
รูปภาพโดย Finan Akbar ใน Unsplash